@wordpress/block-editor 12.23.0 → 12.25.0

package/src/store/private-selectors.js

@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
-import createSelector from 'rememo';
-
 /**
  * WordPress dependencies
  */
-import { createRegistrySelector } from '@wordpress/data';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -17,6 +12,9 @@ import {
 	getBlockEditingMode,
 	getSettings,
 	canInsertBlockType,
+	getBlockName,
+	getTemplateLock,
+	getClientIdsWithDescendants,
 } from './selectors';
 import {
 	checkAllowListRecursive,
@@ -178,13 +176,36 @@ export function getOpenedBlockSettingsMenu( state ) {
 /**
  * Returns all style overrides, intended to be merged with global editor styles.
  *
+ * Overrides are sorted to match the order of the blocks they relate to. This
+ * is useful to maintain correct CSS cascade order.
+ *
  * @param {Object} state Global application state.
  *
- * @return {Map} A map of style IDs to style overrides.
+ * @return {Array} An array of style ID to style override pairs.
  */
-export function getStyleOverrides( state ) {
-	return state.styleOverrides;
-}
+export const getStyleOverrides = createSelector(
+	( state ) => {
+		const clientIds = getClientIdsWithDescendants( state );
+		const clientIdMap = clientIds.reduce( ( acc, clientId, index ) => {
+			acc[ clientId ] = index;
+			return acc;
+		}, {} );
+
+		return [ ...state.styleOverrides ].sort( ( overrideA, overrideB ) => {
+			// Once the overrides Map is spread to an array, the first element
+			// is the key, while the second is the override itself including
+			// the clientId to sort by.
+			const [ , { clientId: clientIdA } ] = overrideA;
+			const [ , { clientId: clientIdB } ] = overrideB;
+
+			const aIndex = clientIdMap[ clientIdA ] ?? -1;
+			const bIndex = clientIdMap[ clientIdB ] ?? -1;
+
+			return aIndex - bIndex;
+		} );
+	},
+	( state ) => [ state.blocks.order, state.styleOverrides ]
+);
 
 /** @typedef {import('./actions').InserterMediaCategory} InserterMediaCategory */
 /**
@@ -295,38 +316,83 @@ export const hasAllowedPatterns = createRegistrySelector( ( select ) =>
 	)
 );
 
+function mapUserPattern(
+	userPattern,
+	__experimentalUserPatternCategories = []
+) {
+	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,
+	};
+}
+
+export const getPatternBySlug = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state, patternName ) => {
+			// Only fetch reusable blocks if we know we need them. To do: maybe
+			// use the entity record API to retrieve the block by slug.
+			if ( patternName?.startsWith( 'core/block/' ) ) {
+				const _id = parseInt(
+					patternName.slice( 'core/block/'.length ),
+					10
+				);
+				const block = unlock( select( STORE_NAME ) )
+					.getReusableBlocks()
+					.find( ( { id } ) => id === _id );
+
+				if ( ! block ) {
+					return null;
+				}
+
+				return mapUserPattern(
+					block,
+					state.settings.__experimentalUserPatternCategories
+				);
+			}
+
+			return [
+				// This setting is left for back compat.
+				...( state.settings.__experimentalBlockPatterns ?? [] ),
+				...( state.settings[ selectBlockPatternsKey ]?.( select ) ??
+					[] ),
+			].find( ( { name } ) => name === patternName );
+		},
+		( state, patternName ) =>
+			patternName?.startsWith( 'core/block/' )
+				? [
+						unlock( select( STORE_NAME ) ).getReusableBlocks(),
+						state.settings.__experimentalReusableBlocks,
+				  ]
+				: [
+						state.settings.__experimentalBlockPatterns,
+						state.settings[ selectBlockPatternsKey ]?.( select ),
+				  ]
+	)
+);
+
 export const getAllPatterns = createRegistrySelector( ( select ) =>
 	createSelector( ( state ) => {
-		// This setting is left for back compat.
-		const {
-			__experimentalBlockPatterns = [],
-			__experimentalUserPatternCategories = [],
-			__experimentalReusableBlocks = [],
-		} = state.settings;
-		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,
+			...unlock( select( STORE_NAME ) )
+				.getReusableBlocks()
+				.map( ( userPattern ) =>
+					mapUserPattern(
+						userPattern,
+						state.settings.__experimentalUserPatternCategories
+					)
+				),
+			// This setting is left for back compat.
+			...( state.settings.__experimentalBlockPatterns ?? [] ),
 			...( state.settings[ selectBlockPatternsKey ]?.( select ) ?? [] ),
 		].filter(
 			( x, index, arr ) =>
@@ -380,3 +446,53 @@ export function isDragging( state ) {
 export function getExpandedBlock( state ) {
 	return state.expandedBlock;
 }
+
+/**
+ * Retrieves the client ID of the ancestor block that is content locking the block
+ * with the provided client ID.
+ *
+ * @param {Object} state    Global application state.
+ * @param {Object} clientId Client Id of the block.
+ *
+ * @return {?string} Client ID of the ancestor block that is content locking the block.
+ */
+export const getContentLockingParent = createSelector(
+	( state, clientId ) => {
+		let current = clientId;
+		let result;
+		while ( ( current = state.blocks.parents.get( current ) ) ) {
+			if (
+				getBlockName( state, current ) === 'core/block' ||
+				getTemplateLock( state, current ) === 'contentOnly'
+			) {
+				result = current;
+			}
+		}
+		return result;
+	},
+	( state ) => [ state.blocks.parents, state.blockListSettings ]
+);
+
+/**
+ * Retrieves the client ID of the block that is content locked but is
+ * currently being temporarily edited as a non-locked block.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {?string} The client ID of the block being temporarily edited as a non-locked block.
+ */
+export function getTemporarilyEditingAsBlocks( state ) {
+	return state.temporarilyEditingAsBlocks;
+}
+
+/**
+ * Returns the focus mode that should be reapplied when the user stops editing
+ * a content locked blocks as a block without locking.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {?string} The focus mode that should be re-set when temporarily editing as blocks stops.
+ */
+export function getTemporarilyEditingFocusModeToRevert( state ) {
+	return state.temporarilyEditingFocusModeRevert;
+}

package/src/store/reducer.js

@@ -304,20 +304,15 @@ const withBlockTree =
 					action.blocks
 				);
 				newState.tree = new Map( newState.tree );
-				action.replacedClientIds
-					.concat(
-						// Controlled inner blocks are only removed
-						// if the block doesn't move to another position
-						// otherwise their content will be lost.
-						action.replacedClientIds
-							.filter(
-								( clientId ) => ! inserterClientIds[ clientId ]
-							)
-							.map( ( clientId ) => 'controlled||' + clientId )
-					)
-					.forEach( ( key ) => {
-						newState.tree.delete( key );
-					} );
+				action.replacedClientIds.forEach( ( clientId ) => {
+					newState.tree.delete( clientId );
+					// Controlled inner blocks are only removed
+					// if the block doesn't move to another position
+					// otherwise their content will be lost.
+					if ( ! inserterClientIds[ clientId ] ) {
+						newState.tree.delete( 'controlled||' + clientId );
+					}
+				} );
 
 				updateBlockTreeForBlocks( newState, action.blocks );
 				updateParentInnerBlocksInTree(
@@ -358,15 +353,10 @@ const withBlockTree =
 					}
 				}
 				newState.tree = new Map( newState.tree );
