When no styles are detected

When styles cannot be detected (from a style provider like global styles / theme.json) no controls are displayed. This eliminates the confusion between undetectable inherited styles (e.g. custom css, browser styles) and empty/unset controls. See #43082 for additional context.

Working globally

Respecting the convention above, panels are empty until a value is set (either in the UI, or via theme.json).

Working locally

When working locally there are three states to consider:

Inherited values

If a value is inherited (e.g. from global styles) the control displays that value, and the label has a purple accent denoting the global context. Hovering/focussing the label reveals the source in a tooltip. The control cannot be removed because if there's no local setting, the inherited value will be used.

Local overrides

If an inherited value is changed then a blue dot is appended to the label. Clicking the dot reveals a menu where the user can reset to the global default, or push the value upstream. Some controls (like background image, see below) may need an additional action to 'unset' the value locally.

Local styles
Styles can be added to a block in the local context that have no inherited value. The manifestation of this in the UI is essentially the same as the "Working globally" case above:

With one caveat: If a global style for this property is later added, the local control would then exhibit the blue dot.

Examples

In addition to the block-spacing example above, here are a couple others that have come up in other issues recently. In each case the edit context is local to a document:

Lightbox

Background image

Breakdown

This doesn't all need to be implemented at once. The work could be broken down into the following steps:

• Local block appearance controls should reflect values from global styles / theme.json #37752
• If local styles override global then indicate that change with a dot which serves as a Reset affordance.
• Highlight where those styles are coming from.
• Implement make default/push to global functionality.

Important note

The purple accents used to indicate inherited styles in the mockups above could be a bit heavy-handed in practise. We should continue to explore other design solutions for this.