[Site Editor] Spacing values declared as variable have no effect in the site editor.

[Gierand]

Description

When we add variable values to the spacing in the theme.json file, no change occurs.

Step-by-step reproduction instructions

Try changing the settings in theme.json using the following code snippet example.
The problem is not only with the buttons, but also with the rest of the blocks.

Screenshots, screen recording, code snippet

"elements": {
	"button": {
		"spacing": {
			"padding": {
				"top": "var:preset|spacing|100", //  It doesn't work
				"right": "0", // It works
				"bottom": "var(--wp--preset--spacing--100)", // It doesn't work
				"left": "2rem" // It works => var(--wp--custom--spacing--*) too
		}
	}
}

Frontend:

Site Editor:

Environment info

WordPress version: 6.0.1 and 6.1-alpha-53848
Gutenberg version: 13.9.20220805
Theme: TT2

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

[ramonjd]

I think this commit in #42173 might address the issue.

cc @glendaviesnz

[glendaviesnz]

I think this commit in #42173 might address the issue.

Yes, @Gierand, the above PR should resolve this issue, and also adds the UI for selecting the spacing presets for padding in the block and site editor. Something else to note about the changes in that PR is that the spacing scale provided by core will be reduced from 10 to 7 levels which gives 3 sizes each side of medium (2XS, XS, S, M, L, XL, 2XL), so the var:preset|spacing|100 value won't be generated by default once this is merged, but you will be able to modify your theme.json to still generate these extra values if you need them.

[Gierand]

@glendaviesnz, thank you for the clarification. However, I have a question. Will .has-10-spacing , .has-*-spacing classes be generated as with other presets?

[glendaviesnz]

I have a question. Will .has-10-spacing , .has-*-spacing classes be generated as with other presets

That would be the ideal, and there is a task listed in the tracking issue to follow up on this. To do this we just need to make sure that we can conditionally load these class definitions based on the block content of the current page as loading all of them would add a lot of additional CSS to every page as classes and property definitions are needed for every side for every step in the scale, eg. .has-10-spacing-all .has-10-spacing-top has-10-spacing-bottom .has-10-spacing-left .has-10-spacing-right

[Gierand]

There seems to be a problem with custom spacing presets (dragging not working).

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

[richtabor]

I've confirmed that this is resolved by #42173 (spacing values are generated in the site editor).

I've also found the same issue as @Gierand's latest comment — wrote up an issue: #43234

[glendaviesnz]

Closing this as the outstanding bug has been moved to a separate issue.