Spacing step controls do not aways displaying accurate information with custom steps

[ndiego]

Description

The new spacing step controls do not always display accurately when configuring unlinked spacing.

After some thorough testing, this appears to happen when custom spacing steps are created. Using the following should reliably allow you to replicate the issue.

"spacing": {
	"spacingScale": {
		"steps": 0
	},
	"spacingSizes": [
		{
			"name": "XS",
			"size": "0.5rem",
			"slug": "x-small"
		},
		{
			"name": "Small",
			"size": "1rem",
			"slug": "small"
		},
		{
			"name": "Medium",
			"size": "1.5rem",
			"slug": "medium"
		},
		{
			"name": "Large",
			"size": "clamp(1.5rem, 1.364vw + 1.159rem, 2.25rem)",
			"slug": "large"
		},
		{
			"name": "XL",
			"size": "clamp(2.25rem, 1.364vw + 1.909rem, 3rem)",
			"slug": "x-large"
		},
		{
			"name": "2XL",
			"size": "clamp(3rem, 3.603vw + 2.091rem, 5rem)",
			"slug": "xx-large"
		},
		{
			"name": "3XL",
			"size": "clamp(5rem, 3.636vw + 4.091rem, 7rem)",
			"slug": "xxx-large"
		}
	],

Step-by-step reproduction instructions

1. This occurs on any block, but test using a Paragraph block
2. Add unlinked padding or margin, i.e. a separate value for each side.
3. Click off of the block
4. Click back into the block and notice that the spacing controls are collapsed and appear to be linked.
5. The correct values are still applied to the block, but the UI is not correct.

See the screenshot below for more information.

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.0+
• Gutenbger trunk

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

[ndiego]

@glendaviesnz and @jasmussen sorry for the ping, but I know you both have worked on the spacing steps. 🙏

My guess is the issue has something to do with the custom slugs used in my spacing example. The Twenty Twenty-Three theme is just using the 30, 40, 50, etc. slugs, but it appears that you should be able to specify anything in a custom theme.

[glendaviesnz]

Thanks @ndiego, I have a fix for this here.

One thing to be aware of is that if you don't use the 10,20,30 slug format you won't be able to take advantage of the cross theme fallbacks that we will be hopefully adding post 6.1, ie. if templates or patterns that contain spacing presets are copied between themes, and a theme does not have a matching value it will fall back to the closest match in that theme, which is easy to do if the slugs are numeric.

[ndiego]

Thanks @glendaviesnz, just tested and approved. There definitely is a drawback to custom slugs when it comes to theme switching, but the ability to customize slugs is fantastic, especially for those theme developers building their own "design system" for managing sizes.

[glendaviesnz]

but the ability to customize slugs is fantastic, especially for those theme developers building their own "design system" for managing sizes

Yeh, we thought it was important to provide the flexibility here, so glad that is proving useful.

[jasmussen]

Thanks for tickets and quick fixes!

It's worth noting that the "XL, 2-XL" etc names should be retired in favor of 1x, 2x, 3x, 4x, etc, as outlined in #43412. It seems like the sooner we do this, the sooner we can set expectations of the control.

[glendaviesnz]

It's worth noting that the "XL, 2-XL" etc names should be retired in favor of 1x, 2x, 3x, 4x, etc, as outlined in #43412. It seems like the sooner we do this, the sooner we can set expectations of the control.

Jay is correct in his comment here that this doesn't really work with the way the default spacing scales are structured. They currently use a perfect fifth multiplier so can't really be equated to a 1x, 2x label, ie. each step is 1.5x the previous step so showing those as labels is probably just going to confuse users, and themes/users can switch between a multiplier or an incrementer and any sort of ratio, perfect 4th, golden rule, etc. ... certainly something that can be looked at for sure, but just noting it would need a lot more discussion to come up with something that is in fact really better than t-shirt sizes, so we probably don't want to rush it and end up replicating the issues we had with the font size toggle, which has now gone back to t-shirt sizes to avoid confusion 😄

[mtias]

The 1x, 2x, 3x is not about their multiplying factor but about their sequential nature. If you check a tool like modularscale.com, these would coordinate with the text_m1, text_m2, text_m3 classes. In that sense, I agree the x would be misleading. For spacing, where we have a lot more granularity, it's irrelevant to say if it corresponds to a label of 2-XL, and it's much more important to indicate what relational position a given choice occupies. We essentially want to represent the numbered position in the scale.

Given that, I think something like Space 1, Space 2, etc, can make sense, or shortened to S1, S2, S3. A user should be using the mental model of: 3 painted segments == S3, so they can transfer their intention easily between blocks and areas of a site in the most straightforward manner. The scale factor doesn't need to be exposed when using the tool in blocks, though it should be exposed in GS as a modular scale setting.

[glendaviesnz]

Thanks @mtias, removing the x helps clarify the thinking around this for me. Currently the 2-XL style labels are simply UX labels and they aren't saved to the preset vars/block content. They are generated at runtime when the scale is created, so relatively easy to switch out at any point.

[mtias]

Indeed, so it should be straightforward to address and it's more a matter of what seems the most clear.