@wordpress/block-editor 12.3.0 → 12.3.1

package/src/store/private-actions.js

@@ -3,6 +3,14 @@
  */
 import { Platform } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { blockTypePromptMessages } from '../components/block-removal-warning-modal';
+
+const castArray = ( maybeArray ) =>
+	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
+
 /**
  * A list of private/experimental block editor settings that
  * should not become a part of the WordPress public API.
@@ -105,3 +113,188 @@ export function unsetBlockEditingMode( clientId = '' ) {
 		clientId,
 	};
 }
+
+/**
+ * Yields action objects used in signalling that the blocks corresponding to
+ * the set of specified client IDs are to be removed.
+ *
+ * Compared to `removeBlocks`, this private interface exposes an additional
+ * parameter; see `forceRemove`.
+ *
+ * @param {string|string[]} clientIds      Client IDs of blocks to remove.
+ * @param {boolean}         selectPrevious True if the previous block
+ *                                         or the immediate parent
+ *                                         (if no previous block exists)
+ *                                         should be selected
+ *                                         when a block is removed.
+ * @param {boolean}         forceRemove    Whether to force the operation,
+ *                                         bypassing any checks for certain
+ *                                         block types.
+ */
+export const privateRemoveBlocks =
+	( clientIds, selectPrevious = true, forceRemove = false ) =>
+	( { select, dispatch } ) => {
+		if ( ! clientIds || ! clientIds.length ) {
+			return;
+		}
+
+		clientIds = castArray( clientIds );
+		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
+		const canRemoveBlocks = select.canRemoveBlocks(
+			clientIds,
+			rootClientId
+		);
+
+		if ( ! canRemoveBlocks ) {
+			return;
+		}
+
+		// In certain editing contexts, we'd like to prevent accidental removal
+		// of important blocks. For example, in the site editor, the Query Loop
+		// block is deemed important. In such cases, we'll ask the user for
+		// confirmation that they intended to remove such block(s). However,
+		// the editor instance is responsible for presenting those confirmation
+		// prompts to the user. Any instance opting into removal prompts must
+		// register using `toggleRemovalPromptSupport()`.
+		//
+		// @see https://github.com/WordPress/gutenberg/pull/51145
+		if (
+			! forceRemove &&
+			// FIXME: Without this existence check, the unit tests for
+			// `__experimentalDeleteReusableBlock` in
+			// `packages/reusable-blocks/src/store/test/actions.js` fail due to
+			// the fact that the `registry` object passed to the thunk actions
+			// doesn't include this private action. This needs to be
+			// investigated to understand whether it's a real smell or if it's
+			// because not all store code has been updated to accommodate
+			// private selectors.
+			select.isRemovalPromptSupported &&
+			select.isRemovalPromptSupported()
+		) {
+			const blockNamesForPrompt = new Set();
+
+			// Given a list of client IDs of blocks that the user intended to
+			// remove, perform a tree search (BFS) to find all block names
+			// corresponding to "important" blocks, i.e. blocks that require a
+			// removal prompt.
+			//
+			// @see blockTypePromptMessages
+			const queue = [ ...clientIds ];
+			while ( queue.length ) {
+				const clientId = queue.shift();
+				const blockName = select.getBlockName( clientId );
+				if ( blockTypePromptMessages[ blockName ] ) {
+					blockNamesForPrompt.add( blockName );
+				}
+				const innerBlocks = select.getBlockOrder( clientId );
+				queue.push( ...innerBlocks );
+			}
+
+			// If any such blocks were found, trigger the removal prompt and
+			// skip any other steps (thus postponing actual removal).
+			if ( blockNamesForPrompt.size ) {
+				dispatch(
+					displayRemovalPrompt(
+						clientIds,
+						selectPrevious,
+						Array.from( blockNamesForPrompt )
+					)
+				);
+				return;
+			}
+		}
+
+		if ( selectPrevious ) {
+			dispatch.selectPreviousBlock( clientIds[ 0 ], selectPrevious );
+		}
+
+		dispatch( { type: 'REMOVE_BLOCKS', clientIds } );
+
+		// To avoid a focus loss when removing the last block, assure there is
+		// always a default block if the last of the blocks have been removed.
+		dispatch( ensureDefaultBlock() );
+	};
+
+/**
+ * Action which will insert a default block insert action if there
+ * are no other blocks at the root of the editor. This action should be used
+ * in actions which may result in no blocks remaining in the editor (removal,
+ * replacement, etc).
+ */
+export const ensureDefaultBlock =
+	() =>
+	( { select, dispatch } ) => {
+		// To avoid a focus loss when removing the last block, assure there is
+		// always a default block if the last of the blocks have been removed.
+		const count = select.getBlockCount();
+		if ( count > 0 ) {
+			return;
+		}
+
+		// If there's an custom appender, don't insert default block.
+		// We have to remember to manually move the focus elsewhere to
+		// prevent it from being lost though.
+		const { __unstableHasCustomAppender } = select.getSettings();
+		if ( __unstableHasCustomAppender ) {
+			return;
+		}
+
+		dispatch.insertDefaultBlock();
+	};
+
+/**
+ * Returns an action object used in signalling that a block removal prompt must
+ * be displayed.
+ *
+ * Contrast with `toggleRemovalPromptSupport`.
+ *
+ * @param {string|string[]} clientIds           Client IDs of blocks to remove.
+ * @param {boolean}         selectPrevious      True if the previous block
+ *                                              or the immediate parent
+ *                                              (if no previous block exists)
+ *                                              should be selected
+ *                                              when a block is removed.
+ * @param {string[]}        blockNamesForPrompt Names of blocks requiring user
+ * @return {Object} Action object.
+ */
+export function displayRemovalPrompt(
+	clientIds,
+	selectPrevious,
+	blockNamesForPrompt
+) {
+	return {
+		type: 'DISPLAY_REMOVAL_PROMPT',
+		clientIds,
+		selectPrevious,
+		blockNamesForPrompt,
+	};
+}
+
+/**
+ * Returns an action object used in signalling that a block removal prompt must
+ * be cleared, either be cause the user has confirmed or canceled the request
+ * for removal.
+ *
+ * @return {Object} Action object.
+ */
+export function clearRemovalPrompt() {
+	return {
+		type: 'CLEAR_REMOVAL_PROMPT',
+	};
+}
+
+/**
+ * Returns an action object used in signalling that a removal prompt display
+ * mechanism is available or unavailable in the current editor.
+ *
+ * Contrast with `displayRemovalPrompt`.
+ *
+ * @param {boolean} status Whether a prompt display mechanism exists.
+ * @return {Object} Action object.
+ */
+export function toggleRemovalPromptSupport( status = true ) {
+	return {
+		type: 'TOGGLE_REMOVAL_PROMPT_SUPPORT',
+		status,
+	};
+}

