Description

Likely as a result of #61842, my custom spacing sizes are no longer working. My Powder theme (https://github.com/bgardner/powder/blob/main/theme.json#L146) uses t-shirt sizing method, per below (note my theme.json is currently "version": 2

"spacing": {
	"spacingSizes": [
		{
			"name": "xSmall",
			"size": "clamp(10px, 2vw, 20px)",
			"slug": "x-small"
		},
		{
			"name": "Small",
			"size": "clamp(30px, 4vw, 40px)",
			"slug": "small"
		},
		{
			"name": "Medium",
			"size": "clamp(40px, 6vw, 60px)",
			"slug": "medium"
		},
		{
			"name": "Large",
			"size": "clamp(50px, 8vw, 80px)",
			"slug": "large"
		},
		{
			"name": "xLarge",
			"size": "clamp(60px, 10vw, 100px)",
			"slug": "x-large"
		}
	],
	"units": [ "%", "px", "em", "rem", "vh", "vw" ]
}

With Gutenberg 18.5 RC1 active, numbers are now being used in areas such as padding, and the mapping is out of order:

1 = var(--wp--preset--spacing--large)
2 = var(--wp--preset--spacing--medium)
3 = var(--wp--preset--spacing--small)
4 = var(--wp--preset--spacing--x-large)
5= var(--wp--preset--spacing--x-small)

It appears my t-shirt sizing presets are being reordered by alpha in this scale. Expected behavior/output should be:

xSmall= var(--wp--preset--spacing--x-small)
Small = var(--wp--preset--spacing--small)
Medium = var(--wp--preset--spacing--medium)
Large = var(--wp--preset--spacing--large)
xLarge = var(--wp--preset--spacing--x-large)

Step-by-step reproduction instructions

1. Find a group and try applying padding.
2. Notice that the spacing scale is off.

Screenshots, screen recording, code snippet

Below is a before/after video of me applying padding to a group block. First instance is with WP 6.5.3 (Gutenberg not active) and the second instance is with WP 6.5.3 (Gutenberg 18.5 RC1 active)

Environment info

WordPress 6.5.3, Gutenberg 18.5 RC1

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