Add spacing presets support to style engine

[glendaviesnz]

What?

Adds handling of conversion of spacing preset values to css vars to style engine

Why?

#41527 adds the spacing presets to theme.json, as the first part of implementing standardised design tokens for spacing as detailed in #39371

How?

Extends the existing preset var handling added for the processing of color presets.

Testing Instructions

• Add the following block markup in the edit code view and save and view in the frontend:

<!-- wp:site-title {"style":{"spacing":{"padding":{"top":"var:preset|spacing|70","right":"var:preset|spacing|50","bottom":"var:preset|spacing|70","left":"var:preset|spacing|50"}},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"vivid-red"} /-->

• Check in the frontend that the block markup has converted the var:preset|space|20 values into var(--wp--preset--spacing--20); in the block styles
• Check that the style engine unit tests run npm run test-unit-php /var/www/html/wp-content/plugins/gutenberg/packages/style-engine/phpunit/class-wp-style-engine-test.php

N.B. The frontend styles markup in this PR is not an indication of the final marking for spacing presets. The final implementation may use utility classes as noted in #39371, but the fact that we are generating these styles dynamically on the frontend means we can modify the output relatively easily as we go.

Screenshots or screencast

[andrewserong]

The PHP implementation is working nicely for me @glendaviesnz, but it looks like the JS implementation needs updating for the individual sides. At first glance, it might only be a couple of lines of code that needs to be changed?

In my local dev environment, I updated this line:

gutenberg/packages/style-engine/src/styles/utils.ts

Line 84 in d265f30

const value: string | undefined = get( boxStyle, [ side ] );

to be the following:

				const value: string | undefined = getCSSVarFromStyleValue(
					get( boxStyle, [ side ] )
				);

And that seemed to do the trick. It might need a test or two added for the JS side of things 🙂

Editor view before (no padding is applied)	Editor view after (padding is applied)

Of course, you can always leave implementing the JS-side to a follow-up PR instead if you'd prefer to keep this one just focused on the PHP implementation for now. What do you think?

[glendaviesnz]

but it looks like the JS implementation needs updating for the individual sides.

Thanks, I was just focusing on the frontend for this PR, thinking the editor side would be more complicated, but your suggested change works and is simple so have included it.

[andrewserong]

suggested change works and is simple so have included it

Thanks Glen! This change is testing nicely, and I double-checked that the border color CSS variable output still works correctly too:

LGTM! ✨