Show confirmation dialog when moving a post to the trash (#50219)

* Show confirmation dialog when moving a post to the trash * Update change detection e2e test --------- Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
WordPress · Oct 4, 2023 · cf08b62 · cf08b62 · github-actions · Oct 4, 2023
1 parent f06e1a8
commit cf08b62
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/packages/e2e-tests/specs/editor/various/change-detection.test.js b/packages/e2e-tests/specs/editor/various/change-detection.test.js
@@ -349,6 +349,7 @@ describe( 'Change detection', () => {
 		// Trash post.
 		await openDocumentSettingsSidebar();
 		await page.click( '.editor-post-trash.components-button' );
+		await page.click( '.components-confirm-dialog .is-primary' );
 
 		await Promise.all( [
 			// Wait for "Saved" to confirm save complete.

diff --git a/packages/editor/src/components/post-trash/index.js b/packages/editor/src/components/post-trash/index.js
@@ -2,8 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,21 +24,40 @@ export default function PostTrash() {
 		};
 	}, [] );
 	const { trashPost } = useDispatch( editorStore );
+	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 
 	if ( isNew || ! postId ) {
 		return null;
 	}
 
+	const handleConfirm = () => {
+		setShowConfirmDialog( false );
+		trashPost();
+	};
+
 	return (
-		<Button
-			className="editor-post-trash"
-			isDestructive
-			variant="secondary"
-			isBusy={ isDeleting }
-			aria-disabled={ isDeleting }
-			onClick={ isDeleting ? undefined : () => trashPost() }
-		>
-			{ __( 'Move to trash' ) }
-		</Button>
+		<>
+			<Button
+				className="editor-post-trash"
+				isDestructive
+				variant="secondary"
+				isBusy={ isDeleting }
+				aria-disabled={ isDeleting }
+				onClick={
+					isDeleting ? undefined : () => setShowConfirmDialog( true )
+				}
+			>
+				{ __( 'Move to trash' ) }
+			</Button>
+			<ConfirmDialog
+				isOpen={ showConfirmDialog }
+				onConfirm={ handleConfirm }
+				onCancel={ () => setShowConfirmDialog( false ) }
+			>
+				{ __(
+					'Are you sure you want to move this post to the trash?'
+				) }
+			</ConfirmDialog>
+		</>
 	);
 }