FontSize conflict between link and social-links blocks

[CallMarl]

Description

Customize the font size of link into global settings override the custome size defined into social-links block. Caused by the order of css call, the instruction below should include the native block class .wp-block-social-link-anchor:

a:where(:not(.wp-element-button)) {
    font-size: var(--wp--preset--font-size--small);
}

to:

a:where(:not(.wp-element-button, .wp-block-social-link-anchor)) {
    font-size: var(--wp--preset--font-size--small);
}

I tried into developper tool and this fix work.

Step-by-step reproduction instructions

Into theme.json set styles.elements.link.typography.fontSize with custom size like:

{
    "styles": {
        "elements": {
            "link": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--small)"
                }
        }
        }
    }
}

Then try to define into wordpress gutenberg editor custom size into the social links editor.

Screenshots, screen recording, code snippet

Environment info

• Wordpress 6.7
• Gutenberg (native)
• Theme twentytwentyfour

Please confirm that you have searched existing issues in the repo.

• [x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [x] Yes

Please confirm which theme type you used for testing.

• [x] Block
• [ ] Classic
• [ ] Hybrid (e.g. classic with theme.json)
• [ ] Not sure

[carolinan]

I would strongly recommend against setting a font size to elements > link. Like you showed with the code example, this will affect many more elements than the link in the social links block.

I don't think that adding a :not for each block that may contain a link would be ideal: Not to mention links in third-party blocks or on the HTML block.

Instead, I would recommended only using the elements > link for section styles or blocks. styles > blocks > block name > elements > link

[CallMarl]

Hello @carolinan, thanks for your feedback.

The problem here is about the behaviour; you always must defined the general first then the specificity. For me this bug is revelante to the stylesheet call or rules specificity... The <style id="global-styles-inline-css"> should be call earlier or block rules should be defined with higher specificity. I'am very beginner in wordpress programming so I do not know what is the best way to fix it.