Try unlocking kebabCase once

WordPress · Dec 14, 2023 · d5c5b6c · d5c5b6c
1 parent d9ea8d0
commit d5c5b6c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js
@@ -13,6 +13,8 @@ import { shouldSkipSerialization } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 import { unlock } from '../lock-unlock';
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
 
 /**
@@ -68,7 +70,6 @@ function addSaveProps( props, blockType, attributes ) {
 
 	// Use TokenList to dedupe classes.
 	const classes = new TokenList( props.className );
-	const { kebabCase } = unlock( componentsPrivateApis );
 	classes.add( `has-${ kebabCase( attributes?.fontFamily ) }-font-family` );
 	const newClassName = classes.value;
 	props.className = newClassName ? newClassName : undefined;

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -31,6 +31,8 @@ import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
 import { useBlockSettings, useStyleOverride } from './utils';
 import { unlock } from '../lock-unlock';
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 const layoutBlockSupportKey = 'layout';
 
 function hasLayoutBlockSupport( blockName ) {
@@ -49,7 +51,6 @@ function hasLayoutBlockSupport( blockName ) {
  * @return { Array } Array of CSS classname strings.
  */
 export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const rootPaddingAlignment = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().__experimentalFeatures
@@ -349,8 +350,6 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
 			? { ...layout, type: 'constrained' }
 			: layout || defaultBlockLayout || {};
 	const layoutClasses = useLayoutClasses( attributes, name );
-
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const selectorPrefix = `wp-container-${ kebabCase( name ) }-layout-`;
 	// Higher specificity to override defaults from theme.json.
 	const selector = `.${ selectorPrefix }${ id }.${ selectorPrefix }${ id }`;

diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js
@@ -19,6 +19,8 @@ import {
 } from '../components/global-styles/typography-utils';
 import { unlock } from '../lock-unlock';
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 /*
  * This utility is intended to assist where the serialization of the typography
  * block support is being skipped for a block but the typography related CSS
@@ -34,7 +36,6 @@ import { unlock } from '../lock-unlock';
  * @return {Object} Typography block support derived CSS classes & styles.
  */
 export function getTypographyClassesAndStyles( attributes, settings ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
 	let typographyStyles = attributes?.style?.typography || {};
 	const fluidTypographySettings =
 		getFluidTypographyOptionsFromSettings( settings );