Global link styles are overriding individual block styles that contain links

[ndiego]

Description

Link styles set in Global Styles override the local block styles that contain links. Good examples are the Site Title and Post Title (Title) blocks. See the video for more details.

cc @tellthemachines and @aaronrobertshaw as I know you both have been doing specificity work.

Step-by-step reproduction instructions

1. Open a Playground instance and navigate to the Site Editor
2. Change the size of the Site Title block in the header to XXL
3. Then go into Global Styles and modify the size of links to something other than XXL.
4. Notice that the Site Title is now that size and there is no way to change it. The global link style overrides the styles applied at the block level.

Screenshots, screen recording, code snippet

https://github.com/WordPress/gutenberg/assets/4832319/517e4973-30b9-4cc3-8a13-fe24f4a85491

Environment info

• WordPress 6.5.3
• Gutenberg 18.3.0

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

Yes

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

Yes

[aaronrobertshaw]

Thanks for the ping @ndiego 👍

I can replicate this issue. It appears to be less about specificity and more about the structure of the block and its block supports.

The block support styles and classes are applied to the block's wrapper e.g. has-font-size-*. When the Site Title is made a link its contents are wrapped in an <a> tag.

Global link styles by their nature target any <a> element and so match the inner <a> wrapping the site title block's inner text. In the absence of any other style directly targeting that link, the global style takes precedence over any inherited style.

One option might be to add some additional styles to Site Title's style.scss file. Ones that force the inheritance of the block support styles if present. This can get a little messy and bloated though because the block probably needs styles to ensure the inheritance of all the typography.