diff --git a/packages/edit-navigation/src/components/delete-menu-button/index.js b/packages/edit-navigation/src/components/delete-menu-button/index.js
index 118b1cc972fd4e..9cf1799ebfaf71 100644
--- a/packages/edit-navigation/src/components/delete-menu-button/index.js
+++ b/packages/edit-navigation/src/components/delete-menu-button/index.js
@@ -1,20 +1,10 @@
/**
* 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;
- };
-
+export default function DeleteMenuButton( { onDelete } ) {
const askToDelete = async () => {
if (
// eslint-disable-next-line no-alert
@@ -22,8 +12,7 @@ export default function DeleteMenuButton( { menuId, onDelete } ) {
__( 'Are you sure you want to delete this navigation?' )
)
) {
- const deletedMenu = await deleteMenu( menuId );
- onDelete( deletedMenu.id );
+ onDelete();
}
};
diff --git a/packages/edit-navigation/src/components/menus-editor/index.js b/packages/edit-navigation/src/components/menus-editor/index.js
index 2f2b5c2407c803..41ffacf0cd0c30 100644
--- a/packages/edit-navigation/src/components/menus-editor/index.js
+++ b/packages/edit-navigation/src/components/menus-editor/index.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
import { useState, useEffect } from '@wordpress/element';
import {
Button,
@@ -32,20 +32,19 @@ export default function MenusEditor( { blockEditorSettings } ) {
false
);
+ const { deleteMenu } = useDispatch( 'core' );
+
useEffect( () => {
if ( ! hasCompletedFirstLoad && hasLoadedMenus ) {
setHasCompletedFirstLoad( true );
}
- }, [ hasLoadedMenus ] );
+ }, [ menus, hasLoadedMenus ] );
const [ menuId, setMenuId ] = useState();
- const [ stateMenus, setStateMenus ] = useState();
const [ showCreateMenuPanel, setShowCreateMenuPanel ] = useState( false );
useEffect( () => {
if ( menus?.length ) {
- setStateMenus( menus );
-
// Only set menuId if it's currently unset.
if ( ! menuId ) {
setMenuId( menus[ 0 ].id );
@@ -57,7 +56,7 @@ export default function MenusEditor( { blockEditorSettings } ) {
return ;
}
- const hasMenus = !! stateMenus?.length;
+ const hasMenus = !! menus?.length;
const isCreateMenuPanelVisible =
hasCompletedFirstLoad && ( ! hasMenus || showCreateMenuPanel );
@@ -75,7 +74,7 @@ export default function MenusEditor( { blockEditorSettings } ) {
( {
+ options={ menus?.map( ( menu ) => ( {
value: menu.id,
label: menu.name,
} ) ) }
@@ -96,7 +95,7 @@ export default function MenusEditor( { blockEditorSettings } ) {
{ isCreateMenuPanelVisible && (
{
- const newStateMenus = stateMenus.filter( ( menu ) => {
- return menu.id !== deletedMenu;
- } );
- setStateMenus( newStateMenus );
- if ( newStateMenus.length ) {
- setMenuId( newStateMenus[ 0 ].id );
- } else {
- setMenuId();
- }
+ onDeleteMenu={ async () => {
+ await deleteMenu( menuId, 'force=true' );
+ setMenuId( false );
} }
/>
) }