@wordpress/block-editor 12.21.0 → 12.23.0

package/src/hooks/layout-child.js

@@ -17,7 +17,14 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 		return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
 	} );
 	const layout = style?.layout ?? {};
-	const { selfStretch, flexSize, columnSpan, rowSpan } = layout;
+	const {
+		selfStretch,
+		flexSize,
+		columnStart,
+		rowStart,
+		columnSpan,
+		rowSpan,
+	} = layout;
 	const parentLayout = useLayout() || {};
 	const { columnCount, minimumColumnWidth } = parentLayout;
 	const id = useInstanceId( useBlockPropsChildLayoutStyles );
@@ -34,6 +41,14 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 			css = `${ selector } {
 				flex-grow: 1;
 			}`;
+		} else if ( columnStart && columnSpan ) {
+			css = `${ selector } {
+				grid-column: ${ columnStart } / span ${ columnSpan };
+			}`;
+		} else if ( columnStart ) {
+			css = `${ selector } {
+				grid-column: ${ columnStart };
+			}`;
 		} else if ( columnSpan ) {
 			css = `${ selector } {
 				grid-column: span ${ columnSpan };
@@ -44,9 +59,20 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 		 * columnCount is set, the grid is responsive so a
 		 * container query is needed for the span to resize.
 		 */
-		if ( columnSpan && ( minimumColumnWidth || ! columnCount ) ) {
-			// Calculate the container query value.
-			const columnSpanNumber = parseInt( columnSpan );
+		if (
+			( columnSpan || columnStart ) &&
+			( minimumColumnWidth || ! columnCount )
+		) {
+			// Check if columnSpan and columnStart are numbers so Math.max doesn't break.
+			const columnSpanNumber = columnSpan ? parseInt( columnSpan ) : null;
+			const columnStartNumber = columnStart
+				? parseInt( columnStart )
+				: null;
+			const highestNumber = Math.max(
+				columnSpanNumber,
+				columnStartNumber
+			);
+
 			let parentColumnValue = parseFloat( minimumColumnWidth );
 			/**
 			 * 12rem is the default minimumColumnWidth value.
@@ -70,16 +96,26 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 
 			const defaultGapValue = parentColumnUnit === 'px' ? 24 : 1.5;
 			const containerQueryValue =
-				columnSpanNumber * parentColumnValue +
-				( columnSpanNumber - 1 ) * defaultGapValue;
+				highestNumber * parentColumnValue +
+				( highestNumber - 1 ) * defaultGapValue;
+			// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.
+			const gridColumnValue = columnSpan ? '1/-1' : 'auto';
 
 			css += `@container (max-width: ${ containerQueryValue }${ parentColumnUnit }) {
 				${ selector } {
-					grid-column: 1 / -1;
+					grid-column: ${ gridColumnValue };
 				}
 			}`;
 		}
-		if ( rowSpan ) {
+		if ( rowStart && rowSpan ) {
+			css += `${ selector } {
+				grid-row: ${ rowStart } / span ${ rowSpan };
+			}`;
+		} else if ( rowStart ) {
+			css += `${ selector } {
+				grid-row: ${ rowStart };
+			}`;
+		} else if ( rowSpan ) {
 			css += `${ selector } {
 				grid-row: span ${ rowSpan };
 			}`;

package/src/hooks/layout.js

@@ -125,14 +125,13 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
 	const fullLayoutType = getLayoutType( usedLayout?.type || 'default' );
 	const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGapSupport !== null;
-	const css = fullLayoutType?.getLayoutStyle?.( {
+	return fullLayoutType?.getLayoutStyle?.( {
 		blockName,
 		selector,
 		layout,
 		style,
 		hasBlockGapSupport,
 	} );
-	return css;
 }
 
 function LayoutPanelPure( {
@@ -144,8 +143,6 @@ function LayoutPanelPure( {
 	const settings = useBlockSettings( blockName );
 	// Block settings come from theme.json under settings.[blockName].
 	const { layout: layoutSettings } = settings;
-	// Layout comes from block attributes.
-	const [ defaultThemeLayout ] = useSettings( 'layout' );
 	const { themeSupportsLayout } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return {
@@ -179,36 +176,43 @@ function LayoutPanelPure( {
 		return null;
 	}
 
+	/*
+	 * Try to find the layout type from either the
+	 * block's layout settings or any saved layout config.
+	 */
+	const blockSupportAndLayout = {
+		...layoutBlockSupport,
+		...layout,
+	};
+	const { type, default: { type: defaultType = 'default' } = {} } =
+		blockSupportAndLayout;
+	const blockLayoutType = type || defaultType;
+
 	// Only show the inherit toggle if it's supported,
-	// a default theme layout is set (e.g. one that provides `contentSize` and/or `wideSize` values),
 	// and either the default / flow or the constrained layout type is in use, as the toggle switches from one to the other.
 	const showInheritToggle = !! (
 		allowInheriting &&
-		!! defaultThemeLayout &&
-		( ! layout?.type ||
-			layout?.type === 'default' ||
-			layout?.type === 'constrained' ||
-			layout?.inherit )
+		( ! blockLayoutType ||
+			blockLayoutType === 'default' ||
+			blockLayoutType === 'constrained' ||
+			blockSupportAndLayout.inherit )
 	);
 
 	const usedLayout = layout || defaultBlockLayout || {};
-	const {
-		inherit = false,
-		type = 'default',
-		contentSize = null,
-	} = usedLayout;
+	const { inherit = false, contentSize = null } = usedLayout;
 	/**
 	 * `themeSupportsLayout` is only relevant to the `default/flow` or
 	 * `constrained` layouts and it should not be taken into account when other
 	 * `layout` types are used.
 	 */
 	if (
-		( type === 'default' || type === 'constrained' ) &&
+		( blockLayoutType === 'default' ||
+			blockLayoutType === 'constrained' ) &&
 		! themeSupportsLayout
 	) {
 		return null;
 	}
-	const layoutType = getLayoutType( type );
+	const layoutType = getLayoutType( blockLayoutType );
 	const constrainedType = getLayoutType( 'constrained' );
 	const displayControlsForLegacyLayouts =
 		! usedLayout.type && ( contentSize || inherit );
@@ -261,7 +265,7 @@ function LayoutPanelPure( {
 
 					{ ! inherit && allowSwitching && (
 						<LayoutTypeSwitcher
-							type={ type }
+							type={ blockLayoutType }
 							onChange={ onChangeType }
 						/>
 					) }

package/src/hooks/position.js

@@ -152,7 +152,7 @@ export function hasPositionValue( props ) {
  * @return {boolean} Whether or not the block is set to a sticky or fixed position.
  */
 export function hasStickyOrFixedPositionValue( attributes ) {
-	const positionType = attributes.style?.position?.type;
+	const positionType = attributes?.style?.position?.type;
 	return positionType === 'sticky' || positionType === 'fixed';
 }
 

package/src/hooks/test/__snapshots__/anchor.native.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`anchor should set the ID attribute on the block 1`] = `
+"<!-- wp:paragraph -->
+<p id="my-anchor"></p>
+<!-- /wp:paragraph -->"
+`;

package/src/hooks/test/anchor.native.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	changeTextOfTextInput,
+	getEditorHtml,
+	initializeEditor,
+	openBlockSettings,
+	screen,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks( [ 'core/paragraph' ] );
+
+describe( 'anchor', () => {
+	it( 'should set the ID attribute on the block', async () => {
+		// Arrange
+		await initializeEditor();
+		const block = await addBlock( screen, 'Paragraph' );
+		await openBlockSettings( screen, block );
+
+		// Act
+		await changeTextOfTextInput(
+			await screen.getByPlaceholderText( 'Add an anchor' ),
+			'my-anchor'
+		);
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );

package/src/hooks/use-zoom-out.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+
+/**
+ * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+ */
+export function useZoomOut() {
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const { mode } = useSelect( ( select ) => {
+		return {
+			mode: select( blockEditorStore ).__unstableGetEditorMode(),
+		};
+	}, [] );
+
+	// Intentionality left without any dependency.
+	// This effect should only run when the component is rendered and unmounted.
+	// The effect opens the zoom-out view if it is not open before when applying a style variation.
+	useEffect( () => {
+		if ( mode !== 'zoom-out' ) {
+			__unstableSetEditorMode( 'zoom-out' );
+			return () => {
+				// Revert to original mode
+				__unstableSetEditorMode( mode );
+			};
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+}

package/src/index.js

@@ -13,6 +13,7 @@ export {
 	getGapCSSValue as __experimentalGetGapCSSValue,
 	getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles,
 	useCachedTruthy,
+	useZoomOut,
 } from './hooks';
 export * from './components';
 export * from './elements';

package/src/private-apis.js

@@ -8,6 +8,11 @@ import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { default as PrivateQuickInserter } from './components/inserter/quick-inserter';
+import {
+	extractWords,
+	getNormalizedSearchTerms,
+	normalizeString,
+} from './components/inserter/search-items';
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
 import { useShowBlockTools } from './components/block-tools/use-show-block-tools';
@@ -26,7 +31,10 @@ import { usesContextKey } from './components/rich-text/format-edit';
 import { ExperimentalBlockCanvas } from './components/block-canvas';
 import { getDuotoneFilter } from './components/duotone/utils';
 import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
-import { selectBlockPatternsKey } from './store/private-keys';
+import {
+	selectBlockPatternsKey,
+	reusableBlocksSelectKey,
+} from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
 
@@ -42,6 +50,9 @@ lock( privateApis, {
 	getRichTextValues,
 	PrivateInserter,
 	PrivateQuickInserter,
+	extractWords,
+	getNormalizedSearchTerms,
+	normalizeString,
 	PrivateListView,
 	ResizableBoxPopover,
 	BlockInfo,
@@ -62,4 +73,5 @@ lock( privateApis, {
 	selectBlockPatternsKey,
 	requiresWrapperOnCopy,
 	PrivateRichText,
+	reusableBlocksSelectKey,
 } );

package/src/private-apis.native.js

@@ -3,7 +3,9 @@
  */
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
+import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import { lock } from './lock-unlock';
+import { PrivateRichText } from './components/rich-text/';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -12,4 +14,6 @@ export const privateApis = {};
 lock( privateApis, {
 	...globalStyles,
 	ExperimentalBlockEditorProvider,
+	getRichTextValues,
+	PrivateRichText,
 } );

package/src/store/private-actions.js

@@ -376,3 +376,15 @@ export function stopDragging() {
 		type: 'STOP_DRAGGING',
 	};
 }
+
+/**
+ * @param {string|null} clientId The block's clientId, or `null` to clear.
+ *
+ * @return  {Object} Action object.
+ */
+export function expandBlock( clientId ) {
+	return {
+		type: 'SET_BLOCK_EXPANDED_IN_LIST_VIEW',
+		clientId,
+	};
+}

package/src/store/private-keys.js

@@ -1 +1,2 @@
 export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' );
+export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' );

package/src/store/private-selectors.js

@@ -18,11 +18,18 @@ import {
 	getSettings,
 	canInsertBlockType,
 } from './selectors';
-import { checkAllowListRecursive, getAllPatternsDependants } from './utils';
+import {
+	checkAllowListRecursive,
+	getAllPatternsDependants,
+	getInsertBlockTypeDependants,
+} from './utils';
 import { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
 import { STORE_NAME } from './constants';
 import { unlock } from '../lock-unlock';
-import { selectBlockPatternsKey } from './private-keys';
+import {
+	selectBlockPatternsKey,
+	reusableBlocksSelectKey,
+} from './private-keys';
 
 export { getBlockSettings } from './get-block-settings';
 
@@ -282,11 +289,8 @@ export const hasAllowedPatterns = createRegistrySelector( ( select ) =>
 			} );
 		},
 		( state, rootClientId ) => [
-			getAllPatternsDependants( select )( state ),
-			state.settings.allowedBlockTypes,
-			state.settings.templateLock,
-			state.blockListSettings[ rootClientId ],
-			state.blocks.byClientId.get( rootClientId ),
+			...getAllPatternsDependants( select )( state ),
+			...getInsertBlockTypeDependants( state, rootClientId ),
 		]
 	)
 );
@@ -299,26 +303,27 @@ export const getAllPatterns = createRegistrySelector( ( select ) =>
 			__experimentalUserPatternCategories = [],
 			__experimentalReusableBlocks = [],
 		} = state.settings;
-		const userPatterns = ( __experimentalReusableBlocks ?? [] ).map(
-			( userPattern ) => {
-				return {
-					name: `core/block/${ userPattern.id }`,
-					id: userPattern.id,
-					type: INSERTER_PATTERN_TYPES.user,
-					title: userPattern.title.raw,
-					categories: userPattern.wp_pattern_category.map(
-						( catId ) => {
-							const category = (
-								__experimentalUserPatternCategories ?? []
-							).find( ( { id } ) => id === catId );
-							return category ? category.slug : catId;
-						}
-					),
-					content: userPattern.content.raw,
-					syncStatus: userPattern.wp_pattern_sync_status,
-				};
-			}
-		);
+		const reusableBlocksSelect = state.settings[ reusableBlocksSelectKey ];
+		const userPatterns = (
+			reusableBlocksSelect
+				? reusableBlocksSelect( select )
+				: __experimentalReusableBlocks ?? []
+		).map( ( userPattern ) => {
+			return {
+				name: `core/block/${ userPattern.id }`,
+				id: userPattern.id,
+				type: INSERTER_PATTERN_TYPES.user,
+				title: userPattern.title.raw,
+				categories: userPattern.wp_pattern_category.map( ( catId ) => {
+					const category = (
+						__experimentalUserPatternCategories ?? []
+					).find( ( { id } ) => id === catId );
+					return category ? category.slug : catId;
+				} ),
+				content: userPattern.content.raw,
+				syncStatus: userPattern.wp_pattern_sync_status,
+			};
+		} );
 		return [
 			...userPatterns,
 			...__experimentalBlockPatterns,
@@ -330,6 +335,17 @@ export const getAllPatterns = createRegistrySelector( ( select ) =>
 	}, getAllPatternsDependants( select ) )
 );
 
+const EMPTY_ARRAY = [];
+
+export const getReusableBlocks = createRegistrySelector(
+	( select ) => ( state ) => {
+		const reusableBlocksSelect = state.settings[ reusableBlocksSelectKey ];
+		return reusableBlocksSelect
+			? reusableBlocksSelect( select )
+			: state.settings.__experimentalReusableBlocks ?? EMPTY_ARRAY;
+	}
+);
+
 /**
  * Returns the element of the last element that had focus when focus left the editor canvas.
  *
@@ -353,3 +369,14 @@ export function getLastFocus( state ) {
 export function isDragging( state ) {
 	return state.isDragging;
 }
+
+/**
+ * Retrieves the expanded block from the state.
+ *
+ * @param {Object} state Block editor state.
+ *
+ * @return {string|null} The client ID of the expanded block, if set.
+ */
+export function getExpandedBlock( state ) {
+	return state.expandedBlock;
+}

package/src/store/reducer.js

@@ -329,16 +329,13 @@ const withBlockTree =
 				// If there are no replaced blocks, it means we're removing blocks so we need to update their parent.
 				const parentsOfRemovedBlocks = [];
 				for ( const clientId of action.clientIds ) {
+					const parentId = state.parents.get( clientId );
 					if (
-						state.parents.get( clientId ) !== undefined &&
-						( state.parents.get( clientId ) === '' ||
-							newState.byClientId.get(
-								state.parents.get( clientId )
-							) )
+						parentId !== undefined &&
+						( parentId === '' ||
+							newState.byClientId.get( parentId ) )
 					) {
-						parentsOfRemovedBlocks.push(
-							state.parents.get( clientId )
-						);
+						parentsOfRemovedBlocks.push( parentId );
 					}
 				}
 				updateParentInnerBlocksInTree(
@@ -351,16 +348,13 @@ const withBlockTree =
 			case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
 				const parentsOfRemovedBlocks = [];
 				for ( const clientId of action.clientIds ) {
+					const parentId = state.parents.get( clientId );
 					if (
-						state.parents.get( clientId ) !== undefined &&
-						( state.parents.get( clientId ) === '' ||
-							newState.byClientId.get(
-								state.parents.get( clientId )
-							) )
+						parentId !== undefined &&
+						( parentId === '' ||
+							newState.byClientId.get( parentId ) )
 					) {
-						parentsOfRemovedBlocks.push(
-							state.parents.get( clientId )
-						);
+						parentsOfRemovedBlocks.push( parentId );
 					}
 				}
 				newState.tree = new Map( newState.tree );
@@ -1703,36 +1697,42 @@ export function settings( state = SETTINGS_DEFAULTS, action ) {
 export function preferences( state = PREFERENCES_DEFAULTS, action ) {
 	switch ( action.type ) {
 		case 'INSERT_BLOCKS':
-		case 'REPLACE_BLOCKS':
-			return action.blocks.reduce( ( prevState, block ) => {
-				const { attributes, name: blockName } = block;
-				let id = blockName;
-				// If a block variation match is found change the name to be the same with the
-				// one that is used for block variations in the Inserter (`getItemFromVariation`).
-				const match = select( blocksStore ).getActiveBlockVariation(
-					blockName,
-					attributes
-				);
-				if ( match?.name ) {
-					id += '/' + match.name;
-				}
-				if ( blockName === 'core/block' ) {
-					id += '/' + attributes.ref;
-				}
+		case 'REPLACE_BLOCKS': {
+			const nextInsertUsage = action.blocks.reduce(
+				( prevUsage, block ) => {
+					const { attributes, name: blockName } = block;
+					let id = blockName;
+					// If a block variation match is found change the name to be the same with the
+					// one that is used for block variations in the Inserter (`getItemFromVariation`).
+					const match = select( blocksStore ).getActiveBlockVariation(
+						blockName,
+						attributes
+					);
+					if ( match?.name ) {
+						id += '/' + match.name;
+					}
+					if ( blockName === 'core/block' ) {
+						id += '/' + attributes.ref;
+					}
 
-				return {
-					...prevState,
-					insertUsage: {
-						...prevState.insertUsage,
+					return {
+						...prevUsage,
 						[ id ]: {
 							time: action.time,
-							count: prevState.insertUsage[ id ]
-								? prevState.insertUsage[ id ].count + 1
+							count: prevUsage[ id ]
+								? prevUsage[ id ].count + 1
 								: 1,
 						},
-					},
-				};
-			}, state );
+					};
+				},
+				state.insertUsage
+			);
+
+			return {
+				...state,
+				insertUsage: nextInsertUsage,
+			};
+		}
 	}
 
 	return state;
@@ -1889,6 +1889,27 @@ export function highlightedBlock( state, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning current expanded block in the list view.
+ *
+ * @param {string|null} state  Current expanded block.
+ * @param {Object}      action Dispatched action.
+ *
+ * @return {string|null} Updated state.
+ */
+export function expandedBlock( state = null, action ) {
+	switch ( action.type ) {
+		case 'SET_BLOCK_EXPANDED_IN_LIST_VIEW':
+			return action.clientId;
+		case 'SELECT_BLOCK':
+			if ( action.clientId !== state ) {
+				return null;
+			}
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning the block insertion event list state.
  *
@@ -2064,6 +2085,7 @@ const combinedReducers = combineReducers( {
 	lastFocus,
 	editorMode,
 	hasBlockMovingClientId,
+	expandedBlock,
 	highlightedBlock,
 	lastBlockInserted,
 	temporarilyEditingAsBlocks,