From d5c5b6c6ea140832e74e13c5f695daf9f8ad9803 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Thu, 14 Dec 2023 08:07:47 +0100
Subject: [PATCH] Try unlocking kebabCase once

---
 packages/block-editor/src/hooks/font-family.js          | 3 ++-
 packages/block-editor/src/hooks/layout.js               | 5 ++---
 packages/block-editor/src/hooks/use-typography-props.js | 3 ++-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js
index ae41b7fa34b1f..9cde4b402a75b 100644
--- 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
index 54824558cb703..ba8f953fa91b0 100644
--- 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
index 14f5874c1422c..2d0fa1fae1d02 100644
--- 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 );