Global Styles: Custom Color names with numbers at the end are not reflected

[miminari]

Description

When you add the custom colors, that name has a number at the end on Global Styles. You can add the color, select the site's colors, and save. But the color doesn't reflect the site.

The auto-generated CSS variable name for the colors and the CSS variable name that is assigned to an element seems different. It is caused by the presence or absence of hyphens.

related: #53695

Step-by-step reproduction instructions

1. Go to "Editor"
2. Go to "Styles"
3. Click "Colors"
4. Go to "PALETTE"
5. Add a custom color named like "name1"
6. Back to "Styles"
7. Set the new custom color to the Background color
8. Click "Save"

Screenshots, screen recording, code snippet

Kapture.2023-10-25.at.09.41.35.mp4

Environment info

It reproduces whether Gutenberg is enabled or not.

WordPress: 6.4 RC2
Browser: Chrome 117.0.5938.149
OS: Mac OS 12.5.1

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

[ryoraspp]

The same thing happened to me.
I had the same problem.

[mt8]

I tested this issue by attending a "Contribution to Gutenberg" event in Japan.
https://www.meetup.com/ja-JP/learn-wordpress-online-workshops/events/296653581/

This problem reproduces in my environment and I suspect the function: _wp_to_kebab_case() for this behavior.

$ wp eval 'echo _wp_to_kebab_case("name1");'
name-1

$ wp eval 'echo _wp_to_kebab_case("name-1");'
name-1

[mt8]

Additional information.

When creating a custom color, The value is saved in the post_type = wp_global_styles by sending a request to API: /wp/v2/global-styles/{no}

At that time, the following payload is sent (excerpt):

                "custom": [
                    {
                        "color": "#918f14",
                        "name": "name1",
                        "slug": "custom-name1"
                    }
                ]

In other words, the "slug" value before applying the kebab case is stored in the database.

This may be solved by applying the kebab case when outputting this "slug" value on the editing screen.

[t-hamano]

I was looking into this issue, and I think the fundamental problem is that the kebabCase logic is not unified.

In the Global Styles, when you rename a custom color palette, the slug is generated here:

gutenberg/packages/components/src/palette-edit/index.tsx

Line 233 in 16eb009

kebabCase( nextName ?? '' ),

This kebabCase() function is the paramCase() function of the change-case package. This function does not consider numbers, so for example, if you define a palette name MyColor1, the slug will be my-color1.

Then, when you apply this color to the site background and save the entity, the following content will be saved in the database:

{
	"styles": {
		"color": {
			"background": "var:preset|color|custom-my-color1"
		}
	},
	"settings": {
		"color": {
			"palette": {
				"custom": [
					{
						"color": "#000",
						"name": "MyColor1",
						"slug": "custom-my-color1"
					}
				]
			}
		}
	},
	"isGlobalStylesUserThemeJSON": true,
	"version": 2
}

Based on this styles property data, the following styles are generated to the body element on the front end:

body {
	background-color: var(--wp--preset--color--custom-my-color1);
}

The CSS variable that is the source of this value is generated based on the data in the settings property, and is processed by the _wp_to_kebab_case() function in the following location:

gutenberg/lib/class-wp-theme-json-gutenberg.php

Line 1815 in 16eb009

$slug = _wp_to_kebab_case( $preset['slug'] );

Since the _wp_to_kebab_case() function considers numbers, the generated slug will be custom-my-color-1 and the following CSS variables will be output.

body {
    --wp--preset--color--custom-my-color-1: #000;
}

The style is not applied because the generated CSS variable name and the CSS variable name that is actually applied as the value do not match.

I think the rules for kebabCase probably need to be unified, but I'll look into it a little more.