@wordpress/block-editor 15.21.0 → 15.22.0

package/src/store/test/selectors.js

@@ -4031,6 +4031,82 @@ describe( 'selectors', () => {
 				} )
 			);
 		} );
+
+		it( 'should use variation metadata for transformation items', () => {
+			registerBlockType( 'core/variation-transform-source', {
+				apiVersion: 3,
+				category: 'text',
+				title: 'Variation Transform Source',
+				edit: () => {},
+				save: () => {},
+				transforms: {
+					to: [
+						{
+							type: 'block',
+							blocks: [ 'core/variation-transform-target' ],
+							variationName: 'grid',
+							transform: () => {},
+						},
+					],
+				},
+			} );
+			registerBlockType( 'core/variation-transform-target', {
+				apiVersion: 3,
+				category: 'design',
+				title: 'Group',
+				icon: 'group',
+				edit: () => {},
+				save: () => {},
+				variations: [
+					{
+						name: 'grid',
+						title: 'Grid',
+						icon: 'grid',
+						attributes: { layout: { type: 'grid' } },
+						scope: [ 'transform' ],
+					},
+				],
+			} );
+
+			const state = {
+				blocks: {
+					byClientId: new Map(),
+					attributes: new Map(),
+					order: new Map(),
+					parents: new Map(),
+					cache: {},
+					blockEditingModes: new Map(),
+				},
+				preferences: {
+					insertUsage: {
+						'core/variation-transform-target/grid': {
+							count: 10,
+							time: 1000,
+						},
+					},
+				},
+				blockListSettings: new Map(),
+				settings: {},
+			};
+			const blocks = [ { name: 'core/variation-transform-source' } ];
+
+			try {
+				const items = getBlockTransformItems( state, blocks );
+
+				expect( items ).toHaveLength( 1 );
+				expect( items[ 0 ] ).toMatchObject( {
+					id: 'core/variation-transform-target/grid',
+					name: 'core/variation-transform-target',
+					variationName: 'grid',
+					title: 'Grid',
+					icon: 'grid',
+					frecency: 2.5,
+				} );
+			} finally {
+				unregisterBlockType( 'core/variation-transform-source' );
+				unregisterBlockType( 'core/variation-transform-target' );
+			}
+		} );
 	} );
 
 	describe( 'isValidTemplate', () => {
@@ -5005,6 +5081,7 @@ describe( '__unstableGetClientIdsTree', () => {
 			},
 			{ clientId: 'baz', innerBlocks: [] },
 		] );
+		expect( console ).toHaveWarned();
 	} );
 
 	it( "should return the full content tree starting from the root, consisting of stripped down block object containing only its client ID and its inner blocks' client IDs", () => {

package/src/style.scss

@@ -61,6 +61,7 @@
 @use "./hooks/block-bindings.scss" as *;
 @use "./hooks/border.scss" as *;
 @use "./hooks/color.scss" as *;
+@use "./hooks/elements.scss" as *;
 @use "./hooks/dimensions.scss" as *;
 @use "./hooks/layout.scss" as *;
 @use "./hooks/spacing.scss" as *;

package/src/utils/block-bindings.ts

@@ -0,0 +1,51 @@
+type Binding = { source?: string };
+type Bindings = Record< string, Binding >;
+
+const DEFAULT_ATTRIBUTE = '__default';
+const PATTERN_OVERRIDES_SOURCE = 'core/pattern-overrides';
+
+/**
+ * Checks if the block has the `__default` binding for pattern overrides.
+ *
+ * @param bindings A block's bindings from the metadata attribute.
+ *
+ * @return Whether the block has the `__default` binding for pattern overrides.
+ */
+export function hasPatternOverridesDefaultBinding(
+	bindings: Bindings | undefined | null
+): bindings is Bindings {
+	return bindings?.[ DEFAULT_ATTRIBUTE ]?.source === PATTERN_OVERRIDES_SOURCE;
+}
+
+/**
+ * Returns the bindings with the `__default` binding for pattern overrides
+ * replaced with the full-set of supported attributes. e.g.:
+ *
+ * - bindings passed in: `{ __default: { source: 'core/pattern-overrides' } }`
+ * - bindings returned: `{ content: { source: 'core/pattern-overrides' } }`
+ *
+ * @param bindings            A block's bindings from the metadata attribute.
+ * @param supportedAttributes The block's attributes which are supported by block bindings.
+ *
+ * @return The bindings with default replaced for pattern overrides.
+ */
+export function replacePatternOverridesDefaultBinding(
+	bindings: Bindings | undefined | null,
+	supportedAttributes: string[]
+) {
+	// The `__default` binding currently only works for pattern overrides.
+	if ( ! hasPatternOverridesDefaultBinding( bindings ) ) {
+		return bindings;
+	}
+
+	const bindingsWithDefaults: Bindings = {};
+	for ( const attributeName of supportedAttributes ) {
+		// If the block has mixed binding sources, retain any non pattern override bindings.
+		const bindingSource = bindings[ attributeName ]
+			? bindings[ attributeName ]
+			: { source: PATTERN_OVERRIDES_SOURCE };
+		bindingsWithDefaults[ attributeName ] = bindingSource;
+	}
+
+	return bindingsWithDefaults;
+}

package/src/utils/color-values.ts

@@ -0,0 +1,63 @@
+/**
+ * Extracts the palette slug from a style value for any preset type, supporting
+ * both the user preset format and the theme CSS-variable format:
+ *
+ * - User format:  `var:preset|<type>|slug`
+ * - Theme format: `var(--wp--preset--<type>--slug)`
+ *
+ * Returns `undefined` for plain values, non-strings, or any other
+ * unrecognised format.
+ *
+ * @param rawValue Raw style value stored in the style object.
+ * @param type     Preset type, e.g. `'color'` or `'gradient'`.
+ * @return The palette slug, or undefined.
+ */
+export function extractPresetSlug(
+	rawValue: unknown,
+	type: 'color' | 'gradient'
+) {
+	if ( typeof rawValue !== 'string' ) {
+		return undefined;
+	}
+	const userPrefix = `var:preset|${ type }|`;
+	if ( rawValue.startsWith( userPrefix ) ) {
+		return rawValue.slice( userPrefix.length );
+	}
+	const cssVarPrefix = `--wp--preset--${ type }--`;
+	const themeFormatMatch = rawValue.match(
+		new RegExp( `^var\\(${ cssVarPrefix }([^)]+)\\)$` )
+	);
+	return themeFormatMatch?.[ 1 ];
+}
+
+/**
+ * Encodes a color value for storage in the style object.
+ *
+ * When a `slug` is provided it is used directly (the slug-based selection
+ * path). This is important because two palette entries can share the same
+ * hex value (e.g. two custom colors both set to `#e10000`); relying on a
+ * hex lookup alone would collapse them onto whichever entry appears first
+ * in the palette and silently discard the user's actual choice. Only when
+ * no slug is supplied does the function fall back to matching the hex value
+ * against the palette; if a match is found the slug is encoded, otherwise
+ * the raw value is stored as-is.
+ *
+ * Callers pass the flattened palette (`allColors`), typically computed once
+ * per render from the per-origin `colors` array.
+ *
+ * @param allColors  Flat array of `{ color, slug }` objects.
+ * @param colorValue Hex or CSS color string.
+ * @param slug       Optional palette slug from slug-aware selection.
+ * @return Encoded value suitable for the style object.
+ */
+export function encodeColorValueWithPalette(
+	allColors: { color: string; slug: string }[],
+	colorValue?: string,
+	slug?: string
+) {
+	if ( slug ) {
+		return 'var:preset|color|' + slug;
+	}
+	const colorObject = allColors.find( ( { color } ) => color === colorValue );
+	return colorObject ? 'var:preset|color|' + colorObject.slug : colorValue;
+}

package/src/utils/{dom.js → dom.ts}

@@ -5,12 +5,12 @@ const BLOCK_APPENDER_CLASS = '.block-editor-button-block-appender';
 /**
  * Returns true if two elements are contained within the same block.
  *
- * @param {Element} a First element.
- * @param {Element} b Second element.
+ * @param a First element.
+ * @param b Second element.
  *
- * @return {boolean} Whether elements are in the same block.
+ * @return Whether elements are in the same block.
  */
-export function isInSameBlock( a, b ) {
+export function isInSameBlock( a: Element, b: Element ) {
 	return a.closest( BLOCK_SELECTOR ) === b.closest( BLOCK_SELECTOR );
 }
 
@@ -18,13 +18,13 @@ export function isInSameBlock( a, b ) {
  * Returns true if an element is considered part of the block and not its inner
  * blocks or appender.
  *
- * @param {Element} blockElement Block container element.
- * @param {Element} element      Element.
+ * @param blockElement Block container element.
+ * @param element      Element.
  *
- * @return {boolean} Whether an element is considered part of the block and not
- *                   its inner blocks or appender.
+ * @return Whether an element is considered part of the block and not
+ *         its inner blocks or appender.
  */
-export function isInsideRootBlock( blockElement, element ) {
+export function isInsideRootBlock( blockElement: Element, element: Element ) {
 	const parentBlock = element.closest(
 		[ BLOCK_SELECTOR, APPENDER_SELECTOR, BLOCK_APPENDER_CLASS ].join( ',' )
 	);
@@ -34,12 +34,12 @@ export function isInsideRootBlock( blockElement, element ) {
 /**
  * Finds the block client ID given any DOM node inside the block.
  *
- * @param {Node?} node DOM node.
+ * @param node DOM node.
  *
- * @return {string|undefined} Client ID or undefined if the node is not part of
- *                            a block.
+ * @return Client ID or undefined if the node is not part of
+ *         a block.
  */
-export function getBlockClientId( node ) {
+export function getBlockClientId( node: Node | null ) {
 	while ( node && node.nodeType !== node.ELEMENT_NODE ) {
 		node = node.parentNode;
 	}
@@ -48,7 +48,7 @@ export function getBlockClientId( node ) {
 		return;
 	}
 
-	const elementNode = /** @type {Element} */ ( node );
+	const elementNode = node as Element;
 	const blockNode = elementNode.closest( BLOCK_SELECTOR );
 
 	if ( ! blockNode ) {
@@ -61,11 +61,11 @@ export function getBlockClientId( node ) {
 /**
  * Calculates the union of two rectangles.
  *
- * @param {DOMRect} rect1 First rectangle.
- * @param {DOMRect} rect2 Second rectangle.
- * @return {DOMRect} Union of the two rectangles.
+ * @param rect1 First rectangle.
+ * @param rect2 Second rectangle.
+ * @return Union of the two rectangles.
  */
-export function rectUnion( rect1, rect2 ) {
+export function rectUnion( rect1: DOMRect, rect2: DOMRect ) {
 	const left = Math.min( rect1.left, rect2.left );
 	const right = Math.max( rect1.right, rect2.right );
 	const bottom = Math.max( rect1.bottom, rect2.bottom );
@@ -77,10 +77,10 @@ export function rectUnion( rect1, rect2 ) {
 /**
  * Returns whether an element is visible.
  *
- * @param {Element} element Element.
- * @return {boolean} Whether the element is visible.
+ * @param element Element.
+ * @return Whether the element is visible.
  */
-export function isElementVisible( element ) {
+export function isElementVisible( element: Element ) {
 	const viewport = element.ownerDocument.defaultView;
 	if ( ! viewport ) {
 		return false;
@@ -121,10 +121,10 @@ export function isElementVisible( element ) {
 /**
  * Checks if the element is scrollable.
  *
- * @param {Element} element Element.
- * @return {boolean} True if the element is scrollable.
+ * @param element Element.
+ * @return True if the element is scrollable.
  */
-function isScrollable( element ) {
+function isScrollable( element: Element ) {
 	const style = window.getComputedStyle( element );
 	return (
 		style.overflowX === 'auto' ||
@@ -145,10 +145,10 @@ export const WITH_OVERFLOW_ELEMENT_BLOCKS = [ 'core/navigation' ];
  * The returned rect represents the full extent of the element and its visible
  * children, which may extend beyond the viewport.
  *
- * @param {Element} element Element.
- * @return {DOMRect} Bounding client rect of the element and its visible children.
+ * @param element Element.
+ * @return Bounding client rect of the element and its visible children.
  */
-export function getElementBounds( element ) {
+export function getElementBounds( element: Element ) {
 	const viewport = element.ownerDocument.defaultView;
 
 	if ( ! viewport ) {

package/src/utils/{fit-text-frontend.js → fit-text-frontend.ts}

@@ -14,14 +14,21 @@ import { store, getElement, getContext } from '@wordpress/interactivity';
  */
 import { optimizeFitText } from './fit-text-utils';
 
+interface FitTextContext {
+	fontSize?: number;
+}
+
 // Initialize via Interactivity API for client-side navigation
 store( 'core/fit-text', {
 	callbacks: {
 		init() {
-			const context = getContext();
-			const { ref } = getElement();
+			const context = getContext< FitTextContext >();
+			const { ref } = getElement() as { ref: HTMLElement | null };
 
-			const applyFontSize = ( fontSize ) => {
+			const applyFontSize = ( fontSize: number ) => {
+				if ( ! ref ) {
+					return;
+				}
 				if ( fontSize === 0 ) {
 					ref.style.fontSize = '';
 				} else {
@@ -33,7 +40,7 @@ store( 'core/fit-text', {
 			context.fontSize = optimizeFitText( ref, applyFontSize );
 
 			// Starts ResizeObserver to handle dynamic resizing.
-			if ( window.ResizeObserver && ref.parentElement ) {
+			if ( window.ResizeObserver && ref?.parentElement ) {
 				const resizeObserver = new window.ResizeObserver( () => {
 					context.fontSize = optimizeFitText( ref, applyFontSize );
 				} );
@@ -47,6 +54,7 @@ store( 'core/fit-text', {
 					}
 				};
 			}
+			return undefined;
 		},
 	},
 } );

package/src/utils/{fit-text-utils.js → fit-text-utils.ts}

@@ -3,14 +3,19 @@
  * Uses callback-based approach for maximum code reuse between editor and frontend.
  */
 
+type ApplyFontSize = ( size: number ) => void;
+
 /**
  * Find optimal font size using simple binary search between 0-2400px.
  *
- * @param {HTMLElement} textElement   The text element
- * @param {Function}    applyFontSize Function that receives font size in pixels
- * @return {number} Optimal font size
+ * @param textElement   The text element
+ * @param applyFontSize Function that receives font size in pixels
+ * @return Optimal font size
  */
-function findOptimalFontSize( textElement, applyFontSize ) {
+function findOptimalFontSize(
+	textElement: HTMLElement,
+	applyFontSize: ApplyFontSize
+) {
 	const alreadyHasScrollableHeight =
 		textElement.scrollHeight > textElement.clientHeight;
 	let minSize = 0;
@@ -85,10 +90,13 @@ function findOptimalFontSize( textElement, applyFontSize ) {
  * Complete fit text optimization for a single text element.
  * Handles the full flow using callbacks for font size application.
  *
- * @param {HTMLElement} textElement   The text element (paragraph, heading, etc.)
- * @param {Function}    applyFontSize Function that receives font size in pixels (0 to clear, >0 to apply)
+ * @param textElement   The text element (paragraph, heading, etc.)
+ * @param applyFontSize Function that receives font size in pixels (0 to clear, >0 to apply)
  */
-export function optimizeFitText( textElement, applyFontSize ) {
+export function optimizeFitText(
+	textElement: HTMLElement | null,
+	applyFontSize: ApplyFontSize
+) {
 	if ( ! textElement ) {
 		return;
 	}

package/src/utils/{format-font-style.js → format-font-style.ts}

@@ -3,13 +3,20 @@
  */
 import { _x } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import type { FormattedFont } from './types';
+
 /**
  * Formats font styles to human readable names.
  *
- * @param {string} fontStyle font style string
- * @return {Object} new object with formatted font style
+ * @param fontStyle font style string
+ * @return new object with formatted font style
  */
-export function formatFontStyle( fontStyle ) {
+export function formatFontStyle(
+	fontStyle: FormattedFont | string | undefined
+): FormattedFont {
 	if ( ! fontStyle ) {
 		return {};
 	}

package/src/utils/{format-font-weight.js → format-font-weight.ts}

@@ -3,13 +3,20 @@
  */
 import { _x } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import type { FormattedFont } from './types';
+
 /**
  * Formats font weights to human readable names.
  *
- * @param {string} fontWeight font weight string
- * @return {Object} new object with formatted font weight
+ * @param fontWeight font weight string
+ * @return new object with formatted font weight
  */
-export function formatFontWeight( fontWeight ) {
+export function formatFontWeight(
+	fontWeight: FormattedFont | string | undefined
+): FormattedFont {
 	if ( ! fontWeight ) {
 		return {};
 	}

package/src/utils/{get-editor-region.js → get-editor-region.ts}

@@ -2,23 +2,27 @@
  * Gets the editor region for a given editor canvas element or
  * returns the passed element if no region is found
  *
- * @param { Object } editor The editor canvas element.
- * @return { Object } The editor region or given editor element
+ * @param editor The editor canvas element.
+ * @return The editor region or given editor element
  */
-export default function getEditorRegion( editor ) {
+export default function getEditorRegion( editor: Element | null | undefined ) {
 	if ( ! editor ) {
 		return null;
 	}
 
 	// If there are multiple editors, we need to find the iframe that contains our contentRef to make sure
 	// we're focusing the region that contains this editor.
-	const editorCanvas =
+	const editorCanvas: Element =
 		Array.from(
-			document.querySelectorAll( 'iframe[name="editor-canvas"]' ).values()
+			document
+				.querySelectorAll< HTMLIFrameElement >(
+					'iframe[name="editor-canvas"]'
+				)
+				.values()
 		).find( ( iframe ) => {
 			// Find the iframe that contains our contentRef
 			const iframeDocument =
-				iframe.contentDocument || iframe.contentWindow.document;
+				iframe.contentDocument || iframe.contentWindow!.document;
 
 			return iframeDocument === editor.ownerDocument;
 		} ) ?? editor;

package/src/utils/{get-font-styles-and-weights.js → get-font-styles-and-weights.ts}

@@ -8,6 +8,11 @@ import { _x, sprintf } from '@wordpress/i18n';
  */
 import { formatFontStyle } from './format-font-style';
 import { formatFontWeight } from './format-font-weight';
+import type {
+	FontFamilyFace,
+	FormattedFont,
+	CombinedStyleAndWeightOption,
+} from './types';
 
 const FONT_STYLES = [
 	{
@@ -67,13 +72,15 @@ const FONT_WEIGHTS = [
  * Builds a list of font style and weight options based on font family faces.
  * Defaults to the standard font styles and weights if no font family faces are provided.
  *
- * @param {Array} fontFamilyFaces font family faces array
- * @return {Object} new object with combined and separated font style and weight properties
+ * @param fontFamilyFaces font family faces array
+ * @return new object with combined and separated font style and weight properties
  */
-export function getFontStylesAndWeights( fontFamilyFaces ) {
-	let fontStyles = [];
-	let fontWeights = [];
-	const combinedStyleAndWeightOptions = [];
+export function getFontStylesAndWeights(
+	fontFamilyFaces: FontFamilyFace[] | undefined
+) {
+	let fontStyles: FormattedFont[] = [];
+	let fontWeights: FormattedFont[] = [];
+	const combinedStyleAndWeightOptions: CombinedStyleAndWeightOption[] = [];
 	const isSystemFont = ! fontFamilyFaces || fontFamilyFaces?.length === 0;
 	let isVariableFont = false;
 
@@ -86,13 +93,10 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
 			isVariableFont = true;
 
 			// Find font weight start and end values.
-			let [ startValue, endValue ] = face.fontWeight.split( ' ' );
-			startValue = parseInt( startValue.slice( 0, 1 ) );
-			if ( endValue === '1000' ) {
-				endValue = 10;
-			} else {
-				endValue = parseInt( endValue.slice( 0, 1 ) );
-			}
+			const [ startStr, endStr ] = face.fontWeight.split( ' ' );
+			const startValue = parseInt( startStr.slice( 0, 1 ) );
+			const endValue =
+				endStr === '1000' ? 10 : parseInt( endStr.slice( 0, 1 ) );
 
 			// Create font weight options for available variable weights.
 			for ( let i = startValue; i <= endValue; i++ ) {
@@ -140,7 +144,7 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
 	} );
 
 	// If there is no font weight of 600 or above, then include faux bold as an option.
-	if ( ! fontWeights.some( ( weight ) => weight.value >= '600' ) ) {
+	if ( ! fontWeights.some( ( weight ) => ( weight.value ?? '' ) >= '600' ) ) {
 		fontWeights.push( {
 			name: _x( 'Bold', 'font weight' ),
 			value: '700',
@@ -174,13 +178,13 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
 					: sprintf(
 							/* translators: 1: Font weight name. 2: Font style name. */
 							_x( '%1$s %2$s', 'font' ),
-							weightName,
-							styleName
+							weightName ?? '',
+							styleName ?? ''
 					  );
 
 			combinedStyleAndWeightOptions.push( {
 				key: `${ styleValue }-${ weightValue }`,
-				name: optionName,
+				name: optionName ?? '',
 				style: {
 					fontStyle: styleValue,
 					fontWeight: weightValue,