Add spacing presets support to style engine#41990
Add spacing presets support to style engine#41990glendaviesnz merged 2 commits intoadd/spacing-sizes-part-1from
Conversation
3f5fd5b to
1a04521
Compare
1a04521 to
f473509
Compare
andrewserong
left a comment
There was a problem hiding this comment.
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:
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?
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
left a comment
There was a problem hiding this comment.
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! ✨
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
var:preset|space|20values intovar(--wp--preset--spacing--20);in the block stylesnpm run test-unit-php /var/www/html/wp-content/plugins/gutenberg/packages/style-engine/phpunit/class-wp-style-engine-test.phpN.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