Improve text and design of the block removal warnings (#56869)

* Improve text and design of the block removal warnings * Updating heading from "Are you sure?" to "Be careful!" --------- Co-authored-by: annezazu <annezazu@gmail.com>
WordPress · Dec 8, 2023 · 83434bf · 83434bf · github-actions · Dec 8, 2023
1 parent 25cd246
commit 83434bf
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 16 deletions.
diff --git a/packages/block-editor/src/components/block-removal-warning-modal/index.js b/packages/block-editor/src/components/block-removal-warning-modal/index.js
@@ -8,7 +8,7 @@ import {
 	Button,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _n } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -48,22 +48,15 @@ export function BlockRemovalWarningModal( { rules } ) {
 
 	return (
 		<Modal
-			title={ __( 'Are you sure?' ) }
+			title={ __( 'Be careful!' ) }
 			onRequestClose={ clearBlockRemovalPrompt }
 		>
-			{ blockNamesForPrompt.length === 1 ? (
-				<p>{ rules[ blockNamesForPrompt[ 0 ] ] }</p>
-			) : (
-				<ul style={ { listStyleType: 'disc', paddingLeft: '1rem' } }>
-					{ blockNamesForPrompt.map( ( name ) => (
-						<li key={ name }>{ rules[ name ] }</li>
-					) ) }
-				</ul>
-			) }
 			<p>
-				{ blockNamesForPrompt.length > 1
-					? __( 'Removing these blocks is not advised.' )
-					: __( 'Removing this block is not advised.' ) }
+				{ _n(
+					'Post or page content will not be displayed if you delete this block.',
+					'Post or page content will not be displayed if you delete these blocks.',
+					blockNamesForPrompt.length
+				) }
 			</p>
 			<HStack justify="right">
 				<Button variant="tertiary" onClick={ clearBlockRemovalPrompt }>

diff --git a/test/e2e/specs/site-editor/block-removal.spec.js b/test/e2e/specs/site-editor/block-removal.spec.js
@@ -34,7 +34,9 @@ test.describe( 'Site editor block removal prompt', () => {
 
 		// Expect the block removal prompt to have appeared
 		await expect(
-			page.getByText( 'Query Loop displays a list of posts or pages.' )
+			page.getByText(
+				'Post or page content will not be displayed if you delete these blocks.'
+			)
 		).toBeVisible();
 	} );
 
@@ -57,7 +59,7 @@ test.describe( 'Site editor block removal prompt', () => {
 		// Expect the block removal prompt to have appeared
 		await expect(
 			page.getByText(
-				'Post Template displays each post or page in a Query Loop.'
+				'Post or page content will not be displayed if you delete this block.'
 			)
 		).toBeVisible();
 	} );