[ experimental/nav-menus ] Delete menus in nav menus screen

packages/edit-navigation/src/components/delete-menu-button/index.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function DeleteMenuButton( { menuId, onDelete } ) {
+	const deleteMenu = async ( recordId ) => {
+		const path = `/__experimental/menus/${ recordId }?force=true`;
+		const deletedRecord = await apiFetch( {
+			path,
+			method: 'DELETE',
+		} );
+		return deletedRecord.previous;
+	};
+
+	const askToDelete = async () => {
+		if (
+			// eslint-disable-next-line no-alert
+			window.confirm(
+				__( 'Are you sure you want to delete this navigation?' )
+			)
+		) {
+			const deletedMenu = await deleteMenu( menuId );
+			onDelete( deletedMenu.id );
+		}
+	};
+
+	return (
+		<Button
+			className="menu-editor-button__delete"
+			isPrimary
+			onClick={ askToDelete }
+			isLink
+		>
+			{ __( 'Delete navigation' ) }
+		</Button>
+	);
+}

packages/edit-navigation/src/components/delete-menu-button/style.scss

@@ -0,0 +1,7 @@
+.components-button.is-link.menu-editor-button__delete {
+	color: $alert-red;
+	&:hover {
+		background: transparent;
+		color: $alert-red;
+	}
+}

packages/edit-navigation/src/components/menu-editor/block-editor-panel.js

@@ -17,7 +17,16 @@ import { Button, Panel, PanelBody, Popover } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
-export default function BlockEditorPanel( { saveBlocks } ) {
+/**
+ * Internal dependencies
+ */
+import DeleteMenuButton from '../delete-menu-button';
+
+export default function BlockEditorPanel( {
+	onDeleteMenu,
+	menuId,
+	saveBlocks,
+} ) {
 	const { isNavigationModeActive, hasSelectedBlock } = useSelect(
 		( select ) => {
 			const {
@@ -39,15 +48,13 @@ export default function BlockEditorPanel( { saveBlocks } ) {
 	);
 
 	return (
-		<Panel
-			className="edit-navigation-menu-editor__block-editor-panel"
-			header={
-				<Button isPrimary onClick={ saveBlocks }>
-					{ __( 'Save navigation' ) }
-				</Button>
-			}
-		>
+		<Panel className="edit-navigation-menu-editor__block-editor-panel">
 			<PanelBody title={ __( 'Navigation menu' ) }>
+				<div className="components-panel__header-actions">
+					<Button isPrimary onClick={ saveBlocks }>
+						{ __( 'Save navigation' ) }
+					</Button>
+				</div>
 				<NavigableToolbar
 					className={ classnames(
 						'edit-navigation-menu-editor__block-editor-toolbar',
@@ -65,6 +72,12 @@ export default function BlockEditorPanel( { saveBlocks } ) {
 						<BlockList />
 					</ObserveTyping>
 				</WritingFlow>
+				<div className="components-panel__footer-actions">
+					<DeleteMenuButton
+						menuId={ menuId }
+						onDelete={ onDeleteMenu }
+					/>
+				</div>
 			</PanelBody>
 		</Panel>
 	);

packages/edit-navigation/src/components/menu-editor/index.js

@@ -15,7 +15,11 @@ import MenuEditorShortcuts from './shortcuts';
 import BlockEditorPanel from './block-editor-panel';
 import NavigationStructurePanel from './navigation-structure-panel';
 
-export default function MenuEditor( { menuId, blockEditorSettings } ) {
+export default function MenuEditor( {
+	menuId,
+	blockEditorSettings,
+	onDeleteMenu,
+} ) {
 	const [ blocks, setBlocks, saveBlocks ] = useNavigationBlocks( menuId );
 	const isLargeViewport = useViewportMatch( 'medium' );
 
@@ -40,7 +44,11 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) {
 					blocks={ blocks }
 					initialOpen={ isLargeViewport }
 				/>
-				<BlockEditorPanel saveBlocks={ saveBlocks } />
+				<BlockEditorPanel
+					saveBlocks={ saveBlocks }
+					menuId={ menuId }
+					onDeleteMenu={ onDeleteMenu }
+				/>
 			</BlockEditorProvider>
 		</div>
 	);

packages/edit-navigation/src/components/menu-editor/style.scss

@@ -66,3 +66,20 @@
 	// Make panels collapsible in IE. The IE analogue of align-items: self-start;.
 	-ms-grid-row-align: start;
 }
+
+.components-panel__header-actions {
+	margin-top: $grid-unit-20;
+	padding-bottom: $grid-unit-20;
+	margin-bottom: $grid-unit-60;
+	width: 100%;
+	text-align: right;
+	border-bottom: 1px solid $light-gray-300;
+}
+
+.components-panel__footer-actions {
+	margin-top: $grid-unit-60;
+	padding-top: $grid-unit-20;
+	width: 100%;
+	text-align: left;
+	border-top: 1px solid $light-gray-300;
+}

packages/edit-navigation/src/components/menus-editor/index.js

@@ -1,3 +1,7 @@
+/**
+ * External dependencies
+ */
+import { filter } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -15,14 +19,16 @@ export default function MenusEditor( { blockEditorSettings } ) {
 	const menus = useSelect( ( select ) => select( 'core' ).getMenus() );
 
 	const [ menuId, setMenuId ] = useState( 0 );
+	const [ stateMenus, setStateMenus ] = useState( null );
 
 	useEffect( () => {
 		if ( menus?.length ) {
+			setStateMenus( menus );
 			setMenuId( menus[ 0 ].id );
 		}
 	}, [ menus ] );
 
-	if ( ! menus ) {
+	if ( ! stateMenus ) {
 		return <Spinner />;
 	}
 
@@ -33,7 +39,7 @@ export default function MenusEditor( { blockEditorSettings } ) {
 					<SelectControl
 						className="edit-navigation-menus-editor__menu-select-control"
 						label={ __( 'Select navigation to edit:' ) }
-						options={ menus.map( ( menu ) => ( {
+						options={ stateMenus.map( ( menu ) => ( {
 							value: menu.id,
 							label: menu.name,
 						} ) ) }
@@ -47,6 +53,15 @@ export default function MenusEditor( { blockEditorSettings } ) {
 				<MenuEditor
 					menuId={ menuId }
 					blockEditorSettings={ blockEditorSettings }
+					onDeleteMenu={ ( deletedMenu ) => {
+						const newStateMenus = filter( stateMenus, ( menu ) => {
+							return menu.id !== deletedMenu;
+						} );
+						setStateMenus( newStateMenus );
+						if ( newStateMenus.length ) {
+							setMenuId( newStateMenus[ 0 ].id );
+						}
+					} }
 				/>
 			) }
 		</>

packages/edit-navigation/src/style.scss

@@ -1,3 +1,4 @@
 @import "./components/layout/style.scss";
 @import "./components/menu-editor/style.scss";
 @import "./components/menus-editor/style.scss";
+@import "./components/delete-menu-button/style.scss";