Typography: Fix link font-size inheritance when block typography is customized#77458
Typography: Fix link font-size inheritance when block typography is customized#77458dpmehta wants to merge 1 commit intoWordPress:trunkfrom
Conversation
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
What?
Closes #64976
This PR resolves an issue where custom typography font sizes applied to a block (via Inspector Controls) are ignored by the block's inner links if a global link font size has been defined in the Site Editor.
Why?
When a site-wide link font size is defined in Global Styles (Editor > Styles > Typography > Elements > Links), WordPress outputs an explicit styling rule:
a:where(:not(.wp-element-button)) { font-size: ... }which carries a specificity of0-0-1.When a custom typography size is applied to a block, Gutenberg targets the block's wrapper (e.g., via a
.has-large-font-sizeclass or an inlinestyle="..."attribute). Because the inner<a>element has a dedicated CSS rule targeting it via Global Styles, it fails to inherit the font size from its parent wrapper, creating visual inconsistencies where links don't match the surrounding block text.How?
packages/block-library/src/common.scss): Added a targeted:where()selector to capture wrappers containing custom typography features (.has-custom-font-size,[class*="-font-size"], and[style*="font-size"]). This rule forces inner anchor tags tofont-size: inherit;. Wrapping it inhtml :where(...)provides exactly0-0-2specificity—strong enough to override the global0-0-1link rule, but weak enough to not disrupt any utility classes applied directly to the anchor elements themselves.Testing Instructions
Screenshots or screencast
Before Fix
before-fix.mov
After Fix
after-fix.mov
Use of AI Tools
AI was used to investigate the exact CSS specificity clash causing the inheritance breakdown and draft this PR description.