@wordpress/block-editor 12.11.1 → 12.12.2-next.f8d8eceb.0

package/src/components/use-settings/index.js

@@ -0,0 +1,272 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE,
+	hasBlockSupport,
+} from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
+import { useMemo } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockEditContext } from '../block-edit';
+import { store as blockEditorStore } from '../../store';
+import { getValueFromObjectPath } from '../../utils/object';
+
+const blockedPaths = [
+	'color',
+	'border',
+	'dimensions',
+	'typography',
+	'spacing',
+];
+
+const deprecatedFlags = {
+	'color.palette': ( settings ) => settings.colors,
+	'color.gradients': ( settings ) => settings.gradients,
+	'color.custom': ( settings ) =>
+		settings.disableCustomColors === undefined
+			? undefined
+			: ! settings.disableCustomColors,
+	'color.customGradient': ( settings ) =>
+		settings.disableCustomGradients === undefined
+			? undefined
+			: ! settings.disableCustomGradients,
+	'typography.fontSizes': ( settings ) => settings.fontSizes,
+	'typography.customFontSize': ( settings ) =>
+		settings.disableCustomFontSizes === undefined
+			? undefined
+			: ! settings.disableCustomFontSizes,
+	'typography.lineHeight': ( settings ) => settings.enableCustomLineHeight,
+	'spacing.units': ( settings ) => {
+		if ( settings.enableCustomUnits === undefined ) {
+			return;
+		}
+
+		if ( settings.enableCustomUnits === true ) {
+			return [ 'px', 'em', 'rem', 'vh', 'vw', '%' ];
+		}
+
+		return settings.enableCustomUnits;
+	},
+	'spacing.padding': ( settings ) => settings.enableCustomSpacing,
+};
+
+const prefixedFlags = {
+	/*
+	 * These were only available in the plugin
+	 * and can be removed when the minimum WordPress version
+	 * for the plugin is 5.9.
+	 */
+	'border.customColor': 'border.color',
+	'border.customStyle': 'border.style',
+	'border.customWidth': 'border.width',
+	'typography.customFontStyle': 'typography.fontStyle',
+	'typography.customFontWeight': 'typography.fontWeight',
+	'typography.customLetterSpacing': 'typography.letterSpacing',
+	'typography.customTextDecorations': 'typography.textDecoration',
+	'typography.customTextTransforms': 'typography.textTransform',
+	/*
+	 * These were part of WordPress 5.8 and we need to keep them.
+	 */
+	'border.customRadius': 'border.radius',
+	'spacing.customMargin': 'spacing.margin',
+	'spacing.customPadding': 'spacing.padding',
+	'typography.customLineHeight': 'typography.lineHeight',
+};
+
+/**
+ * Remove `custom` prefixes for flags that did not land in 5.8.
+ *
+ * This provides continued support for `custom` prefixed properties. It will
+ * be removed once third party devs have had sufficient time to update themes,
+ * plugins, etc.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/34485
+ *
+ * @param {string} path Path to desired value in settings.
+ * @return {string}     The value for defined setting.
+ */
+const removeCustomPrefixes = ( path ) => {
+	return prefixedFlags[ path ] || path;
+};
+
+/**
+ * For settings like `color.palette`, which have a value that is an object
+ * with `default`, `theme`, `custom`, with field values that are arrays of
+ * items, merge these three arrays into one and return it. The calculation
+ * is memoized so that identical input values produce identical output.
+ * @param {Object} value Object to merge
+ * @return {Array} Array of merged items
+ */
+function mergeOrigins( value ) {
+	let result = mergeCache.get( value );
+	if ( ! result ) {
+		result = [ 'default', 'theme', 'custom' ].flatMap(
+			( key ) => value[ key ] ?? []
+		);
+		mergeCache.set( value, result );
+	}
+	return result;
+}
+const mergeCache = new WeakMap();
+
+/**
+ * Hook that retrieves the given settings for the block instance in use.
+ *
+ * It looks up the settings first in the block instance hierarchy.
+ * If none are found, it'll look them up in the block editor settings.
+ *
+ * @param {string[]} paths The paths to the settings.
+ * @return {any[]} Returns the values defined for the settings.
+ * @example
+ * ```js
+ * const [ fixed, sticky ] = useSettings( 'position.fixed', 'position.sticky' );
+ * ```
+ */
+export function useSettings( ...paths ) {
+	const { name: blockName, clientId = null } = useBlockEditContext();
+
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	paths = useMemo( () => paths, paths );
+
+	return useSelect(
+		( select ) => {
+			const candidates = clientId
+				? [
+						clientId,
+						...select( blockEditorStore ).getBlockParents(
+							clientId,
+							/* ascending */ true
+						),
+				  ].filter( ( candidateClientId ) => {
+						const candidateBlockName =
+							select( blockEditorStore ).getBlockName(
+								candidateClientId
+							);
+						return hasBlockSupport(
+							candidateBlockName,
+							'__experimentalSettings',
+							false
+						);
+				  } )
+				: [];
+
+			return paths.map( ( path ) => {
+				if ( blockedPaths.includes( path ) ) {
+					// eslint-disable-next-line no-console
+					console.warn(
+						'Top level useSetting paths are disabled. Please use a subpath to query the information needed.'
+					);
+					return undefined;
+				}
+
+				// 0. Allow third parties to filter the block's settings at runtime.
+				let result = applyFilters(
+					'blockEditor.useSetting.before',
+					undefined,
+					path,
+					clientId,
+					blockName
+				);
+
+				if ( undefined !== result ) {
+					return result;
+				}
+
+				const normalizedPath = removeCustomPrefixes( path );
+
+				// 1. Take settings from the block instance or its ancestors.
+				// Start from the current block and work our way up the ancestors.
+				for ( const candidateClientId of candidates ) {
+					const candidateAtts =
+						select( blockEditorStore ).getBlockAttributes(
+							candidateClientId
+						);
+					result =
+						getValueFromObjectPath(
+							candidateAtts.settings?.blocks?.[ blockName ],
+							normalizedPath
+						) ??
+						getValueFromObjectPath(
+							candidateAtts.settings,
+							normalizedPath
+						);
+					if ( result !== undefined ) {
+						// Stop the search for more distant ancestors and move on.
+						break;
+					}
+				}
+
+				// 2. Fall back to the settings from the block editor store (__experimentalFeatures).
+				const settings = select( blockEditorStore ).getSettings();
+				if ( result === undefined && blockName ) {
+					result = getValueFromObjectPath(
+						settings.__experimentalFeatures?.blocks?.[ blockName ],
+						normalizedPath
+					);
+				}
+
+				if ( result === undefined ) {
+					result = getValueFromObjectPath(
+						settings.__experimentalFeatures,
+						normalizedPath
+					);
+				}
+
+				// Return if the setting was found in either the block instance or the store.
+				if ( result !== undefined ) {
+					if ( PATHS_WITH_MERGE[ normalizedPath ] ) {
+						return mergeOrigins( result );
+					}
+					return result;
+				}
+
+				// 3. Otherwise, use deprecated settings.
+				const deprecatedSettingsValue =
+					deprecatedFlags[ normalizedPath ]?.( settings );
+				if ( deprecatedSettingsValue !== undefined ) {
+					return deprecatedSettingsValue;
+				}
+
+				// 4. Fallback for typography.dropCap:
+				// This is only necessary to support typography.dropCap.
+				// when __experimentalFeatures are not present (core without plugin).
+				// To remove when __experimentalFeatures are ported to core.
+				return normalizedPath === 'typography.dropCap'
+					? true
+					: undefined;
+			} );
+		},
+		[ blockName, clientId, paths ]
+	);
+}
+
+/**
+ * Hook that retrieves the given setting for the block instance in use.
+ *
+ * It looks up the setting first in the block instance hierarchy.
+ * If none is found, it'll look it up in the block editor settings.
+ *
+ * @param {string} path The path to the setting.
+ * @return {any} Returns the value defined for the setting.
+ * @deprecated 6.4.0 Use useSettings instead.
+ * @example
+ * ```js
+ * const isEnabled = useSetting( 'typography.dropCap' );
+ * ```
+ */
+export function useSetting( path ) {
+	deprecated( 'wp.blockEditor.useSetting', {
+		since: '6.4',
+		alternative: 'wp.blockEditor.useSettings',
+		note: 'The new useSettings function can retrieve multiple settings at once, with better performance.',
+	} );
+
+	const [ value ] = useSettings( path );
+	return value;
+}

