adds notifications to nav screen (#22326)

- adds a sample notification for saving menus
- fixes a empty menu items crashing the menu page

packages/edit-navigation/src/components/layout/index.js

@@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import Notices from '../notices';
 import MenusEditor from '../menus-editor';
 import MenuLocationsEditor from '../menu-locations-editor';
 
@@ -22,7 +23,7 @@ export default function Layout( { blockEditorSettings } ) {
 			<SlotFillProvider>
 				<DropZoneProvider>
 					<FocusReturnProvider>
-						{ /* <Notices /> */ }
+						<Notices />
 						<TabPanel
 							className="edit-navigation-layout__tab-panel"
 							tabs={ [

packages/edit-navigation/src/components/menu-editor/use-navigation-blocks.js

@@ -9,6 +9,7 @@ import { groupBy, isEqual, difference } from 'lodash';
 import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useRef, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 function createBlockFromMenuItem( menuItem, innerBlocks = [] ) {
 	return createBlock(
@@ -37,7 +38,7 @@ export default function useNavigationBlocks( menuId ) {
 	);
 
 	const { saveMenuItem } = useDispatch( 'core' );
-
+	const { createSuccessNotice } = useDispatch( 'core/notices' );
 	const [ blocks, setBlocks ] = useState( [] );
 
 	const menuItemsRef = useRef( {} );
@@ -131,6 +132,10 @@ export default function useNavigationBlocks( menuId ) {
 		for ( const deletedClientId of deletedClientIds ) {
 			// TODO - delete menu items.
 		}
+
+		createSuccessNotice( __( 'Navigation saved.' ), {
+			type: 'snackbar',
+		} );
 	};
 
 	return [ blocks, setBlocks, saveBlocks ];

packages/edit-navigation/src/components/notices/index.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { SnackbarList } from '@wordpress/components';
+
+export default function Notices() {
+	const notices = useSelect(
+		( select ) =>
+			select( 'core/notices' )
+				.getNotices()
+				.filter( ( notice ) => notice.type === 'snackbar' ),
+		[]
+	);
+	const { removeNotice } = useDispatch( 'core/notices' );
+	return (
+		<SnackbarList
+			className="edit-navigation-notices"
+			notices={ notices }
+			onRemove={ removeNotice }
+		/>
+	);
+}

packages/edit-navigation/src/components/notices/style.scss

@@ -0,0 +1,4 @@
+.components-snackbar-list.edit-navigation-notices {
+	position: fixed;
+	bottom: 20px;
+}

packages/edit-navigation/src/index.js

@@ -6,6 +6,7 @@ import { map } from 'lodash';
 /**
  * WordPress dependencies
  */
+import '@wordpress/notices';
 import {
 	registerCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,

packages/edit-navigation/src/style.scss

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