Theme editor font-size with number creates mismatch between font-size slug and block class

[justintadlock]

When registering a custom font-size that begins with a number in theme.json, the CSS output doesn't match the class name. I tested this with a slug of 2xl.

The CSS that Gutenberg outputs is:

:root { --wp--preset--font-size--2xl: 30px; }

.has-2xl-font-size { font-size: 30px !important; }

However, when applying it to a block via the Font Size control under the Typography tab, it adds a hyphen between the 2 and xl. The block CSS class becomes has-font-size-2-xl like so:

<h1 class="has-2-xl-font-size">Hello, World!</h1>

theme.json code:

{
	"settings": {
		"defaults": {
			"typography": {
				"fontSizes": [
					{
						"slug" : "2xl",
						"name" : "2 XL",
						"size" : "30px"
					}
                                ]
                        }
                }
        }
}

[skorasaurus]

related #26940

[annezazu]

@ntsekouras might you be able to share some context here?

[ntsekouras]

--cc @nosolosw @jorgefilipecosta

[oandregal]

Thanks for the report @justintadlock Going to consolidate this into #32347 as the issue is a bit larger than numbers (also affects camelCased slugs).

[oandregal]

There's a fix at #32352

[justintadlock]

Just confirming that #32352 fixed this.

[justintadlock]

Formally noting that this issue is no longer fixed as of #32742 and #32766. The first ticket reverted the fix. The second ticket changed this in a way that does not respect valid, theme-defined slugs.

I have further proposed a compromise that would allow theme authors to address this in their themes: #32347 (comment)

[skorasaurus]

issue for include this in documentation #19285

[skorasaurus]

@justintadlock can you confirm this has been fixed in the current version of Gutenberg; should have been fixed in #35751 ?

[skorasaurus]

I'm no longer able to reproduce this as you instructed; the CSS outputs are all now 2-xl.
please reopen if you're still experiencing this.

[coreyworrell]

Noticing issue mentioned here: #34509. I have 16x9 that is converted to wp--custom--aspect--16-x-9, which causes issues because we're reading from theme.json in PHP for autosuggest for class names as well as variables in Stylus. For PHP I can run the key name through _wp_to_kebab_case I suppose, but there is obviously no equivalent in Stylus/SCSS/etc. Not sure if there is any good solution though.

[justintadlock]

The only way I have found to handle this across the board is to name them in theme.json as WP would output them. So, instead of using 16x9 in theme.json, literally type out 16-x-9.

This will make sure it's consistent everywhere.

[coreyworrell]

@justintadlock yeah, that makes sense. But right now we use them for utility classes, like aspect:16x9, and it just isn't quite as nice to be forced to use aspect:16-x-9. But it kind of is an edge case I suppose.