Custom property output by spacing sizes is incorrect for slugs containing numbers

[fabiankaegy]

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

1. 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"
        }
      ]

2. Try setting the margin of a block to the "2XL" setting.
3. 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

[fabiankaegy]

Just a note for any theme developers that might be impacted by this:

Manually adding the - to the slug does resolve the issue:

"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": "2-xl",
          "size": "50px",
          "name": "2XL"
        },
        {
          "slug": "3-xl",
          "size": "85px",
          "name": "3XL"
        }
      ]

[fabiankaegy]

@Mamaduka helpfully pointed out in slack, this older issue is somewhat related as it shows the trail of where this handling of adding - after numbers was introduced: https://github.com/WordPress/gutenberg/issues/39155

[ockham]

cc/ @ramonjd b/c Style Engine 😊

[ramonjd]

Thanks for reporting this!

It's a JS fix.

I've added the fix and test coverage over in https://github.com/WordPress/gutenberg/pull/44406

I've also added the Backport to WP Beta/RC label.