package/src/store/private-selectors.js

@@ -17,6 +17,7 @@ import {
 	getTemplateLock,
 	getBlockName,
 	getBlockOrder,
+	getBlockParents,
 } from './selectors';
 
 /**
@@ -72,41 +73,31 @@ export function getLastInsertedBlocksClientIds( state ) {
  * @return {BlockEditingMode} The block editing mode. One of `'disabled'`,
  *                            `'contentOnly'`, or `'default'`.
  */
-export const getBlockEditingMode = createSelector(
-	( state, clientId = '' ) => {
-		if ( state.blockEditingModes.has( clientId ) ) {
-			return state.blockEditingModes.get( clientId );
-		}
-		if ( ! clientId ) {
-			return 'default';
-		}
-		const rootClientId = getBlockRootClientId( state, clientId );
-		const templateLock = getTemplateLock( state, rootClientId );
-		if ( templateLock === 'contentOnly' ) {
-			const name = getBlockName( state, clientId );
-			// TODO: Terrible hack! We're calling the global select() function
-			// here instead of using createRegistrySelector(). The problem with
-			// using createRegistrySelector() is that then the public
-			// block-editor selectors (e.g. canInsertBlockTypeUnmemoized) can't
-			// call this private block-editor selector due to a bug in
-			// @wordpress/data. See
-			// https://github.com/WordPress/gutenberg/pull/50985.
-			const isContent =
-				select( blocksStore ).__experimentalHasContentRoleAttribute(
-					name
-				);
-			return isContent ? 'contentOnly' : 'disabled';
-		}
-		const parentMode = getBlockEditingMode( state, rootClientId );
-		return parentMode === 'contentOnly' ? 'default' : parentMode;
-	},
-	( state ) => [
-		state.blockEditingModes,
-		state.blocks.parents,
-		state.settings.templateLock,
-		state.blockListSettings,
-	]
-);
+export function getBlockEditingMode( state, clientId = '' ) {
+	if ( state.blockEditingModes.has( clientId ) ) {
+		return state.blockEditingModes.get( clientId );
+	}
+	if ( ! clientId ) {
+		return 'default';
+	}
+	const rootClientId = getBlockRootClientId( state, clientId );
+	const templateLock = getTemplateLock( state, rootClientId );
+	if ( templateLock === 'contentOnly' ) {
+		const name = getBlockName( state, clientId );
+		// TODO: Terrible hack! We're calling the global select() function
+		// here instead of using createRegistrySelector(). The problem with
+		// using createRegistrySelector() is that then the public
+		// block-editor selectors (e.g. canInsertBlockTypeUnmemoized) can't
+		// call this private block-editor selector due to a bug in
+		// @wordpress/data. See
+		// https://github.com/WordPress/gutenberg/pull/50985.
+		const isContent =
+			select( blocksStore ).__experimentalHasContentRoleAttribute( name );
+		return isContent ? 'contentOnly' : 'disabled';
+	}
+	const parentMode = getBlockEditingMode( state, rootClientId );
+	return parentMode === 'contentOnly' ? 'default' : parentMode;
+}
 
 /**
  * Returns true if the block with the given client ID and all of its descendants
@@ -135,3 +126,85 @@ export const isBlockSubtreeDisabled = createSelector(
 	},
 	( state ) => [ state.blockEditingModes, state.blocks.parents ]
 );
+
+/**
+ * Returns a tree of block objects with only clientID and innerBlocks set.
+ * Blocks with a 'disabled' editing mode are not included.
+ *
+ * @param {Object}  state        Global application state.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
+ */
+export const getListViewClientIdsTree = createSelector(
+	( state, rootClientId = '' ) => {
+		return getBlockOrder( state, rootClientId ).flatMap( ( clientId ) => {
+			if ( getBlockEditingMode( state, clientId ) !== 'disabled' ) {
+				return [
+					{
+						clientId,
+						innerBlocks: getListViewClientIdsTree(
+							state,
+							clientId
+						),
+					},
+				];
+			}
+			return getListViewClientIdsTree( state, clientId );
+		} );
+	},
+	( state ) => [
+		state.blocks.order,
+		state.blockEditingModes,
+		state.settings.templateLock,
+		state.blockListSettings,
+	]
+);
+
+/**
+ * Returns a list of a given block's ancestors, from top to bottom. Blocks with
+ * a 'disabled' editing mode are excluded.
+ *
+ * @see getBlockParents
+ *
+ * @param {Object}  state     Global application state.
+ * @param {string}  clientId  The block client ID.
+ * @param {boolean} ascending Order results from bottom to top (true) or top
+ *                            to bottom (false).
+ */
+export const getEnabledBlockParents = createSelector(
+	( state, clientId, ascending = false ) => {
+		return getBlockParents( state, clientId, ascending ).filter(
+			( parent ) => getBlockEditingMode( state, parent ) !== 'disabled'
+		);
+	},
+	( state ) => [
+		state.blocks.parents,
+		state.blockEditingModes,
+		state.settings.templateLock,
+		state.blockListSettings,
+	]
+);
+
+/**
+ * Selector that returns the data needed to display a prompt when certain
+ * blocks are removed, or `false` if no such prompt is requested.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {Object|false} Data for removal prompt display, if any.
+ */
+export function getRemovalPromptData( state ) {
+	return state.removalPromptData;
+}
+
+/**
+ * Returns true if removal prompt exists, or false otherwise.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether removal prompt exists.
+ */
+export function isRemovalPromptSupported( state ) {
+	return state.isRemovalPromptSupported;
+}

