Add delete nav menu button to nav block (#35981)

* Add a delete button to the navigation block inspector

* Style delete button

* Force delete menus

packages/block-library/src/navigation/edit/index.js

@@ -43,6 +43,7 @@ import NavigationInnerBlocks from './inner-blocks';
 import NavigationMenuSelector from './navigation-menu-selector';
 import NavigationMenuNameControl from './navigation-menu-name-control';
 import UnsavedInnerBlocks from './unsaved-inner-blocks';
+import NavigationMenuDeleteControl from './navigation-menu-delete-control';
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
@@ -112,7 +113,7 @@ function Navigation( {
 		[ clientId ]
 	);
 	const hasExistingNavItems = !! innerBlocks.length;
-	const { selectBlock } = useDispatch( blockEditorStore );
+	const { replaceInnerBlocks, selectBlock } = useDispatch( blockEditorStore );
 
 	const [ isPlaceholderShown, setIsPlaceholderShown ] = useState(
 		! hasExistingNavItems
@@ -298,8 +299,17 @@ function Navigation( {
 				{ listViewModal }
 				<InspectorControls>
 					{ isEntityAvailable && (
-						<PanelBody title={ __( 'Navigation menu name' ) }>
+						<PanelBody title={ __( 'Navigation menu' ) }>
 							<NavigationMenuNameControl />
+							<NavigationMenuDeleteControl
+								onDelete={ () => {
+									replaceInnerBlocks( clientId, [] );
+									setAttributes( {
+										navigationMenuId: undefined,
+									} );
+									setIsPlaceholderShown( true );
+								} }
+							/>
 						</PanelBody>
 					) }
 					{ hasSubmenuIndicatorSetting && (

packages/block-library/src/navigation/edit/navigation-menu-delete-control.js

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Flex, FlexItem, Modal } from '@wordpress/components';
+import {
+	store as coreStore,
+	useEntityId,
+	useEntityProp,
+} from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+export default function NavigationMenuDeleteControl( { onDelete } ) {
+	const [ isConfirmModalVisible, setIsConfirmModalVisible ] = useState(
+		false
+	);
+	const id = useEntityId( 'postType', 'wp_navigation' );
+	const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title' );
+	const { deleteEntityRecord } = useDispatch( coreStore );
+
+	return (
+		<>
+			<Button
+				className="wp-block-navigation-delete-menu-button"
+				variant="secondary"
+				isDestructive
+				onClick={ () => {
+					setIsConfirmModalVisible( true );
+				} }
+			>
+				{ __( 'Delete menu' ) }
+			</Button>
+			{ isConfirmModalVisible && (
+				<Modal
+					title={ sprintf(
+						/* translators: %s: the name of a menu to delete */
+						__( 'Delete %s' ),
+						title
+					) }
+					closeLabel={ __( 'Cancel' ) }
+					onRequestClose={ () => setIsConfirmModalVisible( false ) }
+				>
+					<p>
+						{ __(
+							'Are you sure you want to delete this navigation menu?'
+						) }
+					</p>
+					<Flex justify="flex-end">
+						<FlexItem>
+							<Button
+								variant="secondary"
+								onClick={ () => {
+									setIsConfirmModalVisible( false );
+								} }
+							>
+								{ __( 'Cancel' ) }
+							</Button>
+						</FlexItem>
+						<FlexItem>
+							<Button
+								variant="primary"
+								onClick={ () => {
+									deleteEntityRecord(
+										'postType',
+										'wp_navigation',
+										id,
+										{ force: true }
+									);
+									onDelete();
+								} }
+							>
+								{ __( 'Confirm' ) }
+							</Button>
+						</FlexItem>
+					</Flex>
+				</Modal>
+			) }
+		</>
+	);
+}

packages/block-library/src/navigation/editor.scss

@@ -529,3 +529,8 @@ body.editor-styles-wrapper
 		margin-top: 0;
 	}
 }
+
+.wp-block-navigation-delete-menu-button {
+	width: 100%;
+	justify-content: center;
+}