-				action.removedClientIds
-					.concat(
-						action.removedClientIds.map(
-							( clientId ) => 'controlled||' + clientId
-						)
-					)
-					.forEach( ( key ) => {
-						newState.tree.delete( key );
-					} );
+				action.removedClientIds.forEach( ( clientId ) => {
+					newState.tree.delete( clientId );
+					newState.tree.delete( 'controlled||' + clientId );
+				} );
 				updateParentInnerBlocksInTree(
 					newState,
 					parentsOfRemovedBlocks,

package/src/store/selectors.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import createSelector from 'rememo';
-
 /**
  * WordPress dependencies
  */
@@ -21,7 +16,7 @@ import { applyFilters } from '@wordpress/hooks';
 import { symbol } from '@wordpress/icons';
 import { create, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
-import { createRegistrySelector } from '@wordpress/data';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -36,6 +31,12 @@ import { orderBy } from '../utils/sorting';
 import { STORE_NAME } from './constants';
 import { unlock } from '../lock-unlock';
 
+import {
+	getContentLockingParent,
+	getTemporarilyEditingAsBlocks,
+	getTemporarilyEditingFocusModeToRevert,
+} from './private-selectors';
+
 /**
  * A block selection object.
  *
@@ -1029,7 +1030,9 @@ export function __unstableIsSelectionMergeable( state, isForward ) {
 	const selectionFocus = getSelectionEnd( state );
 
 	// It's not mergeable if the start and end are within the same block.
-	if ( selectionAnchor.clientId === selectionFocus.clientId ) return false;
+	if ( selectionAnchor.clientId === selectionFocus.clientId ) {
+		return false;
+	}
 
 	// It's not mergeable if there's no rich text selection.
 	if (
@@ -1037,8 +1040,9 @@ export function __unstableIsSelectionMergeable( state, isForward ) {
 		! selectionFocus.attributeKey ||
 		typeof selectionAnchor.offset === 'undefined' ||
 		typeof selectionFocus.offset === 'undefined'
-	)
+	) {
 		return false;
+	}
 
 	const anchorRootClientId = getBlockRootClientId(
 		state,
@@ -1080,12 +1084,16 @@ export function __unstableIsSelectionMergeable( state, isForward ) {
 	const targetBlockName = getBlockName( state, targetBlockClientId );
 	const targetBlockType = getBlockType( targetBlockName );
 
-	if ( ! targetBlockType.merge ) return false;
+	if ( ! targetBlockType.merge ) {
+		return false;
+	}
 
 	const blockToMerge = getBlock( state, blockToMergeClientId );
 
 	// It's mergeable if the blocks are of the same type.
-	if ( blockToMerge.name === targetBlockName ) return true;
+	if ( blockToMerge.name === targetBlockName ) {
+		return true;
+	}
 
 	// If the blocks are of a different type, try to transform the block being
 	// merged into the same type of block.
@@ -1937,7 +1945,9 @@ const buildBlockTypeItem =
 			isDisabled,
 			frecency: calculateFrecency( time, count ),
 		};
-		if ( buildScope === 'transform' ) return blockItemBase;
+		if ( buildScope === 'transform' ) {
+			return blockItemBase;
+		}
 
 		const inserterVariations = getBlockVariations(
 			blockType.name,
@@ -2285,36 +2295,39 @@ export function __experimentalGetDirectInsertBlock(
 
 export const __experimentalGetParsedPattern = createRegistrySelector(
 	( select ) =>
-		createSelector( ( state, patternName ) => {
-			const { getAllPatterns } = unlock( select( STORE_NAME ) );
-			const patterns = getAllPatterns();
-			const pattern = patterns.find(
-				( { name } ) => name === patternName
-			);
-			if ( ! pattern ) {
-				return null;
-			}
-			const blocks = parse( pattern.content, {
-				__unstableSkipMigrationLogs: true,
-			} );
-			if ( blocks.length === 1 ) {
-				blocks[ 0 ].attributes = {
-					...blocks[ 0 ].attributes,
-					metadata: {
-						...( blocks[ 0 ].attributes.metadata || {} ),
-						categories: pattern.categories,
-						patternName: pattern.name,
-						name:
-							blocks[ 0 ].attributes.metadata?.name ||
-							pattern.title,
-					},
+		createSelector(
+			( state, patternName ) => {
+				const pattern = unlock( select( STORE_NAME ) ).getPatternBySlug(
+					patternName
+				);
+				if ( ! pattern ) {
+					return null;
+				}
+				const blocks = parse( pattern.content, {
+					__unstableSkipMigrationLogs: true,
+				} );
+				if ( blocks.length === 1 ) {
+					blocks[ 0 ].attributes = {
+						...blocks[ 0 ].attributes,
+						metadata: {
+							...( blocks[ 0 ].attributes.metadata || {} ),
+							categories: pattern.categories,
+							patternName: pattern.name,
+							name:
+								blocks[ 0 ].attributes.metadata?.name ||
+								pattern.title,
+						},
+					};
+				}
+				return {
+					...pattern,
+					blocks,
 				};
-			}
-			return {
-				...pattern,
-				blocks,
-			};
-		}, getAllPatternsDependants( select ) )
+			},
+			( state, patternName ) => [
+				unlock( select( STORE_NAME ) ).getPatternBySlug( patternName ),
+			]
+		)
 );
 
 const getAllowedPatternsDependants = ( select ) => ( state, rootClientId ) => [
@@ -2375,7 +2388,9 @@ export const __experimentalGetAllowedPatterns = createRegistrySelector(
 export const getPatternsByBlockTypes = createRegistrySelector( ( select ) =>
 	createSelector(
 		( state, blockNames, rootClientId = null ) => {
-			if ( ! blockNames ) return EMPTY_ARRAY;
+			if ( ! blockNames ) {
+				return EMPTY_ARRAY;
+			}
 			const patterns =
 				select( STORE_NAME ).__experimentalGetAllowedPatterns(
 					rootClientId
@@ -2434,7 +2449,9 @@ export const __experimentalGetPatternTransformItems = createRegistrySelector(
 	( select ) =>
 		createSelector(
 			( state, blocks, rootClientId = null ) => {
-				if ( ! blocks ) return EMPTY_ARRAY;
+				if ( ! blocks ) {
+					return EMPTY_ARRAY;
+				}
 				/**
 				 * For now we only handle blocks without InnerBlocks and take into account
 				 * the `__experimentalRole` property of blocks' attributes for the transformation.
@@ -2758,50 +2775,6 @@ export const __unstableGetVisibleBlocks = createSelector(
 	( state ) => [ state.blockVisibility ]
 );
 
-/**
- * DO-NOT-USE in production.
- * This selector is created for internal/experimental only usage and may be
- * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
- */
-export const __unstableGetContentLockingParent = createSelector(
-	( state, clientId ) => {
-		let current = clientId;
-		let result;
-		while ( ( current = state.blocks.parents.get( current ) ) ) {
-			if (
-				getBlockName( state, current ) === 'core/block' ||
-				getTemplateLock( state, current ) === 'contentOnly'
-			) {
-				result = current;
-			}
-		}
-		return result;
-	},
-	( state ) => [ state.blocks.parents, state.blockListSettings ]
-);
-
-/**
- * DO-NOT-USE in production.
- * This selector is created for internal/experimental only usage and may be
- * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
- *
- * @param {Object} state Global application state.
- */
-export function __unstableGetTemporarilyEditingAsBlocks( state ) {
-	return state.temporarilyEditingAsBlocks;
-}
-
-/**
- * DO-NOT-USE in production.
- * This selector is created for internal/experimental only usage and may be
- * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
- *
- * @param {Object} state Global application state.
- */
-export function __unstableGetTemporarilyEditingFocusModeToRevert( state ) {
-	return state.temporarilyEditingFocusModeRevert;
-}
-
 export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 	// Prevent overlay on blocks with a non-default editing mode. If the mdoe is
 	// 'disabled' then the overlay is redundant since the block can't be
@@ -2818,13 +2791,20 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 
 	const editorMode = __unstableGetEditorMode( state );
 
-	// In zoom-out mode, the block overlay is always active for top level blocks.
-	if (
-		editorMode === 'zoom-out' &&
-		clientId &&
-		! getBlockRootClientId( state, clientId )
-	) {
-		return true;
+	// In zoom-out mode, the block overlay is always active for section level blocks.
+	if ( editorMode === 'zoom-out' ) {
+		const { sectionRootClientId } = unlock( getSettings( state ) );
+		if ( sectionRootClientId ) {
+			const sectionClientIds = getBlockOrder(
+				state,
+				sectionRootClientId
+			);
+			if ( sectionClientIds?.includes( clientId ) ) {
+				return true;
+			}
+		} else if ( clientId && ! getBlockRootClientId( state, clientId ) ) {
+			return true;
+		}
 	}
 
 	// In navigation mode, the block overlay is active when the block is not
@@ -2896,6 +2876,32 @@ export function __unstableIsWithinBlockOverlay( state, clientId ) {
 export const getBlockEditingMode = createRegistrySelector(
 	( select ) =>
 		( state, clientId = '' ) => {
+			// Some selectors that call this provide `null` as the default
+			// rootClientId, but the default rootClientId is actually `''`.
+			if ( clientId === null ) {
+				clientId = '';
+			}
+			// In zoom-out mode, override the behavior set by
+			// __unstableSetBlockEditingMode to only allow editing the top-level
+			// sections.
+			const editorMode = __unstableGetEditorMode( state );
+			if ( editorMode === 'zoom-out' ) {
+				const { sectionRootClientId } = unlock( getSettings( state ) );
+				if ( clientId === '' /* ROOT_CONTAINER_CLIENT_ID */ ) {
+					return sectionRootClientId ? 'disabled' : 'contentOnly';
+				}
+				if ( clientId === sectionRootClientId ) {
+					return 'contentOnly';
+				}
+				const sectionsClientIds = getBlockOrder(
+					state,
+					sectionRootClientId
+				);
+				if ( ! sectionsClientIds?.includes( clientId ) ) {
+					return 'disabled';
+				}
+			}
+
 			const blockEditingMode = state.blockEditingModes.get( clientId );
 			if ( blockEditingMode ) {
 				return blockEditingMode;
@@ -2982,3 +2988,66 @@ export const isGroupable = createRegistrySelector(
 			);
 		}
 );
+
+/**
+ * DO-NOT-USE in production.
+ * This selector is created for internal/experimental only usage and may be
+ * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
+ *
+ * @deprecated
+ *
+ * @param {Object} state    Global application state.
+ * @param {Object} clientId Client Id of the block.
+ *
+ * @return {?string} Client ID of the ancestor block that is content locking the block.
+ */
+export const __unstableGetContentLockingParent = ( state, clientId ) => {
+	deprecated(
+		"wp.data.select( 'core/block-editor' ).__unstableGetContentLockingParent",
+		{
+			since: '6.1',
+			version: '6.7',
+		}
+	);
+	return getContentLockingParent( state, clientId );
+};
+
+/**
+ * DO-NOT-USE in production.
+ * This selector is created for internal/experimental only usage and may be
+ * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
+ *
+ * @deprecated
+ *
+ * @param {Object} state Global application state.
+ */
+export function __unstableGetTemporarilyEditingAsBlocks( state ) {
+	deprecated(
+		"wp.data.select( 'core/block-editor' ).__unstableGetTemporarilyEditingAsBlocks",
+		{
+			since: '6.1',
+			version: '6.7',
+		}
+	);
+	return getTemporarilyEditingAsBlocks( state );
+}
+
+/**
+ * DO-NOT-USE in production.
+ * This selector is created for internal/experimental only usage and may be
+ * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
+ *
+ * @deprecated
+ *
+ * @param {Object} state Global application state.
+ */
+export function __unstableGetTemporarilyEditingFocusModeToRevert( state ) {
+	deprecated(
+		"wp.data.select( 'core/block-editor' ).__unstableGetTemporarilyEditingFocusModeToRevert",
+		{
+			since: '6.5',
+			version: '6.7',
+		}
+	);
+	return getTemporarilyEditingFocusModeToRevert( state );
+}

package/src/style.scss

@@ -41,9 +41,8 @@
 @import "./components/multi-selection-inspector/style.scss";
 @import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/style.scss";
+@import "./components/segmented-text-control/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
-@import "./components/text-decoration-control/style.scss";
-@import "./components/text-transform-control/style.scss";
 @import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";

package/src/utils/object.js

@@ -49,3 +49,19 @@ export const getValueFromObjectPath = ( object, path, defaultValue ) => {
 	} );
 	return value ?? defaultValue;
 };
+
+/**
+ * Helper util to filter out objects with duplicate values for a given property.
+ *
+ * @param {Object[]} array    Array of objects to filter.
+ * @param {string}   property Property to filter unique values by.
+ *
+ * @return {Object[]} Array of objects with unique values for the specified property.
+ */
+export function uniqByProperty( array, property ) {
+	const seen = new Set();
+	return array.filter( ( item ) => {
+		const value = item[ property ];
+		return seen.has( value ) ? false : seen.add( value );
+	} );
+}

package/src/utils/order-inserter-block-items.js

@@ -17,8 +17,12 @@ export const orderInserterBlockItems = ( items, priority ) => {
 		let aIndex = priority.indexOf( aName );
 		let bIndex = priority.indexOf( bName );
 		// All other block items should come after that.
-		if ( aIndex < 0 ) aIndex = priority.length;
-		if ( bIndex < 0 ) bIndex = priority.length;
+		if ( aIndex < 0 ) {
+			aIndex = priority.length;
+		}
+		if ( bIndex < 0 ) {
+			bIndex = priority.length;
+		}
 		return aIndex - bIndex;
 	} );