package/src/components/{use-setting → use-settings}/test/index.js

@@ -1,16 +1,22 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
 /**
  * WordPress dependencies
  */
 import { addFilter, removeFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import useSetting from '..';
+import { useSettings, useSetting } from '..';
 import * as BlockEditContext from '../../block-edit/context';
 
-// Mock useSelect() functions used by useSetting()
+// Mock useSelect() functions used by useSettings()
 jest.mock( '@wordpress/data/src/components/use-select' );
 
 let selectMock = {};
@@ -38,7 +44,19 @@ const mockCurrentBlockContext = (
 	);
 };
 
-describe( 'useSetting', () => {
+function runHook( hookCb ) {
+	let storedResult;
+	function TestHook() {
+		const result = hookCb();
+		useEffect( () => {
+			storedResult = result;
+		}, [ result ] );
+	}
+	render( <TestHook /> );
+	return storedResult;
+}
+
+describe( 'useSettings', () => {
 	beforeEach( () => {
 		setupSelectMock();
 		mockCurrentBlockContext();
@@ -59,7 +77,8 @@ describe( 'useSetting', () => {
 			name: 'core/test-block',
 		} );
 
-		expect( useSetting( 'layout.contentSize' ) ).toBe( '840px' );
+		const result = runHook( () => useSettings( 'layout.contentSize' ) );
+		expect( result ).toEqual( [ '840px' ] );
 	} );
 
 	it( 'uses blockEditor.useSetting.before hook override', () => {
@@ -89,11 +108,34 @@ describe( 'useSetting', () => {
 			}
 		);
 
-		expect( useSetting( 'layout.contentSize' ) ).toBe( '960px' );
+		const result = runHook( () => useSettings( 'layout.contentSize' ) );
+		expect( result ).toEqual( [ '960px' ] );
 
 		removeFilter(
 			'blockEditor.useSetting.before',
 			'test/useSetting.before'
 		);
 	} );
+
+	it( 'supports also the deprecated useSetting function', () => {
+		mockSettings( {
+			blocks: {
+				'core/test-block': {
+					layout: {
+						contentSize: '840px',
+					},
+				},
+			},
+		} );
+
+		mockCurrentBlockContext( {
+			name: 'core/test-block',
+		} );
+
+		const result = runHook( () => useSetting( 'layout.contentSize' ) );
+		expect( result ).toBe( '840px' );
+		expect( console ).toHaveWarnedWith(
+			'wp.blockEditor.useSetting is deprecated since version 6.4. Please use wp.blockEditor.useSettings instead.'
+		);
+	} );
 } );

package/src/components/writing-flow/use-arrow-nav.js

@@ -114,6 +114,10 @@ export function getClosestTabbable(
 	}
 
 	function isTabCandidate( node ) {
+		if ( node.closest( '[inert]' ) ) {
+			return;
+		}
+
 		// Skip if there's only one child that is content editable (and thus a
 		// better candidate).
 		if (

package/src/hooks/align.js

@@ -108,6 +108,50 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
+function BlockEditAlignmentToolbarControls( {
+	blockName,
+	attributes,
+	setAttributes,
+} ) {
+	// Compute the block valid alignments by taking into account,
+	// if the theme supports wide alignments or not and the layout's
+	// availble alignments. We do that for conditionally rendering
+	// Slot.
+	const blockAllowedAlignments = getValidAlignments(
+		getBlockSupport( blockName, 'align' ),
+		hasBlockSupport( blockName, 'alignWide', true )
+	);
+
+	const validAlignments = useAvailableAlignments(
+		blockAllowedAlignments
+	).map( ( { name } ) => name );
+	const blockEditingMode = useBlockEditingMode();
+	if ( ! validAlignments.length || blockEditingMode !== 'default' ) {
+		return null;
+	}
+
+	const updateAlignment = ( nextAlign ) => {
+		if ( ! nextAlign ) {
+			const blockType = getBlockType( blockName );
+			const blockDefaultAlign = blockType?.attributes?.align?.default;
+			if ( blockDefaultAlign ) {
+				nextAlign = '';
+			}
+		}
+		setAttributes( { align: nextAlign } );
+	};
+
+	return (
+		<BlockControls group="block" __experimentalShareWithChildBlocks>
+			<BlockAlignmentControl
+				value={ attributes.align }
+				onChange={ updateAlignment }
+				controls={ validAlignments }
+			/>
+		</BlockControls>
+	);
+}
+
 /**
  * Override the default edit UI to include new toolbar controls for block
  * alignment, if block defines support.
@@ -118,52 +162,45 @@ export function addAttribute( settings ) {
  */
 export const withToolbarControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const blockEdit = <BlockEdit key="edit" { ...props } />;
-		const { name: blockName } = props;
-		// Compute the block valid alignments by taking into account,
-		// if the theme supports wide alignments or not and the layout's
-		// availble alignments. We do that for conditionally rendering
-		// Slot.
-		const blockAllowedAlignments = getValidAlignments(
-			getBlockSupport( blockName, 'align' ),
-			hasBlockSupport( blockName, 'alignWide', true )
+		const hasAlignmentSupport = hasBlockSupport(
+			props.name,
+			'align',
+			false
 		);
 
-		const validAlignments = useAvailableAlignments(
-			blockAllowedAlignments
-		).map( ( { name } ) => name );
-		const blockEditingMode = useBlockEditingMode();
-		if ( ! validAlignments.length || blockEditingMode !== 'default' ) {
-			return blockEdit;
-		}
-
-		const updateAlignment = ( nextAlign ) => {
-			if ( ! nextAlign ) {
-				const blockType = getBlockType( props.name );
-				const blockDefaultAlign = blockType?.attributes?.align?.default;
-				if ( blockDefaultAlign ) {
-					nextAlign = '';
-				}
-			}
-			props.setAttributes( { align: nextAlign } );
-		};
-
 		return (
 			<>
-				<BlockControls group="block" __experimentalShareWithChildBlocks>
-					<BlockAlignmentControl
-						value={ props.attributes.align }
-						onChange={ updateAlignment }
-						controls={ validAlignments }
+				{ hasAlignmentSupport && (
+					<BlockEditAlignmentToolbarControls
+						blockName={ props.name }
+						attributes={ props.attributes }
+						setAttributes={ props.setAttributes }
 					/>
-				</BlockControls>
-				{ blockEdit }
+				) }
+				<BlockEdit key="edit" { ...props } />
 			</>
 		);
 	},
 	'withToolbarControls'
 );
 
+function BlockListBlockWithDataAlign( { block: BlockListBlock, props } ) {
+	const { name, attributes } = props;
+	const { align } = attributes;
+	const blockAllowedAlignments = getValidAlignments(
+		getBlockSupport( name, 'align' ),
+		hasBlockSupport( name, 'alignWide', true )
+	);
+	const validAlignments = useAvailableAlignments( blockAllowedAlignments );
+
+	let wrapperProps = props.wrapperProps;
+	if ( validAlignments.some( ( alignment ) => alignment.name === align ) ) {
+		wrapperProps = { ...wrapperProps, 'data-align': align };
+	}
+
+	return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
+}
+
 /**
  * Override the default block element to add alignment wrapper props.
  *
@@ -173,30 +210,18 @@ export const withToolbarControls = createHigherOrderComponent(
  */
 export const withDataAlign = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const { name, attributes } = props;
-		const { align } = attributes;
-		const blockAllowedAlignments = getValidAlignments(
-			getBlockSupport( name, 'align' ),
-			hasBlockSupport( name, 'alignWide', true )
-		);
-		const validAlignments = useAvailableAlignments(
-			blockAllowedAlignments
-		);
-
 		// If an alignment is not assigned, there's no need to go through the
 		// effort to validate or assign its value.
-		if ( align === undefined ) {
+		if ( props.attributes.align === undefined ) {
 			return <BlockListBlock { ...props } />;
 		}
 
-		let wrapperProps = props.wrapperProps;
-		if (
-			validAlignments.some( ( alignment ) => alignment.name === align )
-		) {
-			wrapperProps = { ...wrapperProps, 'data-align': align };
-		}
-
-		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
+		return (
+			<BlockListBlockWithDataAlign
+				block={ BlockListBlock }
+				props={ props }
+			/>
+		);
 	},
 	'withDataAlign'
 );

package/src/hooks/anchor.js

@@ -52,6 +52,69 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
+function BlockEditAnchorControl( { blockName, attributes, setAttributes } ) {
+	const blockEditingMode = useBlockEditingMode();
+
+	const isWeb = Platform.OS === 'web';
+	const textControl = (
+		<TextControl
+			__nextHasNoMarginBottom
+			className="html-anchor-control"
+			label={ __( 'HTML anchor' ) }
+			help={
+				<>
+					{ __(
+						'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'
+					) }
+
+					{ isWeb && (
+						<ExternalLink
+							href={ __(
+								'https://wordpress.org/documentation/article/page-jumps/'
+							) }
+						>
+							{ __( 'Learn more about anchors' ) }
+						</ExternalLink>
+					) }
+				</>
+			}
+			value={ attributes.anchor || '' }
+			placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
+			onChange={ ( nextValue ) => {
+				nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
+				setAttributes( {
+					anchor: nextValue,
+				} );
+			} }
+			autoCapitalize="none"
+			autoComplete="off"
+		/>
+	);
+
+	return (
+		<>
+			{ isWeb && blockEditingMode === 'default' && (
+				<InspectorControls group="advanced">
+					{ textControl }
+				</InspectorControls>
+			) }
+			{ /*
+			 * We plan to remove scoping anchors to 'core/heading' to support
+			 * anchors for all eligble blocks. Additionally we plan to explore
+			 * leveraging InspectorAdvancedControls instead of a custom
+			 * PanelBody title. https://github.com/WordPress/gutenberg/issues/28363
+			 */ }
+			{ ! isWeb && blockName === 'core/heading' && (
+				<InspectorControls>
+					<PanelBody title={ __( 'Heading settings' ) }>
+						{ textControl }
+					</PanelBody>
+				</InspectorControls>
+			) }
+		</>
+	);
+}
+
 /**
  * Override the default edit UI to include a new block inspector control for
  * assigning the anchor ID, if block supports anchor.
@@ -63,72 +126,19 @@ export function addAttribute( settings ) {
 export const withInspectorControl = createHigherOrderComponent(
 	( BlockEdit ) => {
 		return ( props ) => {
-			const hasAnchor = hasBlockSupport( props.name, 'anchor' );
-			const blockEditingMode = useBlockEditingMode();
-
-			if ( hasAnchor && props.isSelected ) {
-				const isWeb = Platform.OS === 'web';
-				const textControl = (
-					<TextControl
-						__nextHasNoMarginBottom
-						className="html-anchor-control"
-						label={ __( 'HTML anchor' ) }
-						help={
-							<>
-								{ __(
-									'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'
-								) }
-
-								{ isWeb && (
-									<ExternalLink
-										href={ __(
-											'https://wordpress.org/documentation/article/page-jumps/'
-										) }
-									>
-										{ __( 'Learn more about anchors' ) }
-									</ExternalLink>
-								) }
-							</>
-						}
-						value={ props.attributes.anchor || '' }
-						placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
-						onChange={ ( nextValue ) => {
-							nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
-							props.setAttributes( {
-								anchor: nextValue,
-							} );
-						} }
-						autoCapitalize="none"
-						autoComplete="off"
-					/>
-				);
-
-				return (
-					<>
-						<BlockEdit { ...props } />
-						{ isWeb && blockEditingMode === 'default' && (
-							<InspectorControls group="advanced">
-								{ textControl }
-							</InspectorControls>
+			return (
+				<>
+					<BlockEdit { ...props } />
+					{ props.isSelected &&
+						hasBlockSupport( props.name, 'anchor' ) && (
+							<BlockEditAnchorControl
+								blockName={ props.name }
+								attributes={ props.attributes }
+								setAttributes={ props.setAttributes }
+							/>
 						) }
-						{ /*
-						 * We plan to remove scoping anchors to 'core/heading' to support
-						 * anchors for all eligble blocks. Additionally we plan to explore
-						 * leveraging InspectorAdvancedControls instead of a custom
-						 * PanelBody title. https://github.com/WordPress/gutenberg/issues/28363
-						 */ }
-						{ ! isWeb && props.name === 'core/heading' && (
-							<InspectorControls>
-								<PanelBody title={ __( 'Heading settings' ) }>
-									{ textControl }
-								</PanelBody>
-							</InspectorControls>
-						) }
-					</>
-				);
-			}
-
-			return <BlockEdit { ...props } />;
+				</>
+			);
 		};
 	},
 	'withInspectorControl'