Make the delete navigation menu confirm dialogs consistent (WordPress…

…#59825) * Make the delete navigation menu confirm dialogs consistent. * Simplify and make consistent the deleted menu snackbar notices. * Add Best practices section to readme. Co-authored-by: afercia <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: youknowriad <[email protected]>
carstingaxion · Mar 27, 2024 · 99286d8 · 99286d8
1 parent a943401
commit 99286d8
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 72 deletions.
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -39,7 +39,7 @@ import {
 	Spinner,
 	Notice,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { close, Icon } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
@@ -841,15 +841,11 @@ function Navigation( {
 						{ hasResolvedCanUserDeleteNavigationMenu &&
 							canUserDeleteNavigationMenu && (
 								<NavigationMenuDeleteControl
-									onDelete={ ( deletedMenuTitle = '' ) => {
+									onDelete={ () => {
 										replaceInnerBlocks( clientId, [] );
 										showNavigationMenuStatusNotice(
-											sprintf(
-												// translators: %s: the name of a menu (e.g. Header navigation).
-												__(
-													'Navigation menu %s successfully deleted.'
-												),
-												deletedMenuTitle
+											__(
+												'Navigation menu successfully deleted.'
 											)
 										);
 									} }

diff --git a/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js b/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js
@@ -3,23 +3,17 @@
  */
 import {
 	Button,
-	Modal,
-	__experimentalHStack as HStack,
+	__experimentalConfirmDialog as ConfirmDialog,
 } from '@wordpress/components';
-import {
-	store as coreStore,
-	useEntityId,
-	useEntityProp,
-} from '@wordpress/core-data';
+import { store as coreStore, useEntityId } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 export default function NavigationMenuDeleteControl( { onDelete } ) {
-	const [ isConfirmModalVisible, setIsConfirmModalVisible ] =
+	const [ isConfirmDialogVisible, setIsConfirmDialogVisible ] =
 		useState( false );
 	const id = useEntityId( 'postType', 'wp_navigation' );
-	const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title' );
 	const { deleteEntityRecord } = useDispatch( coreStore );
 
 	return (
@@ -29,50 +23,29 @@ export default function NavigationMenuDeleteControl( { onDelete } ) {
 				variant="secondary"
 				isDestructive
 				onClick={ () => {
-					setIsConfirmModalVisible( true );
+					setIsConfirmDialogVisible( true );
 				} }
 			>
 				{ __( 'Delete menu' ) }
 			</Button>
-			{ isConfirmModalVisible && (
-				<Modal
-					title={ sprintf(
-						/* translators: %s: the name of a menu to delete */
-						__( 'Delete %s' ),
-						title
-					) }
-					onRequestClose={ () => setIsConfirmModalVisible( false ) }
+			{ isConfirmDialogVisible && (
+				<ConfirmDialog
+					isOpen
+					onConfirm={ () => {
+						deleteEntityRecord( 'postType', 'wp_navigation', id, {
+							force: true,
+						} );
+						onDelete();
+					} }
+					onCancel={ () => {
+						setIsConfirmDialogVisible( false );
+					} }
+					confirmButtonText={ __( 'Delete' ) }
 				>
-					<p>
-						{ __(
-							'Are you sure you want to delete this navigation menu?'
-						) }
-					</p>
-					<HStack justify="right">
-						<Button
-							variant="tertiary"
-							onClick={ () => {
-								setIsConfirmModalVisible( false );
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							variant="primary"
-							onClick={ () => {
-								deleteEntityRecord(
-									'postType',
-									'wp_navigation',
-									id,
-									{ force: true }
-								);
-								onDelete( title );
-							} }
-						>
-							{ __( 'Confirm' ) }
-						</Button>
-					</HStack>
-				</Modal>
+					{ __(
+						'Are you sure you want to delete this Navigation menu?'
+					) }
+				</ConfirmDialog>
 			) }
 		</>
 	);

diff --git a/packages/components/src/confirm-dialog/README.md b/packages/components/src/confirm-dialog/README.md
@@ -138,3 +138,10 @@ The optional custom text to display as the confirmation button's label
 -   Default: "Cancel"
 
 The optional custom text to display as the cancellation button's label
+
+## Best practices
+
+The ConfirmDialog component should:
+
+-   Be used only for short confirmation messages where a cancel and confirm actions are provided.
+-   Use a descriptive text for the _confirm_ button. Default is "OK".
diff --git a/...on-screen-navigation-menu/delete-modal.js → ...-navigation-menu/delete-confirm-dialog.js b/...on-screen-navigation-menu/delete-modal.js → ...-navigation-menu/delete-confirm-dialog.js
@@ -4,12 +4,11 @@
 import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function RenameModal( { onClose, onConfirm } ) {
+export default function DeleteConfirmDialog( { onClose, onConfirm } ) {
 	return (
 		<ConfirmDialog
 			isOpen
-			onConfirm={ ( e ) => {
-				e.preventDefault();
+			onConfirm={ () => {
 				onConfirm();
 
 				// Immediate close avoids ability to hit delete multiple times.

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js
@@ -10,7 +10,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import RenameModal from './rename-modal';
-import DeleteModal from './delete-modal';
+import DeleteConfirmDialog from './delete-confirm-dialog';
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
@@ -20,14 +20,15 @@ export default function ScreenNavigationMoreMenu( props ) {
 	const { onDelete, onSave, onDuplicate, menuTitle } = props;
 
 	const [ renameModalOpen, setRenameModalOpen ] = useState( false );
-	const [ deleteModalOpen, setDeleteModalOpen ] = useState( false );
+	const [ deleteConfirmDialogOpen, setDeleteConfirmDialogOpen ] =
+		useState( false );
 
 	const closeModals = () => {
 		setRenameModalOpen( false );
-		setDeleteModalOpen( false );
+		setDeleteConfirmDialogOpen( false );
 	};
 	const openRenameModal = () => setRenameModalOpen( true );
-	const openDeleteModal = () => setDeleteModalOpen( true );
+	const openDeleteConfirmDialog = () => setDeleteConfirmDialogOpen( true );
 
 	return (
 		<>
@@ -60,7 +61,7 @@ export default function ScreenNavigationMoreMenu( props ) {
 							<MenuItem
 								isDestructive
 								onClick={ () => {
-									openDeleteModal();
+									openDeleteConfirmDialog();
 
 									// Close the dropdown after opening the modal.
 									onClose();
@@ -72,11 +73,12 @@ export default function ScreenNavigationMoreMenu( props ) {
 					</div>
 				) }
 			</DropdownMenu>
-
-			{ deleteModalOpen && (
-				<DeleteModal onClose={ closeModals } onConfirm={ onDelete } />
+			{ deleteConfirmDialogOpen && (
+				<DeleteConfirmDialog
+					onClose={ closeModals }
+					onConfirm={ onDelete }
+				/>
 			) }
-
 			{ renameModalOpen && (
 				<RenameModal
 					onClose={ closeModals }

diff --git a/.../src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js b/.../src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js
@@ -35,9 +35,12 @@ function useDeleteNavigationMenu() {
 					throwOnError: true,
 				}
 			);
-			createSuccessNotice( __( 'Deleted Navigation menu' ), {
-				type: 'snackbar',
-			} );
+			createSuccessNotice(
+				__( 'Navigation menu successfully deleted.' ),
+				{
+					type: 'snackbar',
+				}
+			);
 			goTo( '/navigation' );
 		} catch ( error ) {
 			createErrorNotice(