Fix : Snackbar Notice Inconsistency (WordPress#66405)

Co-authored-by: Vrishabhsk <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: mtias <[email protected]> Co-authored-by: afercia <[email protected]>
karthick-murugan · Nov 13, 2024 · 1e58365 · 1e58365
1 parent 52b3be0
commit 1e58365
Show file tree

Hide file tree

Showing 9 changed files with 194 additions and 93 deletions.
diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md
@@ -528,6 +528,10 @@ _Parameters_
 
 -   _feature_ `string`: Feature name.
 
+### toggleFullscreenMode
+
+Action that toggles the Fullscreen Mode view option.
+
 ### togglePinnedPluginItem
 
 Triggers an action object used to toggle a plugin name flag.

diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md
@@ -1585,6 +1585,11 @@ _Related_
 
 Action that toggles Distraction free mode. Distraction free mode expects there are no sidebars, as due to the z-index values set, you can't close sidebars.
 
+_Parameters_
+
+-   _options_ `[Object]`: Optional configuration object
+-   _options.createNotice_ `[boolean]`: Whether to create a notice
+
 ### toggleEditorPanelEnabled
 
 Returns an action object used to enable or disable a panel in the editor.
@@ -1619,6 +1624,14 @@ _Related_
 
 -   toggleSelection in core/block-editor store.
 
+### toggleSpotlightMode
+
+Action that toggles the Spotlight Mode view option.
+
+### toggleTopToolbar
+
+Action that toggles the Top Toolbar view option.
+
 ### trashPost
 
 Action for trashing the current post in the editor.

diff --git a/packages/block-library/src/comments/block.json b/packages/block-library/src/comments/block.json
@@ -17,10 +17,7 @@
 		}
 	},
 	"supports": {
-		"align": [
-			"wide",
-			"full"
-		],
+		"align": [ "wide", "full" ],
 		"html": false,
 		"color": {
 			"gradients": true,
@@ -63,8 +60,5 @@
 		}
 	},
 	"editorStyle": "wp-block-comments-editor",
-	"usesContext": [
-		"postId",
-		"postType"
-	]
-}
+	"usesContext": [ "postId", "postType" ]
+}
diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js
@@ -15,7 +15,7 @@ import { __ } from '@wordpress/i18n';
 import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
-	const { toggleFeature } = useDispatch( editPostStore );
+	const { toggleFullscreenMode } = useDispatch( editPostStore );
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 
 	useEffect( () => {
@@ -31,7 +31,7 @@ function KeyboardShortcuts() {
 	}, [] );
 
 	useShortcut( 'core/edit-post/toggle-fullscreen', () => {
-		toggleFeature( 'fullscreenMode' );
+		toggleFullscreenMode();
 	} );
 
 	return null;

diff --git a/packages/edit-post/src/components/more-menu/index.js b/packages/edit-post/src/components/more-menu/index.js
@@ -4,8 +4,8 @@
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 import { displayShortcut } from '@wordpress/keycodes';
+import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -29,9 +29,9 @@ const MoreMenu = () => {
 						name="fullscreenMode"
 						label={ __( 'Fullscreen mode' ) }
 						info={ __( 'Show and hide the admin user interface' ) }
-						messageActivated={ __( 'Fullscreen mode activated' ) }
+						messageActivated={ __( 'Fullscreen mode activated.' ) }
 						messageDeactivated={ __(
-							'Fullscreen mode deactivated'
+							'Fullscreen mode deactivated.'
 						) }
 						shortcut={ displayShortcut.secondary( 'f' ) }
 					/>

diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js
@@ -10,6 +10,8 @@ import {
 import deprecated from '@wordpress/deprecated';
 import { addAction } from '@wordpress/hooks';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -509,3 +511,44 @@ export const toggleDistractionFree =
 		} );
 		registry.dispatch( editorStore ).toggleDistractionFree();
 	};
