Adding snackbar notices support to the new widgets page

packages/edit-widgets/package.json

@@ -25,7 +25,8 @@
 		"@wordpress/block-editor": "file:../block-editor",
 		"@wordpress/components": "file:../components",
 		"@wordpress/element": "file:../element",
-		"@wordpress/i18n": "file:../i18n"
+		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/notices": "file:../notices"
 	},
 	"publishConfig": {
 		"access": "public"

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

@@ -10,12 +10,14 @@ import { navigateRegions } from '@wordpress/components';
 import Header from '../header';
 import Sidebar from '../sidebar';
 import WidgetAreas from '../widget-areas';
+import Notices from '../notices';
 
 function Layout( { blockEditorSettings } ) {
 	return (
 		<>
 			<Header />
 			<Sidebar />
+			<Notices />
 			<div
 				className="edit-widgets-layout__content"
 				role="region"

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

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { filter } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { SnackbarList } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+function Notices() {
+	const { notices } = useSelect( ( select ) => {
+		return {
+			notices: select( 'core/notices' ).getNotices(),
+		};
+	} );
+	const snackbarNotices = filter( notices, {
+		type: 'snackbar',
+	} );
+	const { removeNotice } = useDispatch( 'core/notices' );
+
+	return (
+		<SnackbarList
+			notices={ snackbarNotices }
+			className="edit-widgets-notices__snackbar"
+			onRemove={ removeNotice }
+		/>
+	);
+}
+
+export default Notices;

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

@@ -0,0 +1,8 @@
+.edit-widgets-notices__snackbar {
+	position: fixed;
+	right: 0;
+	bottom: 20px;
+	padding-left: 16px;
+	padding-right: 16px;
+}
+@include editor-left(".edit-widgets-notices__snackbar");

packages/edit-widgets/src/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import '@wordpress/notices';
 import { render } from '@wordpress/element';
 import { registerCoreBlocks } from '@wordpress/block-library';
 

packages/edit-widgets/src/store/actions.js

@@ -8,6 +8,9 @@ import { get, map } from 'lodash';
  */
 import { parse, serialize } from '@wordpress/blocks';
 import { dispatch, select } from '@wordpress/data-controls';
+import { __ } from '@wordpress/i18n';
+
+const WIDGET_AREAS_SAVE_NOTICE_ID = 'WIDGET_AREAS_SAVE_NOTICE_ID';
 
 /**
  * Yields an action object that setups the widget areas.
@@ -73,4 +76,14 @@ export function* saveWidgetAreas() {
 			}
 		);
 	}
+
+	yield dispatch(
+		'core/notices',
+		'createSuccessNotice',
+		__( 'Block areas saved succesfully.' ),
+		{
+			id: WIDGET_AREAS_SAVE_NOTICE_ID,
+			type: 'snackbar',
+		}
+	);
 }

packages/edit-widgets/src/store/test/actions.js

@@ -178,6 +178,24 @@ describe( 'actions', () => {
 				},
 			} );
 
+			expect(
+				saveWidgetAreasGen.next()
+			).toEqual( {
+				done: false,
+				value: {
+					type: 'DISPATCH',
+					storeKey: 'core/notices',
+					actionName: 'createSuccessNotice',
+					args: [
+						'Block areas saved succesfully.',
+						{
+							id: 'WIDGET_AREAS_SAVE_NOTICE_ID',
+							type: 'snackbar',
+						},
+					],
+				},
+			} );
+
 			expect(
 				saveWidgetAreasGen.next()
 			).toEqual( {

packages/edit-widgets/src/style.scss

@@ -1,5 +1,6 @@
 @import "./components/header/style.scss";
 @import "./components/layout/style.scss";
+@import "./components/notices/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/widget-area/style.scss";