Inability to distinguish between default and none margin/padding values

[luisherranz]

Description

In the Editor, it is not possible to visually differentiate between a margin or padding value that is set to the default and one that is explicitly set to "none" (0). Additionally, the UI does not clearly indicate that clicking the blue circle next to a margin/padding value will set it to "none." This lack of clarity can lead to confusion and make it difficult to manage spacing effectively.

Step-by-step reproduction instructions

1. Select a block that has margin or padding settings (e.g., Group, Columns).
2. Observe the margin/padding values in the Dimensions panel.
3. Note that there is no visual distinction between a default value and a value explicitly set to "none."
4. Click the blue circle next to a margin/padding value.
5. Observe that the value is reset to "none," but there was no prior indication that this would happen.

Screenshots, screen recording, code snippet

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[ramonjd]

Thanks for the issue.

This represents a smaller part of a wider issue:

• Block styles: reflect inherited global styles values in block appearance controls #64670

Since #65071, global styles changed from being only able to be read by admins, to any users that can edit posts. Which is a long way of saying that global styles are now available in the post editor context.

This means that "default" values, by which I think you mean values inherited from the theme or global styles, can be referenced and even set in the control.

An example of this working is the background image control. Other controls, such as spacing, haven't had the same treatment.

It think it needs some UX and design thoughts, but the low-fi approach would be to set the control values with the default if any are found. Easy to say that 😄 but it might work for things like spacing.

[luisherranz]

"default" values, by which I think you mean values inherited from the theme or global styles

Yes, I do.

can be referenced and even set in the control

But no, I don't mean that the values of Global Styles can be changed in the invididual block settings if that's what you mean.

Let me describe a specific example that will be simpler.

1. The user finds that there is a margin in one of their blocks.
2. The user wants to remove that margin and looks at the UI. This is what they see:

3. There is no indication that there is a default margin.
4. At the moment the user clicks on the blue circle, the block changes from inheriting the default margin to having a set margin, in this case, to zero ("none"). This is what they see:

5. There is no difference from the previous state, and therefore, it is also not possible to differentiate between a block that inherits the margin and one that has it set to zero.

In my opinion, this is confusing.

[ramonjd]

Thanks for the follow up comments @luisherranz

But no, I don't mean that the values of Global Styles can be changed in the invididual block settings if that's what you mean.

Sorry, I meant, for block styles:

1. Where a block-level value has not be set in the controls, and
2. there's a global styles (default) value, then
3. set the "default" a.k.a global styles value as the control value.

Any changes to the control's value would only affect the block. And "resetting" the control would "reset" to the default global styles value. If there's none, then to null/zero/whatever.

Background image controls already do this, I'm pretty sure.

I think we're on the same page 😄 and I agree - I hope one day #64670 will get some momentum.

[luisherranz]

Perfect, thanks, @ramonjd 🙂

[hanneslsm]

Noting that @krokodok added in #69082 some design proposals of how the SpacingSizesControl when no value is set.