Theme.json spacingSizes do not work with the new padding presets UI

[richtabor]

Description

Originally reported in a comment on this issue, using spacingSizes within a theme.json file makes the new padding preset UI (recently merged #42173) not function properly.

The changes are applied, but the UI does not track the change.

Step-by-step reproduction instructions

Add spacing.spacingSizes to a theme.json file, as such:

"spacing": {
		"spacingSizes": [
			{
				"name": "50",
				"slug": "50",
				"size": "2rem"
			},
			{
				"name": "XL",
				"slug": "60",
				"size": "4rem"
			},
			{
				"name": "2XL",
				"slug": "70",
				"size": "clamp(2rem, 10vw, 20rem)"
			}
		]
}

See the stepped control not changing when dragging it.

Screenshots, screen recording, code snippet

Environment info

WP 6.0.1
Gutenberg dev

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

[spencerfinnell]

I believe I ran in to a similar issue with the slug being defined as a string (which is what the schema says is correct), but working correctly when the slug is a number. Maybe a strict comparison somewhere?

[richtabor]

I believe I ran in to a similar issue with the slug being defined as a string (which is what the schema says is correct), but working correctly when the slug is a number. Maybe a strict comparison somewhere?

Yup, that was it. Using a string doesn't work.

[glendaviesnz]

Thanks @richtabor and @spencerfinnell - I have a PR here to rectify this.

I will be putting up a dev note and additional documentation in the next few days ahead of the next GB release that will include this UI. This will outline the fact that ideally, the slugs should be in the format 10,20,30,40,50 ... with 50 representing the medium value, with the idea that we can more easily fallback to the nearest match of a spacing preset if a theme doesn't include one that is contained in copied block content ... but we can parse to ints at the point of needing to do that so have stuck with the more standard format of slugs being strings at other points in the code.