@wordpress/block-editor 15.6.0 → 15.6.1-next.36001005c.0

package/src/components/global-styles/utils.js

@@ -7,145 +7,6 @@ import fastDeepEqual from 'fast-deep-equal/es6';
  * WordPress dependencies
  */
 import { useViewportMatch } from '@wordpress/compose';
-import { getCSSValueFromRawStyle } from '@wordpress/style-engine';
-
-/**
- * Internal dependencies
- */
-import { getTypographyFontSizeValue } from './typography-utils';
-import { getValueFromObjectPath } from '../../utils/object';
-
-/* Supporting data. */
-export const ROOT_BLOCK_SELECTOR = 'body';
-export const ROOT_CSS_PROPERTIES_SELECTOR = ':root';
-
-export const PRESET_METADATA = [
-	{
-		path: [ 'color', 'palette' ],
-		valueKey: 'color',
-		cssVarInfix: 'color',
-		classes: [
-			{ classSuffix: 'color', propertyName: 'color' },
-			{
-				classSuffix: 'background-color',
-				propertyName: 'background-color',
-			},
-			{
-				classSuffix: 'border-color',
-				propertyName: 'border-color',
-			},
-		],
-	},
-	{
-		path: [ 'color', 'gradients' ],
-		valueKey: 'gradient',
-		cssVarInfix: 'gradient',
-		classes: [
-			{
-				classSuffix: 'gradient-background',
-				propertyName: 'background',
-			},
-		],
-	},
-	{
-		path: [ 'color', 'duotone' ],
-		valueKey: 'colors',
-		cssVarInfix: 'duotone',
-		valueFunc: ( { slug } ) => `url( '#wp-duotone-${ slug }' )`,
-		classes: [],
-	},
-	{
-		path: [ 'shadow', 'presets' ],
-		valueKey: 'shadow',
-		cssVarInfix: 'shadow',
-		classes: [],
-	},
-	{
-		path: [ 'typography', 'fontSizes' ],
-		valueFunc: ( preset, settings ) =>
-			getTypographyFontSizeValue( preset, settings ),
-		valueKey: 'size',
-		cssVarInfix: 'font-size',
-		classes: [ { classSuffix: 'font-size', propertyName: 'font-size' } ],
-	},
-	{
-		path: [ 'typography', 'fontFamilies' ],
-		valueKey: 'fontFamily',
-		cssVarInfix: 'font-family',
-		classes: [
-			{ classSuffix: 'font-family', propertyName: 'font-family' },
-		],
-	},
-	{
-		path: [ 'spacing', 'spacingSizes' ],
-		valueKey: 'size',
-		cssVarInfix: 'spacing',
-		classes: [],
-	},
-	{
-		path: [ 'border', 'radiusSizes' ],
-		valueKey: 'size',
-		cssVarInfix: 'border-radius',
-		classes: [],
-	},
-];
-
-export const STYLE_PATH_TO_CSS_VAR_INFIX = {
-	'color.background': 'color',
-	'color.text': 'color',
-	'filter.duotone': 'duotone',
-	'elements.link.color.text': 'color',
-	'elements.link.:hover.color.text': 'color',
-	'elements.link.typography.fontFamily': 'font-family',
-	'elements.link.typography.fontSize': 'font-size',
-	'elements.button.color.text': 'color',
-	'elements.button.color.background': 'color',
-	'elements.caption.color.text': 'color',
-	'elements.button.typography.fontFamily': 'font-family',
-	'elements.button.typography.fontSize': 'font-size',
-	'elements.heading.color': 'color',
-	'elements.heading.color.background': 'color',
-	'elements.heading.typography.fontFamily': 'font-family',
-	'elements.heading.gradient': 'gradient',
-	'elements.heading.color.gradient': 'gradient',
-	'elements.h1.color': 'color',
-	'elements.h1.color.background': 'color',
-	'elements.h1.typography.fontFamily': 'font-family',
-	'elements.h1.color.gradient': 'gradient',
-	'elements.h2.color': 'color',
-	'elements.h2.color.background': 'color',
-	'elements.h2.typography.fontFamily': 'font-family',
-	'elements.h2.color.gradient': 'gradient',
-	'elements.h3.color': 'color',
-	'elements.h3.color.background': 'color',
-	'elements.h3.typography.fontFamily': 'font-family',
-	'elements.h3.color.gradient': 'gradient',
-	'elements.h4.color': 'color',
-	'elements.h4.color.background': 'color',
-	'elements.h4.typography.fontFamily': 'font-family',
-	'elements.h4.color.gradient': 'gradient',
-	'elements.h5.color': 'color',
-	'elements.h5.color.background': 'color',
-	'elements.h5.typography.fontFamily': 'font-family',
-	'elements.h5.color.gradient': 'gradient',
-	'elements.h6.color': 'color',
-	'elements.h6.color.background': 'color',
-	'elements.h6.typography.fontFamily': 'font-family',
-	'elements.h6.color.gradient': 'gradient',
-	'color.gradient': 'gradient',
-	shadow: 'shadow',
-	'typography.fontSize': 'font-size',
-	'typography.fontFamily': 'font-family',
-};
-
-// A static list of block attributes that store global style preset slugs.
-export const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
-	'color.background': 'backgroundColor',
-	'color.text': 'textColor',
-	'color.gradient': 'gradient',
-	'typography.fontSize': 'fontSize',
-	'typography.fontFamily': 'fontFamily',
-};
 
 export function useToolsPanelDropdownMenuProps() {
 	const isMobile = useViewportMatch( 'medium', '<' );
@@ -160,208 +21,6 @@ export function useToolsPanelDropdownMenuProps() {
 		: {};
 }
 
-function findInPresetsBy(
-	features,
-	blockName,
-	presetPath,
-	presetProperty,
-	presetValueValue
-) {
-	// Block presets take priority above root level presets.
-	const orderedPresetsByOrigin = [
-		getValueFromObjectPath( features, [
-			'blocks',
-			blockName,
-			...presetPath,
-		] ),
-		getValueFromObjectPath( features, presetPath ),
-	];
-
-	for ( const presetByOrigin of orderedPresetsByOrigin ) {
-		if ( presetByOrigin ) {
-			// Preset origins ordered by priority.
-			const origins = [ 'custom', 'theme', 'default' ];
-			for ( const origin of origins ) {
-				const presets = presetByOrigin[ origin ];
-				if ( presets ) {
-					const presetObject = presets.find(
-						( preset ) =>
-							preset[ presetProperty ] === presetValueValue
-					);
-					if ( presetObject ) {
-						if ( presetProperty === 'slug' ) {
-							return presetObject;
-						}
-						// If there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored.
-						const highestPresetObjectWithSameSlug = findInPresetsBy(
-							features,
-							blockName,
-							presetPath,
-							'slug',
-							presetObject.slug
-						);
-						if (
-							highestPresetObjectWithSameSlug[
-								presetProperty
-							] === presetObject[ presetProperty ]
-						) {
-							return presetObject;
-						}
-						return undefined;
-					}
-				}
-			}
-		}
-	}
-}
-
-export function getPresetVariableFromValue(
-	features,
-	blockName,
-	variableStylePath,
-	presetPropertyValue
-) {
-	if ( ! presetPropertyValue ) {
-		return presetPropertyValue;
-	}
-
-	const cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[ variableStylePath ];
-
-	const metadata = PRESET_METADATA.find(
-		( data ) => data.cssVarInfix === cssVarInfix
-	);
-
-	if ( ! metadata ) {
-		// The property doesn't have preset data
-		// so the value should be returned as it is.
-		return presetPropertyValue;
-	}
-	const { valueKey, path } = metadata;
-
-	const presetObject = findInPresetsBy(
-		features,
-		blockName,
-		path,
-		valueKey,
-		presetPropertyValue
-	);
-
-	if ( ! presetObject ) {
-		// Value wasn't found in the presets,
-		// so it must be a custom value.
-		return presetPropertyValue;
-	}
-
-	return `var:preset|${ cssVarInfix }|${ presetObject.slug }`;
-}
-
-function getValueFromPresetVariable(
-	features,
-	blockName,
-	variable,
-	[ presetType, slug ]
-) {
-	const metadata = PRESET_METADATA.find(
-		( data ) => data.cssVarInfix === presetType
-	);
-	if ( ! metadata ) {
-		return variable;
-	}
-
-	const presetObject = findInPresetsBy(
-		features.settings,
-		blockName,
-		metadata.path,
-		'slug',
-		slug
-	);
-
-	if ( presetObject ) {
-		const { valueKey } = metadata;
-		const result = presetObject[ valueKey ];
-		return getValueFromVariable( features, blockName, result );
-	}
-
-	return variable;
-}
-
-function getValueFromCustomVariable( features, blockName, variable, path ) {
-	const result =
-		getValueFromObjectPath( features.settings, [
-			'blocks',
-			blockName,
-			'custom',
-			...path,
-		] ) ??
-		getValueFromObjectPath( features.settings, [ 'custom', ...path ] );
-	if ( ! result ) {
-		return variable;
-	}
-	// A variable may reference another variable so we need recursion until we find the value.
-	return getValueFromVariable( features, blockName, result );
-}
-
-/**
- * Attempts to fetch the value of a theme.json CSS variable.
- *
- * @param {Object}   features  GlobalStylesContext config, e.g., user, base or merged. Represents the theme.json tree.
- * @param {string}   blockName The name of a block as represented in the styles property. E.g., 'root' for root-level, and 'core/${blockName}' for blocks.
- * @param {string|*} variable  An incoming style value. A CSS var value is expected, but it could be any value.
- * @return {string|*|{ref}} The value of the CSS var, if found. If not found, the passed variable argument.
- */
-export function getValueFromVariable( features, blockName, variable ) {
-	if ( ! variable || typeof variable !== 'string' ) {
-		if ( typeof variable?.ref === 'string' ) {
-			variable = getValueFromObjectPath( features, variable.ref );
-			// Presence of another ref indicates a reference to another dynamic value.
-			// Pointing to another dynamic value is not supported.
-			if ( ! variable || !! variable?.ref ) {
-				return variable;
-			}
-		} else {
-			return variable;
-		}
-	}
-	const USER_VALUE_PREFIX = 'var:';
-	const THEME_VALUE_PREFIX = 'var(--wp--';
-	const THEME_VALUE_SUFFIX = ')';
-
-	let parsedVar;
-
-	if ( variable.startsWith( USER_VALUE_PREFIX ) ) {
-		parsedVar = variable.slice( USER_VALUE_PREFIX.length ).split( '|' );
-	} else if (
-		variable.startsWith( THEME_VALUE_PREFIX ) &&
-		variable.endsWith( THEME_VALUE_SUFFIX )
-	) {
-		parsedVar = variable
-			.slice( THEME_VALUE_PREFIX.length, -THEME_VALUE_SUFFIX.length )
-			.split( '--' );
-	} else {
-		// We don't know how to parse the value: either is raw of uses complex CSS such as `calc(1px * var(--wp--variable) )`
-		return variable;
-	}
-
-	const [ type, ...path ] = parsedVar;
-	if ( type === 'preset' ) {
-		return getValueFromPresetVariable(
-			features,
-			blockName,
-			variable,
-			path
-		);
-	}
-	if ( type === 'custom' ) {
-		return getValueFromCustomVariable(
-			features,
-			blockName,
-			variable,
-			path
-		);
-	}
-	return variable;
-}
-
 /**
  * Function that scopes a selector with another one. This works a bit like
  * SCSS nesting except the `&` operator isn't supported.
@@ -397,78 +56,6 @@ export function scopeSelector( scope, selector ) {
 	return selectorsScoped.join( ', ' );
 }
 
-/**
- * Scopes a collection of selectors for features and subfeatures.
- *
- * @example
- * ```js
- * const scope = '.custom-scope';
- * const selectors = {
- *     color: '.wp-my-block p',
- *     typography: { fontSize: '.wp-my-block caption' },
- * };
- * const result = scopeFeatureSelector( scope, selectors );
- * // result is {
- * //     color: '.custom-scope .wp-my-block p',
- * //     typography: { fonSize: '.custom-scope .wp-my-block caption' },
- * // }
- * ```
- *
- * @param {string} scope     Selector to scope collection of selectors with.
- * @param {Object} selectors Collection of feature selectors e.g.
- *
- * @return {Object|undefined} Scoped collection of feature selectors.
- */
-export function scopeFeatureSelectors( scope, selectors ) {
-	if ( ! scope || ! selectors ) {
-		return;
-	}
-
-	const featureSelectors = {};
-
-	Object.entries( selectors ).forEach( ( [ feature, selector ] ) => {
-		if ( typeof selector === 'string' ) {
-			featureSelectors[ feature ] = scopeSelector( scope, selector );
-		}
-
-		if ( typeof selector === 'object' ) {
-			featureSelectors[ feature ] = {};
-
-			Object.entries( selector ).forEach(
-				( [ subfeature, subfeatureSelector ] ) => {
-					featureSelectors[ feature ][ subfeature ] = scopeSelector(
-						scope,
-						subfeatureSelector
-					);
-				}
-			);
-		}
-	} );
-
-	return featureSelectors;
-}
-
-/**
- * Appends a sub-selector to an existing one.
- *
- * Given the compounded `selector` "h1, h2, h3"
- * and the `toAppend` selector ".some-class" the result will be
- * "h1.some-class, h2.some-class, h3.some-class".
- *
- * @param {string} selector Original selector.
- * @param {string} toAppend Selector to append.
- *
- * @return {string} The new selector.
- */
-export function appendToSelector( selector, toAppend ) {
-	if ( ! selector.includes( ',' ) ) {
-		return selector + toAppend;
-	}
-	const selectors = selector.split( ',' );
-	const newSelectors = selectors.map( ( sel ) => sel + toAppend );
-	return newSelectors.join( ',' );
-}
-
 /**
  * Compares global style variations according to their styles and settings properties.
  *
@@ -494,127 +81,3 @@ export function areGlobalStyleConfigsEqual( original, variation ) {
 		fastDeepEqual( original?.settings, variation?.settings )
 	);
 }
-
-/**
- * Generates the selector for a block style variation by creating the
- * appropriate CSS class and adding it to the ancestor portion of the block's
- * selector.
- *
- * For example, take the Button block which has a compound selector:
- * `.wp-block-button .wp-block-button__link`. With a variation named 'custom',
- * the class `.is-style-custom` should be added to the `.wp-block-button`
- * ancestor only.
- *
- * This function will take into account comma separated and complex selectors.
- *
- * @param {string} variation     Name for the variation.
- * @param {string} blockSelector CSS selector for the block.
- *
- * @return {string} CSS selector for the block style variation.
- */
-export function getBlockStyleVariationSelector( variation, blockSelector ) {
-	const variationClass = `.is-style-${ variation }`;
-
-	if ( ! blockSelector ) {
-		return variationClass;
-	}
-
-	const ancestorRegex = /((?::\([^)]+\))?\s*)([^\s:]+)/;
-	const addVariationClass = ( _match, group1, group2 ) => {
-		return group1 + group2 + variationClass;
-	};
-
-	const result = blockSelector
-		.split( ',' )
-		.map( ( part ) => part.replace( ancestorRegex, addVariationClass ) );
-
-	return result.join( ',' );
-}
-
-/**
- * Looks up a theme file URI based on a relative path.
- *
- * @param {string}        file          A relative path.
- * @param {Array<Object>} themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.
- * @return {string} A resolved theme file URI, if one is found in the themeFileURIs collection.
- */
-export function getResolvedThemeFilePath( file, themeFileURIs ) {
-	if ( ! file || ! themeFileURIs || ! Array.isArray( themeFileURIs ) ) {
-		return file;
-	}
-
-	const uri = themeFileURIs.find(
-		( themeFileUri ) => themeFileUri?.name === file
-	);
-
-	if ( ! uri?.href ) {
-		return file;
-	}
-
-	return uri?.href;
-}
-
-/**
- * Resolves ref values in theme JSON.
- *
- * @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.
- * @param {Object}        tree      A theme.json object.
- * @return {*} The resolved value or incoming ruleValue.
- */
-export function getResolvedRefValue( ruleValue, tree ) {
-	if ( ! ruleValue || ! tree ) {
-		return ruleValue;
-	}
-
-	/*
-	 * Where the rule value is an object with a 'ref' property pointing
-	 * to a path, this converts that path into the value at that path.
-	 * For example: { "ref": "style.color.background" } => "#fff".
-	 */
-	if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
-		const resolvedRuleValue = getCSSValueFromRawStyle(
-			getValueFromObjectPath( tree, ruleValue.ref )
-		);
-
-		/*
-		 * Presence of another ref indicates a reference to another dynamic value.
-		 * Pointing to another dynamic value is not supported.
-		 */
-		if ( resolvedRuleValue?.ref ) {
-			return undefined;
-		}
-
-		if ( resolvedRuleValue === undefined ) {
-			return ruleValue;
-		}
-
-		return resolvedRuleValue;
-	}
-	return ruleValue;
-}
-
-/**
- * Resolves ref and relative path values in theme JSON.
- *
- * @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.
- * @param {Object}        tree      A theme.json object.
- * @return {*} The resolved value or incoming ruleValue.
- */
-export function getResolvedValue( ruleValue, tree ) {
-	if ( ! ruleValue || ! tree ) {
-		return ruleValue;
-	}
-
-	// Resolve ref values.
-	const resolvedValue = getResolvedRefValue( ruleValue, tree );
-
-	// Resolve relative paths.
-	if ( resolvedValue?.url ) {
-		resolvedValue.url = getResolvedThemeFilePath(
-			resolvedValue.url,
-			tree?._links?.[ 'wp:theme-file' ]
-		);
-	}
-
-	return resolvedValue;
-}

