diff --git a/packages/edit-navigation/src/components/add-menu/index.js b/packages/edit-navigation/src/components/add-menu/index.js
index 7ac89a7076d815..7e911bae6d13f8 100644
--- a/packages/edit-navigation/src/components/add-menu/index.js
+++ b/packages/edit-navigation/src/components/add-menu/index.js
@@ -1,26 +1,27 @@
/**
* External dependencies
*/
-import { some } from 'lodash';
import classnames from 'classnames';
/**
* WordPress dependencies
*/
-import { useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
import { Button, TextControl, withNotices } from '@wordpress/components';
import { useFocusOnMount } from '@wordpress/compose';
-import { __, sprintf } from '@wordpress/i18n';
import { store as noticesStore } from '@wordpress/notices';
import { store as coreStore } from '@wordpress/core-data';
-const menuNameMatches = ( menuName ) => ( menu ) =>
- menu.name.toLowerCase() === menuName.toLowerCase();
+/**
+ * Internal dependencies
+ */
+import { MENU_POST_TYPE, MENU_KIND } from '../../constants';
+import { stripHTML } from '../../utils';
function AddMenu( {
className,
- menus,
onCreate,
titleText,
helpText,
@@ -36,6 +37,19 @@ function AddMenu( {
const { createErrorNotice, removeAllNotices } = noticeOperations;
+ const lastSaveError = useSelect( ( select ) => {
+ return select( coreStore ).getLastEntitySaveError(
+ MENU_KIND,
+ MENU_POST_TYPE
+ );
+ }, [] );
+
+ useEffect( () => {
+ if ( lastSaveError ) {
+ createErrorNotice( stripHTML( lastSaveError?.message ) );
+ }
+ }, [ lastSaveError ] );
+
const createMenu = async ( event ) => {
event.preventDefault();
@@ -45,19 +59,6 @@ function AddMenu( {
// Remove any existing notices.
removeAllNotices();
-
- if ( some( menus, menuNameMatches( menuName ) ) ) {
- const message = sprintf(
- // translators: %s: the name of a menu.
- __(
- 'The menu name %s conflicts with another menu name. Please try another.'
- ),
- menuName
- );
- createErrorNotice( message );
- return;
- }
-
setIsCreatingMenu( true );
const menu = await saveMenu( { name: menuName } );
diff --git a/packages/edit-navigation/src/components/add-menu/style.scss b/packages/edit-navigation/src/components/add-menu/style.scss
index 5675152fe2f72d..835fb912545a02 100644
--- a/packages/edit-navigation/src/components/add-menu/style.scss
+++ b/packages/edit-navigation/src/components/add-menu/style.scss
@@ -15,10 +15,6 @@
.components-notice__content {
margin: 0;
}
-
- .components-notice__dismiss {
- align-self: center;
- }
}
}
diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
index 01a11dfaf5bcfb..0dd3a93651015f 100644
--- a/packages/edit-navigation/src/components/header/index.js
+++ b/packages/edit-navigation/src/components/header/index.js
@@ -62,7 +62,7 @@ export default function Header( {
- { isMediumViewport &&
}
+ { isMediumViewport &&
}
diff --git a/packages/edit-navigation/src/components/header/new-button.js b/packages/edit-navigation/src/components/header/new-button.js
index f790c9a53680a0..6993ddca1d2f78 100644
--- a/packages/edit-navigation/src/components/header/new-button.js
+++ b/packages/edit-navigation/src/components/header/new-button.js
@@ -11,7 +11,7 @@ import { useState } from '@wordpress/element';
import AddMenu from '../add-menu';
import { useSelectedMenuId } from '../../hooks';
-export default function NewButton( { menus } ) {
+export default function NewButton() {
const [ isModalOpen, setIsModalOpen ] = useState( false );
const [ , setSelectedMenuId ] = useSelectedMenuId();
@@ -27,7 +27,6 @@ export default function NewButton( { menus } ) {
onRequestClose={ () => setIsModalOpen( false ) }
>
{
closeModal();
onSelectMenu( menuId );
diff --git a/packages/edit-navigation/src/hooks/use-menu-notifications.js b/packages/edit-navigation/src/hooks/use-menu-notifications.js
index 8ff8d4f028affa..51b793e56e2816 100644
--- a/packages/edit-navigation/src/hooks/use-menu-notifications.js
+++ b/packages/edit-navigation/src/hooks/use-menu-notifications.js
@@ -5,47 +5,31 @@ import { useSelect, useDispatch } from '@wordpress/data';
import { useEffect } from '@wordpress/element';
import { store as noticesStore } from '@wordpress/notices';
import { store as coreStore } from '@wordpress/core-data';
+
/**
* Internal dependencies
*/
import { MENU_POST_TYPE, MENU_KIND } from '../constants';
+import { stripHTML } from '../utils';
export default function useMenuNotifications( menuId ) {
- const { lastSaveError, lastDeleteError } = useSelect(
- ( select ) => ( {
- lastSaveError: select( coreStore ).getLastEntitySaveError(
- MENU_KIND,
- MENU_POST_TYPE
- ),
- lastDeleteError: select( coreStore ).getLastEntityDeleteError(
+ const { createErrorNotice } = useDispatch( noticesStore );
+ const lastDeleteError = useSelect(
+ ( select ) => {
+ return select( coreStore ).getLastEntityDeleteError(
MENU_KIND,
MENU_POST_TYPE,
menuId
- ),
- } ),
+ );
+ },
[ menuId ]
);
- const { createErrorNotice } = useDispatch( noticesStore );
-
- const processError = ( error ) => {
- const document = new window.DOMParser().parseFromString(
- error.message,
- 'text/html'
- );
- const errorText = document.body.textContent || '';
- createErrorNotice( errorText, { id: 'edit-navigation-error' } );
- };
-
- useEffect( () => {
- if ( lastSaveError ) {
- processError( lastSaveError );
- }
- }, [ lastSaveError ] );
-
useEffect( () => {
if ( lastDeleteError ) {
- processError( lastDeleteError );
+ createErrorNotice( stripHTML( lastDeleteError?.message ), {
+ id: 'edit-navigation-error',
+ } );
}
}, [ lastDeleteError ] );
}
diff --git a/packages/edit-navigation/src/utils/index.js b/packages/edit-navigation/src/utils/index.js
new file mode 100644
index 00000000000000..328f35564874f5
--- /dev/null
+++ b/packages/edit-navigation/src/utils/index.js
@@ -0,0 +1,18 @@
+/**
+ * Removes any HTML tags from the provided string.
+ *
+ * @todo Use `stripHTML` from `@wordpress/dom` package
+ * after https://github.com/WordPress/gutenberg/issues/33424
+ * is resolved.
+ *
+ * @param {string} html The string containing html.
+ *
+ * @return {string} The text content with any html removed.
+ */
+export function stripHTML( html ) {
+ const document = new window.DOMParser().parseFromString(
+ html,
+ 'text/html'
+ );
+ return document.body.textContent || '';
+}