Use wp snackbar on the settings page (#136)

t-hamano · web-flow · commit cd22fc4c3560 · 2025-03-17T23:16:17.000+09:00
diff --git a/README.md b/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
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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": {
diff --git a/readme.txt b/readme.txt
@@ -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
diff --git a/src/admin/components/snackbars/index.js b/src/admin/components/snackbars/index.js
@@ -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 }
+		/>
+	);
+}
diff --git a/src/admin/components/snackbars/style.scss b/src/admin/components/snackbars/style.scss
@@ -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;
+	}
+}
diff --git a/src/admin/editor-config/components/editor-preview/index.js b/src/admin/editor-config/components/editor-preview/index.js
@@ -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( {
diff --git a/src/admin/editor-config/index.js b/src/admin/editor-config/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 );
 		} );
diff --git a/src/admin/index.js b/src/admin/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 />
diff --git a/src/admin/options/index.js b/src/admin/options/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 );
 		} );
diff --git a/src/admin/style.scss b/src/admin/style.scss
@@ -2,6 +2,7 @@
 @use "../wp-base-styles" as wpBaseStyles;
 
 // Components
+@use "./components/snackbars/style" as snackbars;
 @use "./components/header/style" as header;
 @use "./components/shortcut/style" as shortcut;
 @use "./components/welcome-guide/style" as welcomeGuide;
@@ -11,9 +12,6 @@
 
 @use "./editor-config/style" as editorConfig;
 
-// React notification component
-@import "../../node_modules/react-notifications-component/dist/scss/notification";
-
 @include wpBaseStyles.wordpress-admin-schemes();
 
 // WordPress admin
@@ -31,21 +29,6 @@
 		margin: 0 auto;
 	}
 
-	// React notification component styles
-	.rnc__base {
-		bottom: 0;
-		right: 0;
-	}
-
-	.rnc__notification-item {
-		margin-bottom: wpBaseStyles.$grid-unit-20;
-	}
-
-	.rnc__notification-container--bottom-right {
-		bottom: 0;
-		right: wpBaseStyles.$grid-unit-20;
-	}
-
 	// Gutenberg component styles
 	.components-disabled {
 		opacity: 0.3;
diff --git a/src/admin/tools/components/import-tool/index.js b/src/admin/tools/components/import-tool/index.js
@@ -12,17 +12,19 @@ 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';
 
 export default function ImportTool() {
 	const { setEditorSettings, setEditorOptions, setIsWaiting } = useContext( AdminContext );
 
 	const [ importFile, setImportFile ] = useState();
+	const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore );
 
 	// Upload file (check file extension).
 	const onUploadFile = ( event ) => {
@@ -33,11 +35,9 @@ export default function ImportTool() {
 		}
 
 		if ( 'application/json' !== file.type ) {
-			addNotification(
-				__( 'It is not a JSON file.', 'custom-html-block-extension' ),
-				'danger',
-				5000
-			);
+			createErrorNotice( __( 'It is not a JSON file.', 'custom-html-block-extension' ), {
+				type: 'snackbar',
+			} );
 			setImportFile( null );
 			return false;
 		}
@@ -62,10 +62,11 @@ export default function ImportTool() {
 					data,
 				} ).then( ( response ) => {
 					setTimeout( () => {
-						addNotification(
+						createSuccessNotice(
 							__( 'Imported the editor config.', 'custom-html-block-extension' ),
-							'success',
-							5000
+							{
+								type: 'snackbar',
+							}
 						);
 						setEditorSettings( response.editorSettings );
 						setEditorOptions( response.editorOptions );
@@ -75,10 +76,11 @@ export default function ImportTool() {
 				} );
 			} catch ( error ) {
 				// Invalid JSON format.
-				addNotification(
+				createErrorNotice(
 					__( 'The format of JSON file is not correct.', 'custom-html-block-extension' ),
-					'danger',
-					5000
+					{
+						type: 'snackbar',
+					}
 				);
 				return false;
 			}
diff --git a/src/lib/helper.js b/src/lib/helper.js
@@ -1,27 +1,3 @@
-/**
- * External dependencies
- */
-import { Store } from 'react-notifications-component';
-
-// Show Notification.
-export const addNotification = ( message, type, duration = 200000 ) => {
-	Store.addNotification( {
-		message,
-		type,
-		insert: 'bottom',
-		container: 'bottom-right',
-		isMobile: true,
-		dismiss: {
-			duration,
-			showIcon: true,
-		},
-		dismissable: {
-			click: true,
-			touch: true,
-		},
-	} );
-};
-
 // Round values to the specified minimum and maximum values.
 export const toNumber = ( value, min = 0, max = null ) => {
 	value = Number( value );
