Editor: Extract snackbars into a separate component (#33355)

* Add notices container to InterfaceSkeleton.
* Move the `EditorSnackbars` component to the notices container.

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

@@ -12,6 +12,7 @@ import {
 	UnsavedChangesWarning,
 	EditorNotices,
 	EditorKeyboardShortcutsRegister,
+	EditorSnackbars,
 	store as editorStore,
 } from '@wordpress/editor';
 import { AsyncModeProvider, useSelect, useDispatch } from '@wordpress/data';
@@ -220,6 +221,7 @@ function Layout( { styles } ) {
 						</>
 					)
 				}
+				notices={ <EditorSnackbars /> }
 				content={
 					<>
 						<EditorNotices />

packages/edit-site/src/components/editor/index.js

@@ -19,6 +19,7 @@ import {
 } from '@wordpress/interface';
 import {
 	EditorNotices,
+	EditorSnackbars,
 	EntitiesSavedStates,
 	UnsavedChangesWarning,
 	store as editorStore,
@@ -213,6 +214,7 @@ function Editor( { initialSettings } ) {
 												}
 											/>
 										}
+										notices={ <EditorSnackbars /> }
 										content={
 											<>
 												<EditorNotices />

packages/editor/src/components/editor-notices/index.js

@@ -6,7 +6,7 @@ import { filter } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { NoticeList, SnackbarList } from '@wordpress/components';
+import { NoticeList } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { store as noticesStore } from '@wordpress/notices';
@@ -25,9 +25,6 @@ export function EditorNotices( { notices, onRemove } ) {
 		isDismissible: false,
 		type: 'default',
 	} );
-	const snackbarNotices = filter( notices, {
-		type: 'snackbar',
-	} );
 
 	return (
 		<>
@@ -42,11 +39,6 @@ export function EditorNotices( { notices, onRemove } ) {
 			>
 				<TemplateValidationNotice />
 			</NoticeList>
-			<SnackbarList
-				notices={ snackbarNotices }
-				className="components-editor-notices__snackbar"
-				onRemove={ onRemove }
-			/>
 		</>
 	);
 }

packages/editor/src/components/editor-snackbars/index.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { filter } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { SnackbarList } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function EditorSnackbars() {
+	const notices = useSelect(
+		( select ) => select( noticesStore ).getNotices(),
+		[]
+	);
+	const { removeNotice } = useDispatch( noticesStore );
+	const snackbarNotices = filter( notices, {
+		type: 'snackbar',
+	} );
+
+	return (
+		<SnackbarList
+			notices={ snackbarNotices }
+			className="components-editor-notices__snackbar"
+			onRemove={ removeNotice }
+		/>
+	);
+}

packages/editor/src/components/index.js

@@ -11,6 +11,7 @@ export { default as EditorKeyboardShortcutsRegister } from './global-keyboard-sh
 export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';
 export { default as EditorNotices } from './editor-notices';
+export { default as EditorSnackbars } from './editor-snackbars';
 export { default as EntitiesSavedStates } from './entities-saved-states';
 export { default as ErrorBoundary } from './error-boundary';
 export { default as LocalAutosaveMonitor } from './local-autosave-monitor';

packages/interface/src/components/interface-skeleton/index.js

@@ -3,6 +3,9 @@
  */
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
 /**
  * WordPress dependencies
  */
@@ -31,6 +34,7 @@ function InterfaceSkeleton(
 		header,
 		sidebar,
 		secondarySidebar,
+		notices,
 		content,
 		drawer,
 		actions,
@@ -105,6 +109,11 @@ function InterfaceSkeleton(
 							{ secondarySidebar }
 						</div>
 					) }
+					{ !! notices && (
+						<div className="interface-interface-skeleton__notices">
+							{ notices }
+						</div>
+					) }
 					<div
 						className="interface-interface-skeleton__content"
 						role="region"