Custom spacing sizes do not work properly after latest update

[chvillanuevap]

Description

I have custom spacing sizes in my theme.json:

{
    "settings": {
        "spacing": {
            "spacingSizes": [
                {
                    "name": "6",
                    "slug": "60",
                    "size": "2rem"
                },
                ...
            ]
        }
    }
}

When I add these custom spacing sizes to a group in the block editor, the frontend displays them as:

<div class="wp-block-group alignwide bricksy-travel-two-column-text has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:2rem;padding-right:var(--wp--preset--spacing--60);padding-bottom:2rem;padding-left:var(--wp--preset--spacing--60)">

For the top and bottom, it converts them to their actual units, while it keeps the variables from the right and left properties. The order here is dependent on which size I set first in the editor. Sometimes I get the actual units for the left and right. This is a new behavior that I noticed after updating the plugin.

Step-by-step reproduction instructions

1. Update to latest version of Gutenberg.
2. Add custom spacing sizes to theme.json.
3. Add group block in block editor and add padding using custom spacing sizes.
4. See the display on the frontend.

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.2.2
• Gutenberg 16.0.0

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

[ndiego]

Thanks for reporting @chvillanuevap, I am able to confirm. This might be related to #51619. I am going to add this to the 6.3 Project Board so it is properly assessed before the WordPress 6.3 release.

[chvillanuevap]

This remains broken in Gutenberg 16.5 and also in WordPress core (version 6.3, no Gutenberg) Now the drop-down menu for custom padding/margin levels won't let me select a different value. Same steps as above to reproduce.

[chvillanuevap]

Could it be because of repeated values in the custom sizes? I have:

{
	"name": "4.00rem (64px)",
	"slug": "400rem",
	"size": "4rem"
}, 
...

{
	"name": "9",
	"slug": "90",
	"size": "4rem"
}

Different slugs but same size. I do this for legacy reasons to not have to replace a bunch of CSS variables all over the place.