Block Editor: Explore naming where each style comes from in the block inspector - #83543

Important note

This is an exploration for #82546, opened as a draft. It follows the feedback on #83453 and #83472 and is not proposed for merge as-is (see Known gaps). Everything is behind the gutenberg-global-styles-inheritance-ui experiment. Take it over, cherry-pick from it, or close it.

Video

What?

See #82546.

Each block support panel in the block inspector (Typography, Color, Background, Dimensions, Border, Filters) gets an info button in its header, just before the options menu. It shows a line under every control in the panel saying where that value comes from:

The Styles trail links to that Styles screen in the Site Editor (same tab), and it is also written out, so the screen can be found without the link. The parent block's name selects that block. Under Advanced → Additional CSS, a line names site CSS that also applies to the block.

The line also shows, and is announced to screen readers, right after a value is reset, to say what the control fell back to. Color controls show the line under the palette in their picker.

The blue reset dots are removed: a value set on the block now reads "Set on this block.", and resets from the panel's options menu or the control's own Reset, as without the experiment.

Why?

The explorations in #83453 (List View) and #83472 (a popover on the block) showed where a style comes from on a separate surface. annezazu and fcoveram both found that disconnected from the controls, and fcoveram asked for the information next to the controls, with a way to act on it.

This version puts the origin under each control, and turns every line into a pointer to act on: change it here for this block, or in the named Styles screen for everything it applies to. The lines stay hidden until asked for, so the panels look the same as today at rest, and once turned on for a panel the info button stays on while moving between blocks, to compare them.

How?

• Origin of each value. useResolvedStyle already resolves the Root, element, block and block style variation layers with resolveStyle, which records the layer that supplies each leaf. The block support hooks now share that result (plus the block, variation and element layers it was resolved against) through InheritanceSourceContext, and each control passes the Global Styles path it edits (inheritancePath).
• Parent blocks. For a property that inherits in CSS (text color, font family, size, weight, style, line height, letter spacing, text transform and alignment), a parent block wins over the site-wide styles but not over styles that target the block itself. When the value would otherwise come from the site-wide level, the line walks up the block's parents to the nearest one that sets it, on the block or through its block type's styles.
• Theme or the site's Styles. The editor now also passes the site's own Styles changes (globalStylesUserDataKey), so a value that is present there reads as "Set in the site's Styles", otherwise "Set by the theme".
• Where to change it. getStylesSection maps the layer and path to a Styles screen (/typography/heading, /blocks/core%2Fheading, /typography/text, …), and getStylesCrumb names it the way its menus read. The editor passes a link builder (styleOriginUrlKey) only for block themes and users who can edit Global Styles; block-editor stays WordPress-agnostic.
• Custom CSS. cssSetsProperty checks the block's Additional CSS, the block type's CSS in Styles, and site-wide custom CSS rules that name the block's class, for the CSS property each path sets.
• The toggle. BlockSupportToolsPanel adds a container to the ToolsPanel header before the options menu, so the reading and tab order match what is shown, and renders the button into it with a portal. It sets is-showing-style-origins on the panel; the lines expand with a grid-row transition (none with reduced motion).
• Accessibility. Each control's focusable elements point at its line with aria-describedby, so screen readers read the origin even while the line is hidden. The button uses aria-pressed. A reset announces the new origin with speak().

Testing Instructions

