Fix : Snackbar Notice Inconsistency

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. Shows a notice when option is toggled.
+
 ### togglePinnedPluginItem
 
 Triggers an action object used to toggle a plugin name flag.

docs/reference-guides/data/data-core-editor.md

@@ -1619,6 +1619,14 @@ _Related_
 
 -   toggleSelection in core/block-editor store.
 
+### toggleSpotlightMode
+
+Action that toggles the Spotlight Mode view option. Shows a notice when option is toggled.
+
+### toggleTopToolbar
+
+Action that toggles the Top Toolbar view option. Shows a notice when option is toggled.
+
 ### trashPost
 
 Action for trashing the current post in the editor.

packages/edit-post/src/components/more-menu/index.js

@@ -14,12 +14,17 @@ import { unlock } from '../../lock-unlock';
 import ManagePatternsMenuItem from './manage-patterns-menu-item';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 import EditPostPreferencesModal from '../preferences-modal';
+import { store as editorStore } from '../../store';
+import { useDispatch } from '@wordpress/data';
 
 const { ToolsMoreMenuGroup, ViewMoreMenuGroup } = unlock( editorPrivateApis );
 
 const MoreMenu = () => {
 	const isLargeViewport = useViewportMatch( 'large' );
 
+	// Action to toggle the FullscreenMode with a Notice for visual feedback.
+	const { toggleFullscreenMode } = useDispatch( editorStore );
+
 	return (
 		<>
 			{ isLargeViewport && (
@@ -29,6 +34,8 @@ const MoreMenu = () => {
 						name="fullscreenMode"
 						label={ __( 'Fullscreen mode' ) }
 						info={ __( 'Show and hide the admin user interface' ) }
+						handleToggling={ false }
+						onToggle={ toggleFullscreenMode }
 						messageActivated={ __( 'Fullscreen mode activated' ) }
 						messageDeactivated={ __(
 							'Fullscreen mode deactivated'

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,45 @@ export const toggleDistractionFree =
 		} );
 		registry.dispatch( editorStore ).toggleDistractionFree();
 	};
+
+/**
+ * Action that toggles the Fullscreen Mode view option.
+ * Shows a notice when option is toggled.
+ */
+export const toggleFullscreenMode =
+	() =>
+	( { registry } ) => {
+		// Determine the current state of the Fullscreen Mode option.
+		const isFullscreen = registry
+			.select( preferencesStore )
+			.get( 'core/edit-post', 'fullscreenMode' );
+
+		// Toggle the Fullscreen Mode option.
+		registry
+			.dispatch( preferencesStore )
+			.toggle( 'core/edit-post', 'fullscreenMode' );
+
+		// Show a notice when the Fullscreen Mode option is toggled for visual feedback.
+		registry
+			.dispatch( noticesStore )
+			.createInfoNotice(
+				isFullscreen ? __( 'Fullscreen off.' ) : __( 'Fullscreen on.' ),
+				{
+					id: 'core/edit-post/toggle-fullscreen-mode/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								registry
+									.dispatch( preferencesStore )
+									.toggle(
+										'core/edit-post',
+										'fullscreenMode'
+									);
+							},
+						},
+					],
+				}
+			);
+	};

packages/editor/src/components/commands/index.js

@@ -36,8 +36,6 @@ function useEditorCommandLoader() {
 		isListViewOpen,
 		showBlockBreadcrumbs,
 		isDistractionFree,
-		isTopToolbar,
-		isFocusMode,
 		isPreviewMode,
 		isViewable,
 		isCodeEditingEnabled,
@@ -55,8 +53,6 @@ function useEditorCommandLoader() {
 			isListViewOpen: isListViewOpened(),
 			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 +69,8 @@ function useEditorCommandLoader() {
 		setIsListViewOpened,
 		switchEditorMode,
 		toggleDistractionFree,
+		toggleSpotlightMode,
+		toggleTopToolbar,
 	} = useDispatch( editorStore );
 	const { openModal, enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
@@ -119,23 +117,8 @@ function useEditorCommandLoader() {
 		name: 'core/toggle-spotlight-mode',
 		label: __( 'Toggle spotlight' ),
 		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' );
-							},
-						},
-					],
-				}
-			);
 		},
 	} );
 
