Block Inspector: Display inherited Global Styles breadcrumbs via label tooltip#80150
Conversation
…l tooltip Show, on each inspector control that renders a value inherited from Global Styles, a breadcrumb tooltip pointing at the style path the value is inherited from. Components: add an optional `labelTooltip` string prop that wraps the visible label text in the @wordpress/ui Tooltip via a shared LabelWithTooltip helper. It is threaded through the label primitives (BaseControl, BaseControl.VisualLabel, InputControl) and the mid-level components (Unit/Number/Select/Range/ToggleGroupControl, FontSizePicker, BoxControl, CustomSelectControl v1+v2). The tooltip renders one breadcrumb segment per line. Block editor: each Global Styles panel resolves a control's inheritance once through a small getControlInheritance helper that returns both the InheritanceToolsPanelItem props and the breadcrumb labelTooltip, so the 'inherited at rest' gate lives in one place and the item props and tooltip can't drift. The three custom-label controls (color name, background image title, duotone) wrap their own labels with a matching InheritanceLabelTooltip. InheritanceToolsPanelItem no longer touches the tooltip — it only applies the inherited className treatment and the local-override reset dot. No portals, MutationObserver, or cloneElement.
aaronrobertshaw
added
[Type] Enhancement
github-actions
Bot
added
[Package] Components
|
Size Change: +29.2 kB (+0.38%) Total Size: 7.71 MB 📦 View Changed
|
|
Thanks for the demo. This type of thing has been requested before, but there are blockers to making it a proper pattern. The main one being that the information is unavailable on touch devices. In this specific case on My suggestion to consider the |
aaronrobertshaw
changed the title
|
Thanks for the response @mirka 👍 My plan for the controls in the block inspector was to add a visually hidden text element for screen readers to be given the information while satisfying the design. I appreciate the suggestion to re-think the design. I don't believe we have the real estate below every single control in the block inspector to go adding a button there. We could look to achieve similar to the local override reset button that is conditionally added and absolutely positioned for every control. Even that though is a bit of a fudge to work around growing difficulty to work with and update our components to achieve the desired UX. It is somewhat brittle and unintuitive as well. |
|
Also, am I correct in thinking we only have one or two controls (InputControl, SelectControl etc) migrated across to |
|
I'll close this PR for now. It is worth noting that updating our components to support this need was flagged as something the components "should handle".
At this stage, we don't, whether that is new props or the details pattern. I'll update the issue noting that display of where styles come from will be punted from 7.1. |
2 participants
What?
Follow up to #77894.
Adds a way to render an adornment and tooltip around a control's label, so the block inspector can show where an inherited Global Styles value comes from via a breadcrumb path (e.g.
Styles > Mobile > Paragraph > Variation).Why?
#77894 lands the display of inherited Global Styles values but stops short of the "inherited from…" tooltip. There was no supported way to attach an adornment or tooltip to a control label without reaching into the DOM.
This gives
BaseControl,InputControl, andUnitControla proper API for it.How?
Alternative Solutions
An earlier exploration injected the adornment and tooltip into existing control labels via
createPortal. It was always a hack aimed at avoiding updates to the public API of commonly used components. That PR (#79992) has been closed in favour of this approach.Testing Instructions
Screenshots or screencast