1. Enable Global Styles inheritance indicators in the block inspector (gutenberg-global-styles-inheritance-ui) under Gutenberg → Experiments.
2. Use Twenty Twenty-Five. In Styles, change something so there is a site customization to see, for example Blocks → Heading → Color, or Typography → Headings → font size.
3. Create a post, switch to the Code editor, and paste:

   <!-- wp:heading -->
   <h2 class="wp-block-heading">A heading that uses the site styles</h2>
   <!-- /wp:heading -->
   
   <!-- wp:paragraph -->
   <p>A paragraph with no styles of its own.</p>
   <!-- /wp:paragraph -->
   
   <!-- wp:paragraph {"fontSize":"x-large"} -->
   <p class="has-x-large-font-size">A paragraph that sets its own size.</p>
   <!-- /wp:paragraph -->
   
   <!-- wp:heading {"className":"is-style-text-display"} -->
   <h2 class="wp-block-heading is-style-text-display">A Display heading</h2>
   <!-- /wp:heading -->
   
   <!-- wp:buttons -->
   <div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"accent-3"} -->
   <div class="wp-block-button"><a class="wp-block-button__link has-accent-3-background-color has-background wp-element-button">Its own color</a></div>
   <!-- /wp:button --></div>
   <!-- /wp:buttons -->
   
   <!-- wp:pullquote -->
   <figure class="wp-block-pullquote"><blockquote><p>A pullquote.</p></blockquote></figure>
   <!-- /wp:pullquote -->
   
   <!-- wp:group {"textColor":"accent-3","layout":{"type":"constrained"}} -->
   <div class="wp-block-group has-accent-3-color has-text-color"><!-- wp:paragraph -->
   <p>A paragraph inside a Group that sets its own text color.</p>
   <!-- /wp:paragraph --></div>
   <!-- /wp:group -->

4. Back in the Visual editor, add a heading and give it Advanced → Additional CSS font-size: 2.5rem !important;.
5. Select the first heading. Check each panel header has an info button before its options menu, and that nothing else changed at rest.
6. Click Typography's info button. Check Color and Font size name the site's Styles and the Styles screen. Follow a link and check it opens that Styles screen.
7. Pick XXL in Font size. Check the line changes to "Set on this block."
8. Select the paragraphs, the Display heading, the heading with Additional CSS and the pullquote in turn. Check Typography's info button stays on, and each line matches the table above.
9. Select the button. In Background, reset Color from the panel's options menu. Check the line shows "Set by the theme…" right away, and that the same line is under the palette when the color picker is open.
10. Select the paragraph inside the Group. Check Typography's Color reads "Inherited from the Group block it is inside, which sets it." and that "Group block" selects the Group. Give the site's Styles a text color for Group blocks, add a plain Group with a paragraph, and check its paragraph names the site's Styles for all Group blocks.

Testing Instructions for Keyboard

1. Tab to a panel's info button and press Enter or Space. Check it reports pressed, and the lines appear.
2. Tab into a control with a screen reader running. Check it reads the origin line as the control's description, including while the lines are hidden.
3. Reset a value from the panel's options menu with the keyboard. Check the new origin is announced.

Known gaps

• Parent blocks are traced from their attributes and their block type's styles. A parent's block style variation, its custom CSS, and element styles are not checked.
• Custom CSS matching is textual. It finds a property in rules that name the block's class, so it misses selectors like h2, and does not compare specificity: hence "may override it".
• Only controls in the panel get a line. Controls added from the options menu (Letter case, Line height, …) get one once shown.
• Not checked in the extensible site editor (v2), in the Global Styles screens, or on mobile.

Implementation notes

• The toggle's place in the panel header. ToolsPanel has no way to add an action to its header, so BlockSupportToolsPanel adds a container to the header's markup and renders the button into it. A header actions prop on ToolsPanel would make this a supported part of the component.
• The controls' description. The controls come from many components, so their focusable elements get aria-describedby from the panel item, kept up to date with a MutationObserver. Each control accepting a description id would be the cleaner path.

Related

• Design proposal: Surfacing inherited styles in the block inspector #82546
• Block Editor: Explore a style inspector in List View #83453 and Block Editor: Explore the style inspector in a popover attached to the block #83472, the List View and popover explorations, and their review.
• Global Styles: explore a cascade popover for inherited-value overrides #80993 and Global Styles: explore the inheritance cascade in the style panels' options menu #81044, earlier explorations.

Use of AI Tools

• AI assistance: Yes
• Tool(s) used: Claude Code (Opus 5.5)
• What AI generated: the code, the tests, the demo post, and this description.
• What was human-reviewed: the direction and every design decision (panel-level info button, no reset dots, the wording of each line, what each line links to) came from iterating on a running editor, and each step was checked there, including the recorded walkthrough. Treat the code as exploratory.

🤖 Generated with Claude Code