diff --git a/packages/block-editor/src/components/colors/utils.js b/packages/block-editor/src/components/colors/utils.js index d6d51ad001363..5ec42a6bae700 100644 --- a/packages/block-editor/src/components/colors/utils.js +++ b/packages/block-editor/src/components/colors/utils.js @@ -17,6 +17,8 @@ import { unlock } from '../../lock-unlock'; extend( [ namesPlugin, a11yPlugin ] ); +const { kebabCase } = unlock( componentsPrivateApis ); + /** * Provided an array of color objects as set by the theme or by the editor defaults, * and the values of the defined color or custom color returns a color object describing the color. @@ -75,8 +77,6 @@ export function getColorClassName( colorContextName, colorSlug ) { return undefined; } - const { kebabCase } = unlock( componentsPrivateApis ); - return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`; } diff --git a/packages/block-editor/src/components/colors/with-colors.js b/packages/block-editor/src/components/colors/with-colors.js index 33079f8b409d6..680521fb6519c 100644 --- a/packages/block-editor/src/components/colors/with-colors.js +++ b/packages/block-editor/src/components/colors/with-colors.js @@ -17,6 +17,8 @@ import { import { useSettings } from '../use-settings'; import { unlock } from '../../lock-unlock'; +const { kebabCase } = unlock( componentsPrivateApis ); + /** * Capitalizes the first letter in a string. * @@ -80,7 +82,6 @@ const withEditorColorPalette = () => * @return {Component} The component that can be used as a HOC. */ function createColorHOC( colorTypes, withColorPalette ) { - const { kebabCase } = unlock( componentsPrivateApis ); const colorMap = colorTypes.reduce( ( colorObject, colorType ) => { return { ...colorObject, diff --git a/packages/block-editor/src/components/font-sizes/utils.js b/packages/block-editor/src/components/font-sizes/utils.js index dff28c7a770d4..b43ed049507aa 100644 --- a/packages/block-editor/src/components/font-sizes/utils.js +++ b/packages/block-editor/src/components/font-sizes/utils.js @@ -8,6 +8,8 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components'; */ import { unlock } from '../../lock-unlock'; +const { kebabCase } = unlock( componentsPrivateApis ); + /** * Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. * If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned. @@ -69,6 +71,5 @@ export function getFontSizeClass( fontSizeSlug ) { return; } - const { kebabCase } = unlock( componentsPrivateApis ); return `has-${ kebabCase( fontSizeSlug ) }-font-size`; } 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 index 23bb88efc9991..d9be99efa86ef 100644 --- 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 @@ -44,6 +44,7 @@ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = { spacing: 'spacing', typography: 'typography', }; +const { kebabCase } = unlock( componentsPrivateApis ); function compileStyleValue( uncompiledValue ) { const VARIABLE_REFERENCE_PREFIX = 'var:'; @@ -69,8 +70,6 @@ function compileStyleValue( uncompiledValue ) { * @return {Array} An array of style declarations. */ function getPresetsDeclarations( blockPresets = {}, mergedSettings ) { - const { kebabCase } = unlock( componentsPrivateApis ); - return PRESET_METADATA.reduce( ( declarations, { path, valueKey, valueFunc, cssVarInfix } ) => { const presetByOrigin = getValueFromObjectPath( @@ -115,8 +114,6 @@ function getPresetsDeclarations( blockPresets = {}, mergedSettings ) { * @return {string} CSS declarations for the preset classes. */ function getPresetsClasses( blockSelector = '*', blockPresets = {} ) { - const { kebabCase } = unlock( componentsPrivateApis ); - return PRESET_METADATA.reduce( ( declarations, { path, cssVarInfix, classes } ) => { if ( ! classes ) { @@ -181,7 +178,6 @@ function getPresetsSvgFilters( blockPresets = {} ) { } function flattenTree( input = {}, prefix, token ) { - const { kebabCase } = unlock( componentsPrivateApis ); let result = []; Object.keys( input ).forEach( ( key ) => { const newKey = prefix + kebabCase( key.replace( '/', '-' ) ); @@ -323,7 +319,6 @@ export function getStylesDeclarations( tree = {}, isTemplate = true ) { - const { kebabCase } = unlock( componentsPrivateApis ); const isRoot = ROOT_BLOCK_SELECTOR === selector; const output = Object.entries( STYLE_PROPERTY ).reduce( ( diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js index db6515ef1c2fe..ba9a66a8bcf04 100644 --- a/packages/block-editor/src/hooks/font-family.js +++ b/packages/block-editor/src/hooks/font-family.js @@ -14,6 +14,7 @@ import { TYPOGRAPHY_SUPPORT_KEY } from './typography'; import { unlock } from '../lock-unlock'; export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily'; +const { kebabCase } = unlock( componentsPrivateApis ); /** * Filters registered block settings, extending attributes to include @@ -68,7 +69,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 88192ddf5f055..a19c5604701f6 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -32,6 +32,7 @@ import { useBlockSettings, useStyleOverride } from './utils'; import { unlock } from '../lock-unlock'; const layoutBlockSupportKey = 'layout'; +const { kebabCase } = unlock( componentsPrivateApis ); function hasLayoutBlockSupport( blockName ) { return ( @@ -49,7 +50,6 @@ function hasLayoutBlockSupport( blockName ) { * @return { Array } Array of CSS classname strings. */ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) { - const { kebabCase } = unlock( componentsPrivateApis ); const { layout } = blockAttributes; const { default: defaultBlockLayout } = getBlockSupport( blockName, layoutBlockSupportKey ) || {}; @@ -371,7 +371,6 @@ function BlockWithLayoutStyles( { ? { ...layout, type: 'constrained' } : layout || defaultBlockLayout || {}; - const { kebabCase } = unlock( componentsPrivateApis ); const selectorPrefix = `wp-container-${ kebabCase( name ) }-is-layout-`; // Higher specificity to override defaults from theme.json. const selector = `.${ 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 ec76cbf4bf6a0..0f1a2caefde04 100644 --- a/packages/block-editor/src/hooks/use-typography-props.js +++ b/packages/block-editor/src/hooks/use-typography-props.js @@ -16,6 +16,8 @@ import { getFontSizeClass } from '../components/font-sizes'; import { getTypographyFontSizeValue } 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 @@ -31,7 +33,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 || {}; typographyStyles = { ...typographyStyles, diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js index 2af0e6adbfc6f..eae45cc397e7b 100644 --- a/packages/block-library/src/embed/util.js +++ b/packages/block-library/src/embed/util.js @@ -23,6 +23,7 @@ import { ASPECT_RATIOS, WP_EMBED_TYPE } from './constants'; import { unlock } from '../lock-unlock'; const { name: DEFAULT_EMBED_BLOCK } = metadata; +const { kebabCase } = unlock( componentsPrivateApis ); /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */ @@ -288,7 +289,6 @@ export const getAttributesFromPreview = memoize( // If we got a provider name from the API, use it for the slug, otherwise we use the title, // because not all embed code gives us a provider name. const { html, provider_name: providerName } = preview; - const { kebabCase } = unlock( componentsPrivateApis ); const providerNameSlug = kebabCase( ( providerName || title ).toLowerCase() ); diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js index 6cc56b0a542f3..0719cb873f8f7 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js @@ -14,6 +14,8 @@ import { getFontFaceVariantName } from './utils'; import FontDemo from './font-demo'; import { unlock } from '../../../lock-unlock'; +const { kebabCase } = unlock( componentsPrivateApis ); + function CollectionFontVariant( { face, font, @@ -29,7 +31,6 @@ function CollectionFontVariant( { }; const displayName = font.name + ' ' + getFontFaceVariantName( face ); - const { kebabCase } = unlock( componentsPrivateApis ); const checkboxId = kebabCase( `${ font.slug }-${ getFontFaceVariantName( face ) }` ); diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js index b994d1f4c1e6b..2f84bd1f2c749 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js @@ -16,6 +16,8 @@ import { FontLibraryContext } from './context'; import FontDemo from './font-demo'; import { unlock } from '../../../lock-unlock'; +const { kebabCase } = unlock( componentsPrivateApis ); + function LibraryFontVariant( { face, font } ) { const { isFontActivated, toggleActivateFont } = useContext( FontLibraryContext ); @@ -39,7 +41,6 @@ function LibraryFontVariant( { face, font } ) { }; const displayName = font.name + ' ' + getFontFaceVariantName( face ); - const { kebabCase } = unlock( componentsPrivateApis ); const checkboxId = kebabCase( `${ font.slug }-${ getFontFaceVariantName( face ) }` ); diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js index bd97b5b7fdcdd..1ca7bb68c87a0 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js @@ -15,6 +15,7 @@ import { formatFontFaceName } from './preview-styles'; * Browser dependencies */ const { File } = window; +const { kebabCase } = unlock( componentsPrivateApis ); export function setUIValuesNeeded( font, extraValues = {} ) { if ( ! font.name && ( font.fontFamily || font.slug ) ) { @@ -184,7 +185,6 @@ export function getDisplaySrcFromFontFace( input ) { export function makeFontFamilyFormData( fontFamily ) { const formData = new FormData(); - const { kebabCase } = unlock( componentsPrivateApis ); const { fontFace, category, ...familyWithValidParameters } = fontFamily; const fontFamilySettings = {