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 || ''; +}