From ee2f8010b987129a43c80e806540c8c95a5137c1 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 15 Apr 2024 21:45:20 +0400 Subject: [PATCH] Unlock the private 'kebabCase' function at a file level --- packages/block-editor/src/components/colors/utils.js | 4 ++-- packages/block-editor/src/components/colors/with-colors.js | 3 ++- packages/block-editor/src/components/font-sizes/utils.js | 3 ++- .../components/global-styles/use-global-styles-output.js | 7 +------ packages/block-editor/src/hooks/font-family.js | 2 +- packages/block-editor/src/hooks/layout.js | 3 +-- packages/block-editor/src/hooks/use-typography-props.js | 3 ++- packages/block-library/src/embed/util.js | 2 +- .../font-library-modal/collection-font-variant.js | 3 ++- .../font-library-modal/library-font-variant.js | 3 ++- 10 files changed, 16 insertions(+), 17 deletions(-) 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 990cd6a534921..7f7e7f141ee89 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 5f07c9e843f4b..5fda01c6b7d9c 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 }.${ 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 a63f77468c723..118f3f6ee4aa6 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 c591c5d19e2d2..93cb53385071c 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 */ @@ -282,7 +283,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 ) }` );