package/src/components/inserter/style.scss

@@ -151,7 +151,7 @@ $block-inserter-tabs-height: 44px;
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 }
 
 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
@@ -440,7 +440,7 @@ $block-inserter-tabs-height: 44px;
 }
 
 .components-heading.block-editor-inserter__patterns-category-panel-title {
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 }
 
 .block-editor-inserter__patterns-explore-button,

package/src/components/multi-selection-inspector/style.scss

@@ -5,7 +5,7 @@
 }
 
 .block-editor-multi-selection-inspector__card-title {
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 }
 
 .block-editor-multi-selection-inspector__card .block-editor-block-icon {

package/src/hooks/block-style-variation.js

@@ -4,15 +4,12 @@
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
+import { toStyles, getBlockSelectors } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
-import {
-	GlobalStylesContext,
-	toStyles,
-	getBlockSelectors,
-} from '../components/global-styles';
+import { GlobalStylesContext } from '../components/global-styles';
 import { usePrivateStyleOverride } from './utils';
 import { getValueFromObjectPath } from '../utils/object';
 import { store as blockEditorStore } from '../store';
@@ -127,7 +124,6 @@ export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {
 					};
 					const blockSelectors = getBlockSelectors(
 						getBlockTypes(),
-						getBlockStyles,
 						override.clientId
 					);
 					const hasBlockGapSupport = false;
@@ -322,11 +318,7 @@ function useBlockProps( { name, className, clientId } ) {
 		}
 
 		const variationConfig = { settings, styles };
-		const blockSelectors = getBlockSelectors(
-			getBlockTypes(),
-			getBlockStyles,
-			clientId
-		);
+		const blockSelectors = getBlockSelectors( getBlockTypes(), clientId );
 		const hasBlockGapSupport = false;
 		const hasFallbackGapSupport = true;
 		const disableLayoutStyles = true;
@@ -349,7 +341,7 @@ function useBlockProps( { name, className, clientId } ) {
 				variationStyles: true,
 			}
 		);
