Class Name with editor-font-sizes not working

[leadclown]

when i use names like h1 or h2 as slug for add_theme_support(editor-font-sizes) i get the class name has-h-1-font-size in frontend not like expected has-h1-font-size.

h-1 as slug works fine and i get has-h-1-font-size but its ugly.

so i think the first one is much better for naming but bugged.

[paaljoachim]

Testing with WordPress 5.7.
Gutenberg plugin 10.1.1
Twenty Twenty One.

I added into the functions file in the add_theme_support array section:

array(
					'name'      => esc_html__( 'H1', 'twentytwentyone' ),
					'shortName' => esc_html_x( 'H1', 'Font size', 		'twentytwentyone' ),
					'size'      => 16,
					'slug'      => 'h1', //slug name
				),

Frontend showed:

[gwwar]

It looks like we also allow upper and lowercase slug values that will collide with one another on the frontend class:

h1 -> has-h-1-font-size , H1 -> has-h-1-font-size

In general it looks like we break on a numerical value: foo1bar -> has-foo-1-bar.

If folks do take this one on, let's be careful to not break existing classnames for folks who might be depending on this.

[oandregal]

Thanks for the report @leadclown 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