Dimension control: Spacing sizes should be displayed as slider instead of dropdown

[hanneslsm]

What problem does this address?

Gutenberg 16 introduces the new dimension controls, which in theory are good.

However, what was a slider has changed to a dropdown.
For my theme I have defined purposely defined 8 spacing sizes, because in 15.9 this was the magic number to still have a slider, instead of the dropdown. Slides are much better and a faster way to select spacing sizes. 16.0 seem to have changed this number to 7, which I disapprove.

GB 15.9 - Sliders:

GB 16.0 Dropdowns:

Ironically, the heading block still uses sliders in 16.0 - which proves that having enough space for a slider is not an issue:

What is your proposed solution?

There is no value in changing the default number from spacing size from 7 to 8. So, please change it back :)

[aaronrobertshaw]

Thank you for taking the time to create this issue @hanneslsm 👍

To my knowledge, there haven't been any changes as to when the spacing control displays as a select dropdown vs the segmented range control.

The magic number was 8 sizes if you included the 0 size that gets added by default, otherwise the magic number really was 7 custom sizing preset values.

The original PR that added the spacing sizes control also indicates this with its testing instructions to check that setting the spacingScale.steps value to > 7 results in the select list.

In core or theme theme.json increase settings.spacing.spacingScale.steps to a value > 7 and check that segmented range is replaced with a select list

In that PR's code changes you can see where the complete spacing sizes list is collected (including the zero value option) and where the check for displaying the range control or not occurs.

After the recent revamp of that spacing control in 16.0, you can find that same collection of size options and check to display the range control here in the latest code on trunk.

Testing 16.0 works as advertised for me. It displays 7 custom spacing presets as the range control and adding an extra one triggers the custom select list.

Given the point at which this spacing control switches from a range control to a select list hasn't changed, I think we should close this issue. If you face any further problems, it would be great if you could submit another issue along with your theme.json config for spacing.

Thank you again for the detailed issue! 🙇

[hanneslsm]

@aaronrobertshaw Wow, this is what I call an answer!
I'll dig into the code, the links you provided are very helpful. Thank you so much!