Add confirmation step when deleting a Template (#52236)

packages/edit-site/src/components/template-actions/index.js

@@ -3,8 +3,14 @@
  */
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -84,17 +90,14 @@ export default function TemplateActions( {
 								template={ template }
 								onClose={ onClose }
 							/>
-							<MenuItem
-								isDestructive
-								isTertiary
-								onClick={ () => {
+							<DeleteMenuItem
+								onRemove={ () => {
 									removeTemplate( template );
 									onRemove?.();
 									onClose();
 								} }
-							>
-								{ __( 'Delete' ) }
-							</MenuItem>
+								isTemplate={ template.type === 'wp_template' }
+							/>
 						</>
 					) }
 					{ isRevertable && (
@@ -115,3 +118,30 @@ export default function TemplateActions( {
 		</DropdownMenu>
 	);
 }
+
+function DeleteMenuItem( { onRemove, isTemplate } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	return (
+		<>
+			<MenuItem
+				isDestructive
+				isTertiary
+				onClick={ () => setIsModalOpen( true ) }
+			>
+				{ __( 'Delete' ) }
+			</MenuItem>
+			<ConfirmDialog
+				isOpen={ isModalOpen }
+				onConfirm={ onRemove }
+				onCancel={ () => setIsModalOpen( false ) }
+				confirmButtonText={ __( 'Delete' ) }
+			>
+				{ isTemplate
+					? __( 'Are you sure you want to delete this template?' )
+					: __(
+							'Are you sure you want to delete this template part?'
+					  ) }
+			</ConfirmDialog>
+		</>
+	);
+}