Add standard notices to nav menu page (#22374)

* Add notices to nav menu page

* Improve styles

* Handle breakpoints

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

@@ -1,23 +1,48 @@
+/**
+ * External dependencies
+ */
+import { filter } from 'lodash';
+
 /**
  * WordPress dependencies
  */
+import { NoticeList, SnackbarList } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { SnackbarList } from '@wordpress/components';
 
-export default function Notices() {
+export default function EditNavigationNotices() {
+	const { removeNotice } = useDispatch( 'core/notices' );
 	const notices = useSelect(
-		( select ) =>
-			select( 'core/notices' )
-				.getNotices()
-				.filter( ( notice ) => notice.type === 'snackbar' ),
+		( select ) => select( 'core/notices' ).getNotices(),
 		[]
 	);
-	const { removeNotice } = useDispatch( 'core/notices' );
+	const dismissibleNotices = filter( notices, {
+		isDismissible: true,
+		type: 'default',
+	} );
+	const nonDismissibleNotices = filter( notices, {
+		isDismissible: false,
+		type: 'default',
+	} );
+	const snackbarNotices = filter( notices, {
+		type: 'snackbar',
+	} );
+
 	return (
-		<SnackbarList
-			className="edit-navigation-notices"
-			notices={ notices }
-			onRemove={ removeNotice }
-		/>
+		<>
+			<NoticeList
+				notices={ nonDismissibleNotices }
+				className="edit-navigation-notices__notice-list"
+			/>
+			<NoticeList
+				notices={ dismissibleNotices }
+				className="edit-navigation-notices__notice-list"
+				onRemove={ removeNotice }
+			/>
+			<SnackbarList
+				notices={ snackbarNotices }
+				className="edit-navigation-notices__snackbar-list"
+				onRemove={ removeNotice }
+			/>
+		</>
 	);
 }

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

@@ -1,4 +1,25 @@
-.components-snackbar-list.edit-navigation-notices {
+.edit-navigation-notices__snackbar-list {
 	position: fixed;
 	bottom: 20px;
 }
+
+.edit-navigation-notices__notice-list {
+	// The page has a 10px left margin at narrower widths, reverse that so that the notice sits flush.
+	margin-left: -10px;
+
+	@include break-medium {
+		// The page has a 20px left margin at wider widths, reverse that so that the notice sits flush.
+		margin-left: -20px;
+	}
+
+	// Notices have some unusual margin and padding by default, reset that.
+	.components-notice {
+		margin: 0;
+		padding-right: 12px;
+
+		// Make sure the close button is centered.
+		.components-button {
+			align-self: initial;
+		}
+	}
+}