@wordpress/block-editor 12.3.0 → 12.3.2

package/src/store/actions.js

@@ -25,40 +25,17 @@ import {
 	retrieveSelectedAttribute,
 	START_OF_SELECTED_AREA,
 } from '../utils/selection';
-import { __experimentalUpdateSettings } from './private-actions';
+import {
+	__experimentalUpdateSettings,
+	ensureDefaultBlock,
+	privateRemoveBlocks,
+} from './private-actions';
 
 /** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
 
 const castArray = ( maybeArray ) =>
 	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
 
-/**
- * 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).
- */
-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();
-	};
-
 /**
  * Action that resets blocks state to the specified array of blocks, taking precedence
  * over any other content reflected as an edit in state.
@@ -1195,34 +1172,8 @@ export const mergeBlocks =
  *                                         should be selected
  *                                         when a block is removed.
  */
-export const removeBlocks =
-	( clientIds, selectPrevious = true ) =>
-	( { 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;
-		}
-
-		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() );
-	};
+export const removeBlocks = ( clientIds, selectPrevious = true ) =>
+	privateRemoveBlocks( clientIds, selectPrevious );
 
 /**
  * Returns an action object used in signalling that the block with the

package/src/store/defaults.js

@@ -18,6 +18,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {number}        maxWidth                               Max width to constraint resizing
  * @property {boolean|Array} allowedBlockTypes                      Allowed block types
  * @property {boolean}       hasFixedToolbar                        Whether or not the editor toolbar is fixed
+ * @property {boolean}       distractionFree                        Whether or not the editor UI is distraction free
  * @property {boolean}       focusMode                              Whether the focus mode is enabled or not
  * @property {Array}         styles                                 Editor Styles
  * @property {boolean}       keepCaretInsideBlock                   Whether caret should move between blocks in edit mode

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 ) {