-	}, [ variation, settings, styles, getBlockStyles, clientId ] );
+	}, [ variation, settings, styles, clientId ] );
 
 	usePrivateStyleOverride( {
 		id: `variation-${ clientId }`,

package/src/hooks/duotone.js

@@ -15,6 +15,7 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useEffect } from '@wordpress/element';
+import { getBlockSelector } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -30,7 +31,6 @@ import {
 	getDuotoneStylesheet,
 	getDuotoneUnsetStylesheet,
 } from '../components/duotone/utils';
-import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { scopeSelector } from '../components/global-styles/utils';
 import {
 	cleanEmptyObject,
@@ -354,14 +354,14 @@ function useBlockProps( { clientId, name, style } ) {
 				false
 			);
 			if ( experimentalDuotone ) {
-				const rootSelector = getBlockCSSSelector( blockType );
+				const rootSelector = getBlockSelector( blockType );
 				return typeof experimentalDuotone === 'string'
 					? scopeSelector( rootSelector, experimentalDuotone )
 					: rootSelector;
 			}
 
 			// Regular filter.duotone support uses filter.duotone selectors with fallbacks.
-			return getBlockCSSSelector( blockType, 'filter.duotone', {
+			return getBlockSelector( blockType, 'filter.duotone', {
 				fallback: true,
 			} );
 		}

package/src/hooks/font-size.js

@@ -4,6 +4,7 @@
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
+import { getTypographyFontSizeValue } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -21,7 +22,6 @@ import {
 	shouldSkipSerialization,
 } from './utils';
 import { useSettings } from '../components/use-settings';
-import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 

package/src/hooks/use-typography-props.js

@@ -7,13 +7,13 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { getTypographyFontSizeValue } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
 import { getInlineStyles } from './style';
 import { getFontSizeClass } from '../components/font-sizes';
-import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
 import { unlock } from '../lock-unlock';
 
 const { kebabCase } = unlock( componentsPrivateApis );

package/src/style.scss

@@ -20,6 +20,7 @@
 @use "./components/block-patterns-paging/style.scss" as *;
 @use "./components/block-popover/style.scss" as *;
 @use "./components/block-preview/style.scss" as *;
+@use "./components/block-quick-navigation/style.scss" as *;
 @use "./components/block-rename/style.scss" as *;
 @use "./components/block-styles/style.scss" as *;
 @use "./components/block-switcher/style.scss" as *;