Generate classes from preset slugs in the same way (server & client)

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

@@ -668,7 +668,11 @@ private static function compute_preset_classes( $settings, $selector ) {
 			foreach ( $values as $value ) {
 				foreach ( $preset['classes'] as $class ) {
 					$stylesheet .= self::to_ruleset(
-						self::append_to_selector( $selector, '.has-' . $value['slug'] . '-' . $class['class_suffix'] ),
+						// We don't want to use kebabCase here,
+						// see https://github.com/WordPress/gutenberg/issues/32347
+						// However, we need to make sure the generated class
+						// doesn't contain spaces.
+						self::append_to_selector( $selector, '.has-' . preg_replace( '/\s+/', '-', $value['slug'] ) . '-' . $class['class_suffix'] ),
 						array(
 							array(
 								'name'  => $class['property_name'],

packages/block-editor/README.md

@@ -371,7 +371,7 @@ _Parameters_
 
 _Returns_
 
--   `string`: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
+-   `string`: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug and ending with '-font-size'.
 
 <a name="getFontSizeObjectByValue" href="#getFontSizeObjectByValue">#</a> **getFontSizeObjectByValue**
 

packages/block-editor/src/components/colors/test/utils.js

@@ -109,10 +109,10 @@ describe( 'color utils', () => {
 			).toBeUndefined();
 		} );
 
-		it( 'should return a class name with the color slug in kebab case', () => {
-			expect( getColorClassName( 'background', 'Light Purple' ) ).toBe(
-				'has-light-purple-background'
-			);
+		it( 'should return a class name with the color slug without spaces', () => {
+			expect(
+				getColorClassName( 'background', 'Light   Purple veryDark' )
+			).toBe( 'has-Light-Purple-veryDark-background' );
 		} );
 	} );
 } );

packages/block-editor/src/components/colors/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase, map } from 'lodash';
+import { find, map } from 'lodash';
 import tinycolor from 'tinycolor2';
 
 /**
@@ -60,7 +60,14 @@ export function getColorClassName( colorContextName, colorSlug ) {
 		return undefined;
 	}
 
-	return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;
+	// We don't want to use kebabCase from lodash here
+	// see https://github.com/WordPress/gutenberg/issues/32347
+	// However, we need to make sure the generated class
+	// doesn't contain spaces.
+	return `has-${ colorSlug.replace(
+		/\s+/g,
+		'-'
+	) }-${ colorContextName.replace( /\s+/g, '-' ) }`;
 }
 
 /**

packages/block-editor/src/components/font-sizes/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { find } from 'lodash';
 
 /**
  *  Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
@@ -55,12 +55,16 @@ export function getFontSizeObjectByValue( fontSizes, value ) {
  * @param {string} fontSizeSlug    Slug of the fontSize.
  *
  * @return {string} String with the class corresponding to the fontSize passed.
- *                  The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
+ *                  The class is generated by appending 'has-' followed by fontSizeSlug and ending with '-font-size'.
  */
 export function getFontSizeClass( fontSizeSlug ) {
 	if ( ! fontSizeSlug ) {
 		return;
 	}
 
-	return `has-${ kebabCase( fontSizeSlug ) }-font-size`;
+	// We don't want to use kebabCase from lodash here
+	// see https://github.com/WordPress/gutenberg/issues/32347
+	// However, we need to make sure the generated class
+	// doesn't contain spaces.
+	return `has-${ fontSizeSlug.replace( /\s+/g, '-' ) }-font-size`;
 }

packages/edit-site/src/components/editor/global-styles-renderer.js

@@ -83,7 +83,14 @@ function getPresetsClasses( blockSelector, blockPresets = {} ) {
 				classes.forEach( ( { classSuffix, propertyName } ) => {
 					const slug = preset.slug;
 					const value = preset[ valueKey ];
-					const classSelectorToUse = `.has-${ slug }-${ classSuffix }`;
+					// We don't want to use kebabCase from lodash here
+					// see https://github.com/WordPress/gutenberg/issues/32347
+					// However, we need to make sure the generated class
+					// doesn't contain spaces.
+					const classSelectorToUse = `.has-${ slug.replace(
+						/\s+/g,
+						'-'
+					) }-${ classSuffix }`;
 					const selectorToUse = `${ blockSelector }${ classSelectorToUse }`;
 					declarations += `${ selectorToUse }{${ propertyName }: ${ value } !important;}`;
 				} );