Revert "Generate classes from preset slugs in the same way (server & …

…client) (#32352)" This reverts commit 3774b14.
WordPress · Jun 16, 2021 · 77fb44f · 77fb44f
1 parent 749088d
commit 77fb44f
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 29 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -382,7 +382,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**
 

diff --git a/packages/block-editor/src/components/colors/test/utils.js b/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 without spaces', () => {
-			expect(
-				getColorClassName( 'background', 'Light   Purple veryDark' )
-			).toBe( 'has-Light-Purple-veryDark-background' );
+		it( 'should return a class name with the color slug in kebab case', () => {
+			expect( getColorClassName( 'background', 'Light Purple' ) ).toBe(
+				'has-light-purple-background'
+			);
 		} );
 	} );
 } );
diff --git a/packages/block-editor/src/components/colors/utils.js b/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 }`;
 }
 
 /**

diff --git a/packages/block-editor/src/components/font-sizes/utils.js b/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`;
 }
diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js
@@ -89,14 +89,7 @@ function getPresetsClasses( blockSelector, blockPresets = {} ) {
 				if ( presetByOrigin[ origin ] ) {
 					presetByOrigin[ origin ].forEach( ( { slug } ) => {
 						classes.forEach( ( { classSuffix, propertyName } ) => {
-							// 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 }`;
 							const value = `var(--wp--preset--${ cssVarInfix }--${ slug })`;
 							declarations += `${ selectorToUse }{${ propertyName }: ${ value } !important;}`;