From 77fb44fbbd637c43e2b6a61d2e3258111843cd65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Wed, 16 Jun 2021 18:27:12 +0200 Subject: [PATCH] Revert "Generate classes from preset slugs in the same way (server & client) (#32352)" This reverts commit 3774b1489f17de1da53a96a2066ce9a8f996293c. --- packages/block-editor/README.md | 2 +- .../block-editor/src/components/colors/test/utils.js | 8 ++++---- packages/block-editor/src/components/colors/utils.js | 11 ++--------- .../block-editor/src/components/font-sizes/utils.js | 10 +++------- .../src/components/editor/global-styles-renderer.js | 9 +-------- 5 files changed, 11 insertions(+), 29 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index a8a19f6f830211..b4eb9c473ceb52 100644 --- 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'. # **getFontSizeObjectByValue** diff --git a/packages/block-editor/src/components/colors/test/utils.js b/packages/block-editor/src/components/colors/test/utils.js index 6e97a8518be494..1ed18cef831c8d 100644 --- 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 index 98b00b62411f05..5c3ede4ad419f5 100644 --- 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 index 80782f1753ba2e..1237a13efd7db6 100644 --- 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 index bcb26776c22d24..bdc46662fb62fc 100644 --- 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;}`;