Revert fix/slug-to-classname (#32742)

Co-authored-by: Bernie Reiter <[email protected]>

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 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 in kebabCase and ending with '-font-size'.
 
 <a name="getFontSizeObjectByValue" href="#getFontSizeObjectByValue">#</a> **getFontSizeObjectByValue**
 

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

@@ -109,10 +109,22 @@ describe( 'color utils', () => {
 			).toBeUndefined();
 		} );
 
-		it( 'should return a class name with the color slug without spaces', () => {
+		it( 'should return a class name with the color slug in kebab case', () => {
 			expect(
 				getColorClassName( 'background', 'Light   Purple veryDark' )
-			).toBe( 'has-Light-Purple-veryDark-background' );
+			).toBe( 'has-light-purple-very-dark-background' );
+		} );
+
+		it( 'should return the correct class name if the color slug is not a string', () => {
+			expect( getColorClassName( 'background', 123456 ) ).toBe(
+				'has-123456-background'
+			);
+		} );
+
+		it( 'should return the correct class name if the color slug contains special characters', () => {
+			expect( getColorClassName( 'background', '#abcdef' ) ).toBe(
+				'has-abcdef-background'
+			);
 		} );
 	} );
 } );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, map } from 'lodash';
+import { find, kebabCase, map } from 'lodash';
 import tinycolor from 'tinycolor2';
 
 /**
@@ -60,14 +60,7 @@ export function getColorClassName( colorContextName, colorSlug ) {
 		return undefined;
 	}
 
-	// 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, '-' ) }`;
+	return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;
 }
 
 /**

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

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { logged } from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { getFontSizeClass } from '../utils';
+
+describe( 'getFontSizeClass()', () => {
+	afterEach( () => {
+		for ( const key in logged ) {
+			delete logged[ key ];
+		}
+	} );
+
+	it( 'Should return the correct font size class when given a string', () => {
+		const fontSizeClass = getFontSizeClass( '14px' );
+		expect( fontSizeClass ).toBe( 'has-14-px-font-size' );
+	} );
+
+	it( 'Should return the correct font size class when given a number', () => {
+		const fontSizeClass = getFontSizeClass( 16 );
+		expect( fontSizeClass ).toBe( 'has-16-font-size' );
+	} );
+
+	it( 'Should return the correct font size class when the given font size contains special characters', () => {
+		const fontSizeClass = getFontSizeClass( '#abcdef' );
+		expect( fontSizeClass ).toBe( 'has-abcdef-font-size' );
+	} );
+} );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find } from 'lodash';
+import { find, kebabCase } from 'lodash';
 
 /**
  *  Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
@@ -55,16 +55,12 @@ 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 and ending with '-font-size'.
+ *                  The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
  */
 export function getFontSizeClass( fontSizeSlug ) {
 	if ( ! fontSizeSlug ) {
 		return;
 	}
 
-	// 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`;
+	return `has-${ kebabCase( fontSizeSlug ) }-font-size`;
 }

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

@@ -83,14 +83,7 @@ function getPresetsClasses( blockSelector, blockPresets = {} ) {
 				classes.forEach( ( { classSuffix, propertyName } ) => {
 					const slug = preset.slug;
 					const value = preset[ valueKey ];
-					// 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 classSelectorToUse = `.has-${ slug }-${ classSuffix }`;
 					const selectorToUse = `${ blockSelector }${ classSelectorToUse }`;
 					declarations += `${ selectorToUse }{${ propertyName }: ${ value } !important;}`;
 				} );