Do not kebabCase fontFamily slugs.

WordPress · Nov 13, 2023 · ec565b8 · ec565b8
1 parent 01fe4d9
commit ec565b8
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -83,10 +83,12 @@ function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
 				if ( presetByOrigin[ origin ] ) {
 					presetByOrigin[ origin ].forEach( ( value ) => {
 						if ( valueKey && ! valueFunc ) {
+							let slug = kebabCase( value.slug );
+							if ( valueKey === 'fontFamily' ) {
+								slug = value.slug;
+							}
 							declarations.push(
-								`--wp--preset--${ cssVarInfix }--${ kebabCase(
-									value.slug
-								) }: ${ value[ valueKey ] }`
+								`--wp--preset--${ cssVarInfix }--${ slug }: ${ value[ valueKey ] }`
 							);
 						} else if (
 							valueFunc &&

diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js
@@ -10,7 +10,6 @@ import TokenList from '@wordpress/token-list';
  */
 import { shouldSkipSerialization } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
-import { kebabCase } from '../utils/object';
 
 export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
 
@@ -67,7 +66,7 @@ function addSaveProps( props, blockType, attributes ) {
 
 	// Use TokenList to dedupe classes.
 	const classes = new TokenList( props.className );
-	classes.add( `has-${ kebabCase( attributes?.fontFamily ) }-font-family` );
+	classes.add( `has-${ attributes?.fontFamily }-font-family` );
 	const newClassName = classes.value;
 	props.className = newClassName ? newClassName : undefined;
 

diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js
@@ -12,7 +12,6 @@ import {
 	getTypographyFontSizeValue,
 	getFluidTypographyOptionsFromSettings,
 } from '../components/global-styles/typography-utils';
-import { kebabCase } from '../utils/object';
 
 /*
  * This utility is intended to assist where the serialization of the typography
@@ -43,7 +42,7 @@ export function getTypographyClassesAndStyles( attributes, settings ) {
 
 	const style = getInlineStyles( { typography: typographyStyles } );
 	const fontFamilyClassName = !! attributes?.fontFamily
-		? `has-${ kebabCase( attributes.fontFamily ) }-font-family`
+		? `has-${ attributes.fontFamily }-font-family`
 		: '';
 
 	const className = classnames(