Global Styles: Resolve a block's inherited font family on the Blocks screen

[zakariabinsaifullah]

What?

Closes #83459

On Styles → Blocks → , the Typography panel now resolves the font family a block inherits from the root or element styles, so the Appearance control offers only the weights and styles that font provides.

Why?

The Blocks screen passed the block's own merged style to the Typography panel as inheritedValue. That style only holds a font family the block sets itself. When the block inherits its family (the common case: a theme sets one root font), no family resolves, the Font control shows "Default", and Appearance falls back to the built-in list of ten weights and their italics. Choosing one of them saves a weight the font does not have.

The block inspector already resolves the inherited family (#77894), so the two surfaces disagreed about the same block. This brings the Blocks screen in line with the contract from #49090 / #61915: offer the weights and styles the font actually has.

How?

• global-styles-ui screen-block.tsx: a new getInheritedTypographyStyle helper resolves the inherited font family with resolveStyle from @wordpress/global-styles-engine, the same engine the block inspector uses. It folds in the root styles, the element layers the block renders as (for example heading for Heading, button for Button), the block's own styles, the active block style variation, and the selected viewport or pseudo state. Only the Typography panel receives it; the other panels are unchanged.
• block-editor: the existing getElementLayers mapping is exposed as a private API, so the inspector and the Blocks screen share one block-to-element mapping instead of a copy. No behavior change.
• Both site editors render this ScreenBlock, so the fix applies to the extensible site editor (v2) as well.

Testing Instructions

1. Activate Twenty Twenty-Five. Its root font is Manrope, whose face covers weights 200 800. Paragraph sets no font of its own.
2. Go to Appearance → Editor → Styles → Typography → Text and open Appearance. Note the options: Extra Light to Extra Bold.
3. Go to Styles → Blocks → Paragraph.
4. Before: Font shows "Default" and Appearance offers Thin through Extra Black. After: Font shows Manrope and Appearance offers the same options as step 2.
5. Go to Styles → Blocks → Code, which sets Fira Code (300 700) itself. Font shows Fira Code and Appearance offers Light to Bold, as before.
6. Confirm the editor reports no unsaved changes: showing the inherited family does not write a value.

Testing Instructions for Keyboard

1. On Styles → Blocks → Paragraph, Tab to the Appearance control and press Enter or Space to open it.
2. Use the arrow keys to move through the options: only Extra Light to Extra Bold (and their italics) are listed. Press Escape to close it.

Screenshots or screencast

Before	After
Paragraph: Font "Default"; Appearance lists Thin … Extra Black	Paragraph: Font "Manrope"; Appearance lists Extra Light … Extra Bold, matching Typography → Text

Not in scope: italic options still appear for Manrope, which has no italic face. That also happens on the Typography → Text screen, so it is existing behavior separate from this issue.

Use of AI Tools

This PR was written with Claude Code (Claude Opus 5.5): it helped trace the cause, write the fix and the unit tests, and draft this description. I reproduced the bug and verified the fix in a local WordPress 7.1.2 site, and reviewed the code. npm run lint:js, npm run typecheck, and the global-styles-ui, global-styles-engine and block-editor global-styles unit tests pass.

🤖 Generated with Claude Code

[github-actions]

🤖 PR meta 🤖

👋 Welcome

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @zakariabinsaifullah! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

🎉 Props

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: zakariabinsaifullah <binsaifullah@git.wordpress.org>
Co-authored-by: Jiwoon-Kim <kimjiwoon@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

🏷️ Labels

This pull request needs exactly one label indicating its type, and has 0.

• Required: any label starting with [Type].
• Found: none.

Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you.