diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index ea8b7f7dd84775..089b462cc2701c 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/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 } { isEntityAvailable && ( - + + { + replaceInnerBlocks( clientId, [] ); + setAttributes( { + navigationMenuId: undefined, + } ); + setIsPlaceholderShown( true ); + } } + /> ) } { hasSubmenuIndicatorSetting && ( 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 new file mode 100644 index 00000000000000..b9594c7d620d0d --- /dev/null +++ b/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 ( + <> + + { isConfirmModalVisible && ( + setIsConfirmModalVisible( false ) } + > +

+ { __( + 'Are you sure you want to delete this navigation menu?' + ) } +

+ + + + + + + + +
+ ) } + + ); +} diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 60d65922fcbcd0..0e18fd0a065742 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/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; +}