Show warning on critical block removal

packages/block-editor/src/components/block-removal-warning-modal/index.js

@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	Modal,
+	Button,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __, _n } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+// 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).
+//
+// @see https://github.com/WordPress/gutenberg/pull/51145
+export const blockTypePromptMessages = {
+	'core/query': __( 'Query Loop displays a list of posts or pages.' ),
+	'core/post-content': __(
+		'Post Content displays the content of a post or page.'
+	),
+};
+
+export function BlockRemovalWarningModal() {
+	const { clientIds, selectPrevious, blockNamesForPrompt } = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getRemovalPromptData()
+	);
+
+	const {
+		clearRemovalPrompt,
+		toggleRemovalPromptSupport,
+		privateRemoveBlocks,
+	} = unlock( useDispatch( blockEditorStore ) );
+
+	// Signalling the removal prompt is in place.
+	useEffect( () => {
+		toggleRemovalPromptSupport( true );
+		return () => {
+			toggleRemovalPromptSupport( false );
+		};
+	}, [ toggleRemovalPromptSupport ] );
+
+	if ( ! blockNamesForPrompt ) {
+		return;
+	}
+
+	const onConfirmRemoval = () => {
+		privateRemoveBlocks( clientIds, selectPrevious, /* force */ true );
+		clearRemovalPrompt();
+	};
+
+	return (
+		<Modal
+			title={ __( 'Are you sure?' ) }
+			onRequestClose={ clearRemovalPrompt }
+		>
+			{ blockNamesForPrompt.length === 1 ? (
+				<p>{ blockTypePromptMessages[ blockNamesForPrompt[ 0 ] ] }</p>
+			) : (
+				<ul style={ { listStyleType: 'disc', paddingLeft: '1rem' } }>
+					{ blockNamesForPrompt.map( ( name ) => (
+						<li key={ name }>
+							{ blockTypePromptMessages[ name ] }
+						</li>
+					) ) }
+				</ul>
+			) }
+			<p>
+				{ _n(
+					'Removing this block is not advised.',
+					'Removing these blocks is not advised.',
+					blockNamesForPrompt.length
+				) }
+			</p>
+			<HStack justify="right">
+				<Button variant="tertiary" onClick={ clearRemovalPrompt }>
+					{ __( 'Cancel' ) }
+				</Button>
+				<Button variant="primary" onClick={ onConfirmRemoval }>
+					{ __( 'Delete' ) }
+				</Button>
+			</HStack>
+		</Modal>
+	);
+}

packages/block-editor/src/private-apis.js

@@ -13,6 +13,7 @@ import { cleanEmptyObject } from './hooks/utils';
 import { useBlockEditingMode } from './components/block-editing-mode';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
+import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
 import { useLayoutClasses, useLayoutStyles } from './hooks';
 
 /**
@@ -31,6 +32,7 @@ lock( privateApis, {
 	useBlockEditingMode,
 	BlockQuickNavigation,
 	LayoutStyle,
+	BlockRemovalWarningModal,
 	useLayoutClasses,
 	useLayoutStyles,
 } );

packages/block-editor/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

packages/block-editor/src/store/private-actions.js

@@ -3,6 +3,15 @@
  */
 import { Platform } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { blockTypePromptMessages } from '../components/block-removal-warning-modal';
+import { isRemovalPromptSupported } from './private-selectors';
+
+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 +114,178 @@ 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.
+ *
+ * @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 what's the best way to unlock a private selector in this
+			// context?
+			select( ( state ) => isRemovalPromptSupported( state.root ) )
+		) {
+			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,
+	};
+}