Bug: Dimension sliders for Button block are confusing

[sailerbe]

Quick summary

When using the Button block, the button defaults to appearing medium-sized, but the sliders in the Dimension controls start with the sliders set all the way to the left. This implies that all the way left = default dimensions. However, this isn't accurate, and once you start to move these sliders, it can be difficult to get back to the default state (which I've found is actually a little bit past the midway point):

Default button appearance after inserting the Buttons block:

Default position for Dimension sliders:

Button appearance after making a very slight adjustment to top/bottom margins:

I experienced this issue on our own blog at wordpress.com/blog: https://wordpress.com/post/en.blog.wordpress.com/75393

Steps to reproduce

1. Create a new blog post
2. Insert the Buttons block
3. Adjust the Dimensions

What you expected to happen

I expected that the sliders being pushed all the way to the left would mean that adjusting the dimensions would only make the button larger.

What actually happened

The default button dimensions don't reflect where the sliders are set by default, and a small adjustment made the button smaller. It was also difficult to get the button resized to its default dimensions.

Impact

All

Available workarounds?

No but the platform is still usable

If the above answer is "Yes...", outline the workaround.

No response

Platform (Simple and/or Atomic)

No response

Logs or notes

No response

[aaronrobertshaw]

I believe part of the problem here is the expectation that the block inspector sidebar controls reflect the current state in the editor canvas. To date, these controls reflect only customizations made to the selected block instance rather than the result of merging inherited global style values with custom instance values.

There are a couple of Gutenberg issues that cover this problem and the need to improve the experience:

• Design tools: Better handling of unset / inherited values WordPress/gutenberg#43082
• Block styles: reflect inherited global styles values in block appearance controls WordPress/gutenberg#64670 (comment)

The default button dimensions don't reflect where the sliders are set by default, and a small adjustment made the button smaller. It was also difficult to get the button resized to its default dimensions.

This might be better framed the other way around. That is, the dimensions controls for padding etc do not reflect the default or inherited values for the block as shown within the editor canvas.

Also @sailerbe, in case it helps, to reset any adjustments to these controls, click the vertical ellipsis button next to Dimensions and then click padding to reset that control. FWIW there's also discussion around improving the panel component's UX in WordPress/gutenberg#38059 (comment).