Description
Using the new spacingSizes property in theme.json I noticed that the custom property that gets set as an inline style from the style engine are incorrect if the slug contains a number.
My spacing sizes look as follows:
"spacingSizes": [
{
"slug": "s",
"size": "5px",
"name": "S"
},
{
"slug": "m",
"size": "10px",
"name": "M"
},
{
"slug": "l",
"size": "15px",
"name": "L"
},
{
"slug": "xl",
"size": "30px",
"name": "XL"
},
{
"slug": "2xl",
"size": "50px",
"name": "2XL"
},
{
"slug": "3xl",
"size": "85px",
"name": "3XL"
}
]They produce the custom properties:
<style>
--wp--preset--spacing--s: 5px;
--wp--preset--spacing--m: 10px;
--wp--preset--spacing--l: 15px;
--wp--preset--spacing--xl: 30px;
--wp--preset--spacing--2-xl: 50px;
--wp--preset--spacing--3-xl: 85px;
</style>
But the inline styles that get generated in the editor look like this:
<p style="margin-top: var(--wp--preset--spacing--2xl); margin-right: var(--wp--preset--spacing--2xl); margin-bottom: var(--wp--preset--spacing--2xl); margin-left: var(--wp--preset--spacing--2xl);">...</p>
The Inline styles are missing the additional - after any number in the slug
Step-by-step reproduction instructions
- Add this
spacingScale to your theme.json file
"spacingSizes": [
{
"slug": "s",
"size": "5px",
"name": "S"
},
{
"slug": "m",
"size": "10px",
"name": "M"
},
{
"slug": "l",
"size": "15px",
"name": "L"
},
{
"slug": "xl",
"size": "30px",
"name": "XL"
},
{
"slug": "2xl",
"size": "50px",
"name": "2XL"
},
{
"slug": "3xl",
"size": "85px",
"name": "3XL"
}
]
- Try setting the margin of a block to the "2XL" setting.
- See issue.
Screenshots, screen recording, code snippet
Environment info
- WordPress 6.1 Beta 1
- No Gutenberg Plugin
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
Description
Using the new
spacingSizesproperty intheme.jsonI noticed that the custom property that gets set as an inline style from the style engine are incorrect if theslugcontains a number.My spacing sizes look as follows:
They produce the custom properties:
But the inline styles that get generated in the editor look like this:
The Inline styles are missing the additional
-after any number in the slugStep-by-step reproduction instructions
spacingScaleto yourtheme.jsonfileScreenshots, screen recording, code snippet
Environment info
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