Show confirmation dialog when moving a post to the trash

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>
+		</>
 	);
 }