+
+/**
+ * Action that toggles the Fullscreen Mode view option.
+ */
+export const toggleFullscreenMode =
+	() =>
+	( { registry } ) => {
+		const isFullscreen = registry
+			.select( preferencesStore )
+			.get( 'core/edit-post', 'fullscreenMode' );
+
+		registry
+			.dispatch( preferencesStore )
+			.toggle( 'core/edit-post', 'fullscreenMode' );
+
+		registry
+			.dispatch( noticesStore )
+			.createInfoNotice(
+				isFullscreen
+					? __( 'Fullscreen mode activated.' )
+					: __( 'Fullscreen mode deactivated.' ),
+				{
+					id: 'core/edit-post/toggle-fullscreen-mode/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+
+							onClick: () => {
+								registry
+									.dispatch( preferencesStore )
+									.toggle(
+										'core/edit-post',
+										'fullscreenMode'
+									);
+							},
+						},
+					],
+				}
+			);
+	};
diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js
@@ -36,7 +36,6 @@ function useEditorCommandLoader() {
 		isListViewOpen,
 		showBlockBreadcrumbs,
 		isDistractionFree,
-		isTopToolbar,
 		isFocusMode,
 		isPreviewMode,
 		isViewable,
@@ -56,7 +55,6 @@ function useEditorCommandLoader() {
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			isFocusMode: get( 'core', 'focusMode' ),
-			isTopToolbar: get( 'core', 'fixedToolbar' ),
 			isPreviewMode: getSettings().isPreviewMode,
 			isViewable: getPostType( getCurrentPostType() )?.viewable ?? false,
 			isCodeEditingEnabled: getEditorSettings().codeEditingEnabled,
@@ -73,6 +71,8 @@ function useEditorCommandLoader() {
 		setIsListViewOpened,
 		switchEditorMode,
 		toggleDistractionFree,
+		toggleSpotlightMode,
+		toggleTopToolbar,
 	} = useDispatch( editorStore );
 	const { openModal, enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
@@ -121,23 +121,8 @@ function useEditorCommandLoader() {
 			? __( 'Exit Spotlight mode' )
 			: __( 'Enter Spotlight mode' ),
 		callback: ( { close } ) => {
-			toggle( 'core', 'focusMode' );
+			toggleSpotlightMode();
 			close();
-			createInfoNotice(
-				isFocusMode ? __( 'Spotlight off.' ) : __( 'Spotlight on.' ),
-				{
-					id: 'core/editor/toggle-spotlight-mode/notice',
-					type: 'snackbar',
-					actions: [
-						{
-							label: __( 'Undo' ),
-							onClick: () => {
-								toggle( 'core', 'focusMode' );
-							},
-						},
-					],
-				}
-			);
 		},
 	} );
 
@@ -164,28 +149,8 @@ function useEditorCommandLoader() {
 		name: 'core/toggle-top-toolbar',
 		label: __( 'Top toolbar' ),
 		callback: ( { close } ) => {
-			toggle( 'core', 'fixedToolbar' );
-			if ( isDistractionFree ) {
-				toggleDistractionFree();
-			}
+			toggleTopToolbar();
 			close();
-			createInfoNotice(
-				isTopToolbar
-					? __( 'Top toolbar off.' )
-					: __( 'Top toolbar on.' ),
-				{
-					id: 'core/editor/toggle-top-toolbar/notice',
-					type: 'snackbar',
-					actions: [
-						{
-							label: __( 'Undo' ),
-							onClick: () => {
-								toggle( 'core', 'fixedToolbar' );
-							},
-						},
-					],
-				}
-			);
 		},
 	} );
 

diff --git a/packages/editor/src/components/more-menu/index.js b/packages/editor/src/components/more-menu/index.js
@@ -35,6 +35,7 @@ export default function MoreMenu() {
 			select( preferencesStore ).get( 'core', 'showIconLabels' ),
 		[]
 	);
+
 	const turnOffDistractionFree = () => {
 		setPreference( 'core', 'distractionFree', false );
 	};
@@ -67,10 +68,10 @@ export default function MoreMenu() {
 									'Access all block and document tools in a single place'
 								) }
 								messageActivated={ __(
-									'Top toolbar activated'
+									'Top toolbar activated.'
 								) }
 								messageDeactivated={ __(
-									'Top toolbar deactivated'
+									'Top toolbar deactivated.'
 								) }
 							/>
 							<PreferenceToggleMenuItem
@@ -79,12 +80,16 @@ export default function MoreMenu() {
 								label={ __( 'Distraction free' ) }
 								info={ __( 'Write with calmness' ) }
 								handleToggling={ false }
-								onToggle={ toggleDistractionFree }
+								onToggle={ () =>
+									toggleDistractionFree( {
+										createNotice: false,
+									} )
+								}
 								messageActivated={ __(
-									'Distraction free mode activated'
+									'Distraction free mode activated.'
 								) }
 								messageDeactivated={ __(
-									'Distraction free mode deactivated'
+									'Distraction free mode deactivated.'
 								) }
 								shortcut={ displayShortcut.primaryShift(
 									'\\'
@@ -96,10 +101,10 @@ export default function MoreMenu() {
 								label={ __( 'Spotlight mode' ) }
 								info={ __( 'Focus on one block at a time' ) }
 								messageActivated={ __(
-									'Spotlight mode activated'
+									'Spotlight mode activated.'
 								) }
 								messageDeactivated={ __(
-									'Spotlight mode deactivated'
+									'Spotlight mode deactivated.'
 								) }
 							/>
 							<ViewMoreMenuGroup.Slot fillProps={ { onClose } } />