From 7d7432c7184ca174d62579dd9327106ea1f45031 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Wed, 16 Jun 2021 19:42:09 +0200 Subject: [PATCH] Revert fix/slug-to-classname (#32742) Co-authored-by: Bernie Reiter --- packages/block-editor/README.md | 2 +- .../src/components/colors/test/utils.js | 16 ++++++++-- .../src/components/colors/utils.js | 11 ++----- .../src/components/font-sizes/test/utils.js | 32 +++++++++++++++++++ .../src/components/font-sizes/utils.js | 10 ++---- .../editor/global-styles-renderer.js | 9 +----- 6 files changed, 53 insertions(+), 27 deletions(-) create mode 100644 packages/block-editor/src/components/font-sizes/test/utils.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 9ecd72ea0cb307..726990f0ac3637 100644 --- a/packages/block-editor/README.md +++ b/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'. # **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..30443c359776aa 100644 --- a/packages/block-editor/src/components/colors/test/utils.js +++ b/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' + ); } ); } ); } ); diff --git a/packages/block-editor/src/components/colors/utils.js b/packages/block-editor/src/components/colors/utils.js index 00dcd5ea5b1f0f..903d7033eedee9 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/test/utils.js b/packages/block-editor/src/components/font-sizes/test/utils.js new file mode 100644 index 00000000000000..1a431bce828110 --- /dev/null +++ b/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' ); + } ); +} ); diff --git a/packages/block-editor/src/components/font-sizes/utils.js b/packages/block-editor/src/components/font-sizes/utils.js index 8284dbe981abda..8604e9f287788a 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 45241512c0e7dc..70c284535cf9ae 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/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;}`; } );