Use wp snackbar on the settings page (#136)

Author: t-hamano

README.md

@@ -164,11 +164,6 @@ npm run build
 * License: MIT License
 * Source: <https://github.com/microsoft/monaco-editor>
 
-### react-notifications-component
-
-* License: MIT License
-* Source: <https://github.com/teodosii/react-notifications-component>
-
 ### emmet-monaco-es
 
 * License: MIT License

package-lock.json

@@ -28,7 +28,6 @@
 		"@wordpress/icons": "^10.20.0",
 		"emmet-monaco-es": "^5.5.0",
 		"monaco-editor": "^0.52.2",
-		"react-notifications-component": "^4.0.1",
 		"webfontloader": "^1.6.28"
 	},
 	"devDependencies": {

package.json

@@ -35,10 +35,6 @@ And supports the classic editor, the theme/plugin editor, import/export editor s
 License: MIT License
 Source: https://github.com/microsoft/monaco-editor
 
-= react-notifications-component =
-License: MIT License
-Source: https://github.com/teodosii/react-notifications-component
-
 = emmet-monaco-es =
 License: MIT License
 Source: https://github.com/troy351/emmet-monaco-es

readme.txt

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { SnackbarList } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+// Last three notices. Slices from the tail end of the list.
+const MAX_VISIBLE_NOTICES = -3;
+
+export default function Snackbars() {
+	const notices = useSelect( ( select ) => select( noticesStore ).getNotices(), [] );
+	const { removeNotice } = useDispatch( noticesStore );
+	const filteredNotices = notices.slice( MAX_VISIBLE_NOTICES );
+
+	return (
+		<SnackbarList
+			notices={ filteredNotices }
+			className="chbe-admin-snackbars"
+			onRemove={ removeNotice }
+		/>
+	);
+}

src/admin/components/snackbars/index.js

@@ -0,0 +1,12 @@
+@use "../../../wp-base-styles.scss" as wpBaseStyles;
+
+.chbe-admin-snackbars {
+	right: wpBaseStyles.$grid-unit-20;
+	bottom: wpBaseStyles.$grid-unit-20;
+	position: fixed;
+
+	.components-snackbar-list__notice-container {
+		display: flex;
+		justify-content: flex-end;
+	}
+}

src/admin/components/snackbars/style.scss

@@ -3,28 +3,28 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
 import { AdminContext } from '../../../index';
-import { addNotification } from '../../../../lib/helper';
 import MonacoEditor from '../../../../components/monaco-editor';
 
 export default function EditorPreview( { isEditorDisabled, setFontWeights } ) {
 	const { code, setCode, editorSettings, editorOptions, setEditorOptions } =
 		useContext( AdminContext );
+	const { createErrorNotice } = useDispatch( noticesStore );
 
 	const onFontLoad = ( { isSuccess, font } ) => {
 		if ( ! isSuccess ) {
-			addNotification(
+			createErrorNotice(
 				sprintf(
 					/* translators: %s is replaced with the font family name. */
 					__( 'Failed to load the font. (%s)', 'custom-html-block-extension' ),
 					font.label
-				),
-				'danger',
-				5000
+				)
 			);
 			setFontWeights( [ 300, 400, 500, 600, 700 ] );
 			setEditorOptions( {

src/admin/editor-config/components/editor-preview/index.js

@@ -11,12 +11,13 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
 import { AdminContext } from '../index';
-import { addNotification } from '../../lib/helper';
 import EditorPreview from './components/editor-preview';
 import Filter from './components/filter';
 import Controls from './components/controls';
@@ -42,6 +43,7 @@ export default function EditorConfig() {
 	const [ editorMode, setEditorMode ] = useState( 'basic' );
 	const [ searchQuery, setSearchQuery ] = useState( '' );
 	const [ fontWeights, setFontWeights ] = useState( [ 300 ] );
+	const { createNotice, createSuccessNotice } = useDispatch( noticesStore );
 
 	// Update editor config.
 	const onUpdateOptions = () => {
@@ -56,7 +58,9 @@ export default function EditorConfig() {
 			},
 		} ).then( ( response ) => {
 			setTimeout( () => {
-				addNotification( response.message, response.success ? 'success' : 'danger' );
+				createNotice( response.success ? 'success' : 'error', response.message, {
+					type: 'snackbar',
+				} );
 				setIsWaiting( false );
 			}, 600 );
 		} );
@@ -75,10 +79,9 @@ export default function EditorConfig() {
 			setEditorOptions( response.editorOptions );
 
 			setTimeout( () => {
-				addNotification(
-					__( 'Settings have been reset.', 'custom-html-block-extension' ),
-					'success'
-				);
+				createSuccessNotice( __( 'Settings have been reset.', 'custom-html-block-extension' ), {
+					type: 'snackbar',
+				} );
 				setIsWaiting( false );
 			}, 600 );
 		} );

src/admin/editor-config/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { ReactNotifications } from 'react-notifications-component';
 import clsx from 'clsx';
 
 /**
@@ -16,6 +15,7 @@ import domReady from '@wordpress/dom-ready';
  * Internal dependencies
  */
 import './style.scss';
+import Snackbars from './components/snackbars';
 import Header from './components/header';
 import EditorConfig from './editor-config';
 import Tools from './tools';
@@ -66,7 +66,7 @@ function Admin() {
 
 	return (
 		<div className={ clsx( 'chbe-admin', { 'is-waiting': isWaiting } ) }>
-			<ReactNotifications />
+			<Snackbars />
 			{ isWaiting && (
 				<div className="chbe-admin__loading">
 					<Spinner />

src/admin/index.js

@@ -5,12 +5,13 @@ import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { createContext, useContext } from '@wordpress/element';
 import { Button, Flex, __experimentalVStack as VStack } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
 import { AdminContext } from '../index';
-import { addNotification } from '../../lib/helper';
 import PermissionEditor from './components/permission-editor';
 import PermissionUserRole from './components/permission-user-role';
 
@@ -21,6 +22,7 @@ export const OptionsContext = createContext();
 
 export default function Options() {
 	const { isWaiting, options, setIsWaiting } = useContext( AdminContext );
+	const { createNotice } = useDispatch( noticesStore );
 
 	// Update editor config.
 	const onUpdateOptions = () => {
@@ -32,7 +34,9 @@ export default function Options() {
 			data: { options },
 		} ).then( ( response ) => {
 			setTimeout( () => {
-				addNotification( response.message, response.success ? 'success' : 'danger' );
+				createNotice( response.success ? 'success' : 'error', response.message, {
+					type: 'snackbar',
+				} );
 				setIsWaiting( false );
 			}, 600 );
 		} );