Skip to content

Commit

Permalink
Unlock the private 'kebabCase' function at a file level
Browse files Browse the repository at this point in the history
  • Loading branch information
Mamaduka committed Apr 15, 2024
1 parent ee773ce commit ee2f801
Show file tree
Hide file tree
Showing 10 changed files with 16 additions and 17 deletions.
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/colors/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -75,8 +77,6 @@ export function getColorClassName( colorContextName, colorSlug ) {
return undefined;
}

const { kebabCase } = unlock( componentsPrivateApis );

return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;
}

Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/colors/with-colors.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down Expand Up @@ -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,
Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/font-sizes/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -69,6 +71,5 @@ export function getFontSizeClass( fontSizeSlug ) {
return;
}

const { kebabCase } = unlock( componentsPrivateApis );
return `has-${ kebabCase( fontSizeSlug ) }-font-size`;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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:';
Expand All @@ -69,8 +70,6 @@ function compileStyleValue( uncompiledValue ) {
* @return {Array<Object>} 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(
Expand Down Expand Up @@ -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 ) {
Expand Down Expand Up @@ -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( '/', '-' ) );
Expand Down Expand Up @@ -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(
(
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/hooks/font-family.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down
3 changes: 1 addition & 2 deletions packages/block-editor/src/hooks/layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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 ) || {};
Expand Down Expand Up @@ -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 }`;
Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/src/hooks/use-typography-props.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/embed/util.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 */

Expand Down Expand Up @@ -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()
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -29,7 +31,6 @@ function CollectionFontVariant( {
};

const displayName = font.name + ' ' + getFontFaceVariantName( face );
const { kebabCase } = unlock( componentsPrivateApis );
const checkboxId = kebabCase(
`${ font.slug }-${ getFontFaceVariantName( face ) }`
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand All @@ -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 ) }`
);
Expand Down

0 comments on commit ee2f801

Please sign in to comment.