package/src/store/reducer.js

@@ -1469,6 +1469,48 @@ export function isSelectionEnabled( state = true, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning the data needed to display a prompt when certain blocks
+ * are removed, or `false` if no such prompt is requested.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {Object|false} Data for removal prompt display, if any.
+ */
+function removalPromptData( state = false, action ) {
+	switch ( action.type ) {
+		case 'DISPLAY_REMOVAL_PROMPT':
+			const { clientIds, selectPrevious, blockNamesForPrompt } = action;
+			return {
+				clientIds,
+				selectPrevious,
+				blockNamesForPrompt,
+			};
+		case 'CLEAR_REMOVAL_PROMPT':
+			return false;
+	}
+
+	return state;
+}
+
+/**
+ * Reducer prompt availability state.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+function isRemovalPromptSupported( state = false, action ) {
+	switch ( action.type ) {
+		case 'TOGGLE_REMOVAL_PROMPT_SUPPORT':
+			return action.status;
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning the initial block selection.
  *
@@ -1881,6 +1923,8 @@ const combinedReducers = combineReducers( {
 	temporarilyEditingAsBlocks,
 	blockVisibility,
 	blockEditingModes,
+	removalPromptData,
+	isRemovalPromptSupported,
 } );
 
 function withAutomaticChangeReset( reducer ) {

package/src/store/selectors.js

@@ -187,16 +187,27 @@ export function getBlocks( state, rootClientId ) {
  * Returns a stripped down block object containing only its client ID,
  * and its inner blocks' client IDs.
  *
+ * @deprecated
+ *
  * @param {Object} state    Editor state.
  * @param {string} clientId Client ID of the block to get.
  *
  * @return {Object} Client IDs of the post blocks.
  */
 export const __unstableGetClientIdWithClientIdsTree = createSelector(
-	( state, clientId ) => ( {
-		clientId,
-		innerBlocks: __unstableGetClientIdsTree( state, clientId ),
-	} ),
+	( state, clientId ) => {
+		deprecated(
+			"wp.data.select( 'core/block-editor' ).__unstableGetClientIdWithClientIdsTree",
+			{
+				since: '6.3',
+				version: '6.5',
+			}
+		);
+		return {
+			clientId,
+			innerBlocks: __unstableGetClientIdsTree( state, clientId ),
+		};
+	},
 	( state ) => [ state.blocks.order ]
 );
 
@@ -205,16 +216,26 @@ export const __unstableGetClientIdWithClientIdsTree = createSelector(
  * given root, consisting of stripped down block objects containing only
  * their client IDs, and their inner blocks' client IDs.
  *
+ * @deprecated
+ *
  * @param {Object}  state        Editor state.
  * @param {?string} rootClientId Optional root client ID of block list.
  *
  * @return {Object[]} Client IDs of the post blocks.
  */
 export const __unstableGetClientIdsTree = createSelector(
-	( state, rootClientId = '' ) =>
-		getBlockOrder( state, rootClientId ).map( ( clientId ) =>
+	( state, rootClientId = '' ) => {
+		deprecated(
+			"wp.data.select( 'core/block-editor' ).__unstableGetClientIdsTree",
+			{
+				since: '6.3',
+				version: '6.5',
+			}
+		);
+		return getBlockOrder( state, rootClientId ).map( ( clientId ) =>
 			__unstableGetClientIdWithClientIdsTree( state, clientId )
-		),
+		);
+	},
 	( state ) => [ state.blocks.order ]
 );
 
@@ -303,10 +324,13 @@ export const __experimentalGetGlobalBlocksByName = createSelector(
 		if ( ! blockName ) {
 			return EMPTY_ARRAY;
 		}
+		const blockNames = Array.isArray( blockName )
+			? blockName
+			: [ blockName ];
 		const clientIds = getClientIdsWithDescendants( state );
 		const foundBlocks = clientIds.filter( ( clientId ) => {
 			const block = state.blocks.byClientId.get( clientId );
-			return block.name === blockName;
+			return blockNames.includes( block.name );
 		} );
 		return foundBlocks.length > 0 ? foundBlocks : EMPTY_ARRAY;
 	},
@@ -536,18 +560,10 @@ export const getBlockParents = createSelector(
 export const getBlockParentsByBlockName = createSelector(
 	( state, clientId, blockName, ascending = false ) => {
 		const parents = getBlockParents( state, clientId, ascending );
-		return parents
-			.map( ( id ) => ( {
-				id,
-				name: getBlockName( state, id ),
-			} ) )
-			.filter( ( { name } ) => {
-				if ( Array.isArray( blockName ) ) {
-					return blockName.includes( name );
-				}
-				return name === blockName;
-			} )
-			.map( ( { id } ) => id );
+		const hasName = Array.isArray( blockName )
+			? ( name ) => blockName.includes( name )
+			: ( name ) => blockName === name;
+		return parents.filter( ( id ) => hasName( getBlockName( state, id ) ) );
 	},
 	( state ) => [ state.blocks.parents ]
 );
@@ -1672,16 +1688,14 @@ export function canRemoveBlock( state, clientId, rootClientId = null ) {
 	if ( attributes === null ) {
 		return true;
 	}
-	if ( attributes.lock?.remove ) {
-		return false;
+	if ( attributes.lock?.remove !== undefined ) {
+		return ! attributes.lock.remove;
 	}
 	if ( getTemplateLock( state, rootClientId ) ) {
 		return false;
 	}
-	if ( getBlockEditingMode( state, rootClientId ) === 'disabled' ) {
-		return false;
-	}
-	return true;
+
+	return getBlockEditingMode( state, rootClientId ) !== 'disabled';
 }
 
 /**
@@ -1711,18 +1725,16 @@ export function canRemoveBlocks( state, clientIds, rootClientId = null ) {
 export function canMoveBlock( state, clientId, rootClientId = null ) {
 	const attributes = getBlockAttributes( state, clientId );
 	if ( attributes === null ) {
-		return;
+		return true;
 	}
-	if ( attributes.lock?.move ) {
-		return false;
+	if ( attributes.lock?.move !== undefined ) {
+		return ! attributes.lock.move;
 	}
 	if ( getTemplateLock( state, rootClientId ) === 'all' ) {
 		return false;
 	}
-	if ( getBlockEditingMode( state, rootClientId ) === 'disabled' ) {
-		return false;
-	}
-	return true;
+
+	return getBlockEditingMode( state, rootClientId ) !== 'disabled';
 }
 
 /**
@@ -1933,6 +1945,7 @@ const buildBlockTypeItem =
  *
  * @param    {Object}   state             Editor state.
  * @param    {?string}  rootClientId      Optional root client ID of block list.
+ * @param    {?string}  syncStatus        Optional sync status to filter pattern blocks by.
  *
  * @return {WPEditorInserterItem[]} Items that appear in inserter.
  *
@@ -1949,7 +1962,7 @@ const buildBlockTypeItem =
  * @property {number}   frecency          Heuristic that combines frequency and recency.
  */
 export const getInserterItems = createSelector(
-	( state, rootClientId = null ) => {
+	( state, rootClientId = null, syncStatus ) => {
 		const buildBlockTypeInserterItem = buildBlockTypeItem( state, {
 			buildScope: 'inserter',
 		} );
@@ -2014,6 +2027,7 @@ export const getInserterItems = createSelector(
 				isDisabled: false,
 				utility: 1, // Deprecated.
 				frecency,
+				content: reusableBlock.content.raw,
 			};
 		};
 
@@ -2028,7 +2042,14 @@ export const getInserterItems = createSelector(
 			'core/block',
 			rootClientId
 		)
-			? getReusableBlocks( state ).map( buildReusableBlockInserterItem )
+			? getReusableBlocks( state )
+					.filter(
+						( reusableBlock ) =>
+							syncStatus === reusableBlock.meta?.sync_status ||
+							( ! syncStatus &&
+								reusableBlock.meta?.sync_status === '' )
+					)
+					.map( buildReusableBlockInserterItem )
 			: [];
 
 		const items = blockTypeInserterItems.reduce( ( accumulator, item ) => {
@@ -2816,10 +2837,11 @@ export function __unstableGetTemporarilyEditingAsBlocks( state ) {
 }
 
 export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
-	// Prevent overlay on disabled blocks. It's redundant since disabled blocks
-	// can't be selected, and prevents non-disabled nested blocks from being
-	// selected.
-	if ( getBlockEditingMode( state, clientId ) === 'disabled' ) {
+	// 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
+	// selected. If the mode is 'contentOnly' then the overlay is redundant
+	// since there will be no controls to interact with once selected.
+	if ( getBlockEditingMode( state, clientId ) !== 'default' ) {
 		return false;
 	}