@@ -162,28 +145,8 @@ function useEditorCommandLoader() {
 		name: 'core/toggle-top-toolbar',
 		label: __( 'Toggle 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' );
-							},
-						},
-					],
-				}
-			);
 		},
 	} );
 

packages/editor/src/components/more-menu/index.js

@@ -29,14 +29,16 @@ import { store as editorStore } from '../../store';
 export default function MoreMenu() {
 	const { openModal } = useDispatch( interfaceStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
-	const { toggleDistractionFree } = useDispatch( editorStore );
+	const { toggleDistractionFree, toggleSpotlightMode, toggleTopToolbar } =
+		useDispatch( editorStore );
 	const showIconLabels = useSelect(
 		( select ) =>
 			select( preferencesStore ).get( 'core', 'showIconLabels' ),
 		[]
 	);
 	const turnOffDistractionFree = () => {
 		setPreference( 'core', 'distractionFree', false );
+		toggleTopToolbar();
 	};
 
 	return (
@@ -61,6 +63,7 @@ export default function MoreMenu() {
 							<PreferenceToggleMenuItem
 								scope="core"
 								name="fixedToolbar"
+								handleToggling={ false }
 								onToggle={ turnOffDistractionFree }
 								label={ __( 'Top toolbar' ) }
 								info={ __(
@@ -95,6 +98,8 @@ export default function MoreMenu() {
 								name="focusMode"
 								label={ __( 'Spotlight mode' ) }
 								info={ __( 'Focus on one block at a time' ) }
+								handleToggling={ false }
+								onToggle={ toggleSpotlightMode }
 								messageActivated={ __(
 									'Spotlight mode activated'
 								) }

packages/editor/src/store/actions.js

@@ -873,6 +873,82 @@ export const toggleDistractionFree =
 		} );
 	};
 
+/**
+ * Action that toggles the Spotlight Mode view option.
+ * Shows a notice when option is toggled.
+ */
+export const toggleSpotlightMode =
+	() =>
+	( { registry } ) => {
+		// Determine the current state of the Spotlight Mode option.
+		const isFocusMode = registry
+			.select( preferencesStore )
+			.get( 'core', 'focusMode' );
+
+		// Toggle the Spotlight Mode option.
+		registry.dispatch( preferencesStore ).toggle( 'core', 'focusMode' );
+
+		// Show a notice when the Spotlight Mode option is toggled for visual feedback.
+		registry
+			.dispatch( noticesStore )
+			.createInfoNotice(
+				isFocusMode ? __( 'Spotlight off.' ) : __( 'Spotlight on.' ),
+				{
+					id: 'core/editor/toggle-spotlight-mode/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								registry
+									.dispatch( preferencesStore )
+									.toggle( 'core', 'focusMode' );
+							},
+						},
+					],
+				}
+			);
+	};
+
+/**
+ * Action that toggles the Top Toolbar view option.
+ * Shows a notice when option is toggled.
+ */
+export const toggleTopToolbar =
+	() =>
+	( { registry } ) => {
+		// Determine the current state of the Top Toolbar option.
+		const isTopToolbar = registry
+			.select( preferencesStore )
+			.get( 'core', 'fixedToolbar' );
+
+		// Toggle the Top Toolbar option.
+		registry.dispatch( preferencesStore ).toggle( 'core', 'fixedToolbar' );
+
+		// Show a notice when the Top Toolbar option is toggled for visual feedback.
+		registry
+			.dispatch( noticesStore )
+			.createInfoNotice(
+				isTopToolbar
+					? __( 'Top toolbar off.' )
+					: __( 'Top toolbar on.' ),
+				{
+					id: 'core/editor/toggle-top-toolbar/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								registry
+									.dispatch( preferencesStore )
+									.toggle( 'core', 'fixedToolbar' );
+							},
+						},
+					],
+				}
+			);
+	};
+
 /**
  * Triggers an action used to switch editor mode.
  *