From 46634d413734aae8f878289428cce0b26444437a Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Thu, 24 Oct 2024 14:29:21 +0400 Subject: [PATCH 01/12] Add actions for toggling view options with a Notice --- .../data/data-core-edit-post.md | 4 + .../reference-guides/data/data-core-editor.md | 8 ++ packages/edit-post/src/store/actions.js | 44 +++++++++++ packages/editor/src/store/actions.js | 76 +++++++++++++++++++ 4 files changed, 132 insertions(+) diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md index e3fb22a1a7afe..9c7f2f3a49566 100644 --- 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. Shows a notice when option is toggled. + ### 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 index ac3413e694877..70e9cc17644d6 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/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. diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js index 7ab0a965379be..330976f5f954f 100644 --- 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,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' + ); + }, + }, + ], + } + ); + }; diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index f28f5feeead17..4ff0c312c2539 100644 --- a/packages/editor/src/store/actions.js +++ b/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. * From 5656f0046de503301c0fe5a52f009b4bf35c16d7 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Thu, 24 Oct 2024 14:32:28 +0400 Subject: [PATCH 02/12] Modify Menu Item components and commands to use new toggles --- .../src/components/more-menu/index.js | 7 +++ .../editor/src/components/commands/index.js | 45 ++----------------- .../editor/src/components/more-menu/index.js | 7 ++- 3 files changed, 17 insertions(+), 42 deletions(-) diff --git a/packages/edit-post/src/components/more-menu/index.js b/packages/edit-post/src/components/more-menu/index.js index 136742a19dddd..2c39b485c0705 100644 --- a/packages/edit-post/src/components/more-menu/index.js +++ b/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' diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js index a9c726f660b22..6ecb6c5b2a3e4 100644 --- a/packages/editor/src/components/commands/index.js +++ b/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' ); - }, - }, - ], - } - ); }, } ); diff --git a/packages/editor/src/components/more-menu/index.js b/packages/editor/src/components/more-menu/index.js index 6ccc01c6ac049..f5469382e74d8 100644 --- a/packages/editor/src/components/more-menu/index.js +++ b/packages/editor/src/components/more-menu/index.js @@ -29,7 +29,8 @@ 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' ), @@ -37,6 +38,7 @@ export default function MoreMenu() { ); const turnOffDistractionFree = () => { setPreference( 'core', 'distractionFree', false ); + toggleTopToolbar(); }; return ( @@ -61,6 +63,7 @@ export default function MoreMenu() { Date: Fri, 25 Oct 2024 19:19:57 +0400 Subject: [PATCH 03/12] Allow custom speak message --- docs/reference-guides/data/data-core-notices.md | 1 + packages/notices/src/store/actions.js | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/reference-guides/data/data-core-notices.md b/docs/reference-guides/data/data-core-notices.md index d36098429811d..4ab9ee8baf43d 100644 --- a/docs/reference-guides/data/data-core-notices.md +++ b/docs/reference-guides/data/data-core-notices.md @@ -164,6 +164,7 @@ _Parameters_ - _options.isDismissible_ `[boolean]`: Whether the notice can be dismissed by user. - _options.type_ `[string]`: Type of notice, one of `default`, or `snackbar`. - _options.speak_ `[boolean]`: Whether the notice content should be announced to screen readers. +- _options.speakMessage_ `[string]`: Message to be spoken for screen readers. - _options.actions_ `[Array]`: User actions to be presented with notice. - _options.icon_ `[string]`: An icon displayed with the notice. Only used when type is set to `snackbar`. - _options.explicitDismiss_ `[boolean]`: Whether the notice includes an explicit dismiss button and can't be dismissed by clicking the body of the notice. Only applies when type is set to `snackbar`. diff --git a/packages/notices/src/store/actions.js b/packages/notices/src/store/actions.js index fb1c424307351..c472513c38b78 100644 --- a/packages/notices/src/store/actions.js +++ b/packages/notices/src/store/actions.js @@ -34,6 +34,8 @@ let uniqueId = 0; * content should be * announced to screen * readers. + * @param {string} [options.speakMessage] Message to be spoken for + * screen readers. * @param {Array} [options.actions] User actions to be * presented with notice. * @param {string} [options.icon] An icon displayed with the notice. @@ -69,6 +71,7 @@ let uniqueId = 0; export function createNotice( status = DEFAULT_STATUS, content, options = {} ) { const { speak = true, + speakMessage = null, isDismissible = true, context = DEFAULT_CONTEXT, id = `${ context }${ ++uniqueId }`, @@ -92,7 +95,7 @@ export function createNotice( status = DEFAULT_STATUS, content, options = {} ) { id, status, content, - spokenMessage: speak ? content : null, + spokenMessage: speak ? speakMessage || content : null, __unstableHTML, isDismissible, actions, From 3caa82e42dec0b096effe47374225593c05c487e Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Fri, 25 Oct 2024 19:21:23 +0400 Subject: [PATCH 04/12] Remove comments and add custom speak message --- .../data/data-core-edit-post.md | 2 +- docs/reference-guides/data/data-core-editor.md | 4 ++-- packages/edit-post/src/store/actions.js | 7 +++---- packages/editor/src/store/actions.js | 18 ++++++++++-------- 4 files changed, 16 insertions(+), 15 deletions(-) diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md index 9c7f2f3a49566..06fe5fc30420a 100644 --- a/docs/reference-guides/data/data-core-edit-post.md +++ b/docs/reference-guides/data/data-core-edit-post.md @@ -530,7 +530,7 @@ _Parameters_ ### toggleFullscreenMode -Action that toggles the Fullscreen Mode view option. Shows a notice when option is toggled. +Action that toggles the Fullscreen Mode view option. ### togglePinnedPluginItem diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index 70e9cc17644d6..4b1ba5b7f8a11 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/docs/reference-guides/data/data-core-editor.md @@ -1621,11 +1621,11 @@ _Related_ ### toggleSpotlightMode -Action that toggles the Spotlight Mode view option. Shows a notice when option is toggled. +Action that toggles the Spotlight Mode view option. ### toggleTopToolbar -Action that toggles the Top Toolbar view option. Shows a notice when option is toggled. +Action that toggles the Top Toolbar view option. ### trashPost diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js index 330976f5f954f..77e8fe3e70067 100644 --- a/packages/edit-post/src/store/actions.js +++ b/packages/edit-post/src/store/actions.js @@ -514,22 +514,18 @@ export const 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( @@ -540,6 +536,9 @@ export const toggleFullscreenMode = actions: [ { label: __( 'Undo' ), + speakMessage: isFullscreen + ? __( 'Fullscreen mode activated.' ) + : __( 'Fullscreen mode deactivated.' ), onClick: () => { registry .dispatch( preferencesStore ) diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index 4ff0c312c2539..bc3667662f59e 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -846,6 +846,9 @@ export const toggleDistractionFree = { id: 'core/editor/distraction-free-mode/notice', type: 'snackbar', + speakMessage: isDistractionFree + ? __( 'Distraction free mode activated.' ) + : __( 'Distraction free mode deactivated.' ), actions: [ { label: __( 'Undo' ), @@ -875,20 +878,16 @@ 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( @@ -896,6 +895,9 @@ export const toggleSpotlightMode = { id: 'core/editor/toggle-spotlight-mode/notice', type: 'snackbar', + speakMessage: isFocusMode + ? __( 'Spotlight mode activated.' ) + : __( 'Spotlight mode deactivated.' ), actions: [ { label: __( 'Undo' ), @@ -912,20 +914,16 @@ export const toggleSpotlightMode = /** * 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( @@ -935,9 +933,13 @@ export const toggleTopToolbar = { id: 'core/editor/toggle-top-toolbar/notice', type: 'snackbar', + speakMessage: isTopToolbar + ? __( 'Top toolbar activated.' ) + : __( 'Top toolbar deactivated.' ), actions: [ { label: __( 'Undo' ), + onClick: () => { registry .dispatch( preferencesStore ) From d7ef4c2a493abb51e5d94145d668e6501714e942 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Fri, 25 Oct 2024 19:22:22 +0400 Subject: [PATCH 05/12] Allow disabling speak fn call in PreferenceToggleMenuItem component --- .../src/components/preference-toggle-menu-item/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/preferences/src/components/preference-toggle-menu-item/index.js b/packages/preferences/src/components/preference-toggle-menu-item/index.js index c5110463c9800..10a01c5692ed5 100644 --- a/packages/preferences/src/components/preference-toggle-menu-item/index.js +++ b/packages/preferences/src/components/preference-toggle-menu-item/index.js @@ -23,6 +23,7 @@ export default function PreferenceToggleMenuItem( { handleToggling = true, onToggle = () => null, disabled = false, + disableSpeech = false, } ) { const isActive = useSelect( ( select ) => !! select( preferencesStore ).get( scope, name ), @@ -60,7 +61,9 @@ export default function PreferenceToggleMenuItem( { if ( handleToggling ) { toggle( scope, name ); } - speakMessage(); + if ( ! disableSpeech ) { + speakMessage(); + } } } role="menuitemcheckbox" info={ info } From 257b34ab6a63daa3a8af9fb341dff2540e883713 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Fri, 25 Oct 2024 19:23:35 +0400 Subject: [PATCH 06/12] Remove speak messages. Add disableSpeech prop --- .../src/components/more-menu/index.js | 10 +++------ .../editor/src/components/more-menu/index.js | 21 +++---------------- 2 files changed, 6 insertions(+), 25 deletions(-) diff --git a/packages/edit-post/src/components/more-menu/index.js b/packages/edit-post/src/components/more-menu/index.js index 2c39b485c0705..b5c9c99d0f363 100644 --- a/packages/edit-post/src/components/more-menu/index.js +++ b/packages/edit-post/src/components/more-menu/index.js @@ -14,7 +14,7 @@ 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 { store as editPostStore } from '../../store'; import { useDispatch } from '@wordpress/data'; const { ToolsMoreMenuGroup, ViewMoreMenuGroup } = unlock( editorPrivateApis ); @@ -22,8 +22,7 @@ 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 ); + const { toggleFullscreenMode } = useDispatch( editPostStore ); return ( <> @@ -36,10 +35,7 @@ const MoreMenu = () => { info={ __( 'Show and hide the admin user interface' ) } handleToggling={ false } onToggle={ toggleFullscreenMode } - messageActivated={ __( 'Fullscreen mode activated' ) } - messageDeactivated={ __( - 'Fullscreen mode deactivated' - ) } + disableSpeech shortcut={ displayShortcut.secondary( 'f' ) } /> diff --git a/packages/editor/src/components/more-menu/index.js b/packages/editor/src/components/more-menu/index.js index f5469382e74d8..dcf8207107dde 100644 --- a/packages/editor/src/components/more-menu/index.js +++ b/packages/editor/src/components/more-menu/index.js @@ -69,12 +69,7 @@ export default function MoreMenu() { info={ __( 'Access all block and document tools in a single place' ) } - messageActivated={ __( - 'Top toolbar activated' - ) } - messageDeactivated={ __( - 'Top toolbar deactivated' - ) } + disableSpeech /> From 43cb792fdd3b24acfd91972ae0668748d743bdde Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Mon, 28 Oct 2024 14:42:15 +0400 Subject: [PATCH 07/12] Address Feedback Replace PreferenceToggleMenuItem with MenuItem. Replace function called when Fullscreen Mode shortcut is used to show the notice. Fix speakMessage placement. Remove disableSpeech prop from PreferenceToggleMenuItem component --- .../components/keyboard-shortcuts/index.js | 4 +- .../src/components/more-menu/index.js | 31 +++++--- packages/edit-post/src/store/actions.js | 7 +- .../editor/src/components/more-menu/index.js | 73 ++++++++++--------- .../preference-toggle-menu-item/index.js | 5 +- 5 files changed, 66 insertions(+), 54 deletions(-) diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js index 108671a8f6632..e21e3599dba0a 100644 --- 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 index b5c9c99d0f363..e3a660dbfcf3c 100644 --- a/packages/edit-post/src/components/more-menu/index.js +++ b/packages/edit-post/src/components/more-menu/index.js @@ -4,8 +4,11 @@ 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 { store as preferencesStore } from '@wordpress/preferences'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { MenuItem } from '@wordpress/components'; +import { check } from '@wordpress/icons'; /** * Internal dependencies @@ -15,29 +18,35 @@ import ManagePatternsMenuItem from './manage-patterns-menu-item'; import WelcomeGuideMenuItem from './welcome-guide-menu-item'; import EditPostPreferencesModal from '../preferences-modal'; import { store as editPostStore } from '../../store'; -import { useDispatch } from '@wordpress/data'; const { ToolsMoreMenuGroup, ViewMoreMenuGroup } = unlock( editorPrivateApis ); const MoreMenu = () => { const isLargeViewport = useViewportMatch( 'large' ); - const { toggleFullscreenMode } = useDispatch( editPostStore ); + const isFullscreenMode = useSelect( + ( select ) => + select( preferencesStore ).get( + 'core/edit-post', + 'fullscreenMode' + ), + [] + ); return ( <> { isLargeViewport && ( - + > + { __( 'Fullscreen mode' ) } + ) } diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js index 77e8fe3e70067..07cfb23fe0a93 100644 --- a/packages/edit-post/src/store/actions.js +++ b/packages/edit-post/src/store/actions.js @@ -533,12 +533,13 @@ export const toggleFullscreenMode = { id: 'core/edit-post/toggle-fullscreen-mode/notice', type: 'snackbar', + speakMessage: isFullscreen + ? __( 'Fullscreen mode activated.' ) + : __( 'Fullscreen mode deactivated.' ), actions: [ { label: __( 'Undo' ), - speakMessage: isFullscreen - ? __( 'Fullscreen mode activated.' ) - : __( 'Fullscreen mode deactivated.' ), + onClick: () => { registry .dispatch( preferencesStore ) diff --git a/packages/editor/src/components/more-menu/index.js b/packages/editor/src/components/more-menu/index.js index dcf8207107dde..dfd0009b4b873 100644 --- a/packages/editor/src/components/more-menu/index.js +++ b/packages/editor/src/components/more-menu/index.js @@ -4,17 +4,14 @@ import { __, _x } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; import { displayShortcut } from '@wordpress/keycodes'; -import { external, moreVertical } from '@wordpress/icons'; +import { external, moreVertical, check } from '@wordpress/icons'; import { MenuGroup, MenuItem, VisuallyHidden, DropdownMenu, } from '@wordpress/components'; -import { - PreferenceToggleMenuItem, - store as preferencesStore, -} from '@wordpress/preferences'; +import { store as preferencesStore } from '@wordpress/preferences'; import { store as interfaceStore, ActionItem } from '@wordpress/interface'; /** @@ -29,13 +26,21 @@ import { store as editorStore } from '../../store'; export default function MoreMenu() { const { openModal } = useDispatch( interfaceStore ); const { set: setPreference } = useDispatch( preferencesStore ); + const { toggleDistractionFree, toggleSpotlightMode, toggleTopToolbar } = useDispatch( editorStore ); - const showIconLabels = useSelect( - ( select ) => - select( preferencesStore ).get( 'core', 'showIconLabels' ), - [] - ); + + const { showIconLabels, isDistractionFree, isSpotlightMode, isTopToolbar } = + useSelect( ( select ) => { + const store = select( preferencesStore ); + return { + showIconLabels: store.get( 'core', 'showIconLabels' ), + isDistractionFree: store.get( 'core', 'distractionFree' ), + isSpotlightMode: store.get( 'core', 'focusMode' ), + isTopToolbar: store.get( 'core', 'fixedToolbar' ), + }; + } ); + const turnOffDistractionFree = () => { setPreference( 'core', 'distractionFree', false ); toggleTopToolbar(); @@ -60,38 +65,38 @@ export default function MoreMenu() { { ( { onClose } ) => ( <> - - + { __( 'Top toolbar' ) } + + - + { __( 'Distraction free' ) } + + + > + { __( 'Spotlight mode' ) } + diff --git a/packages/preferences/src/components/preference-toggle-menu-item/index.js b/packages/preferences/src/components/preference-toggle-menu-item/index.js index 10a01c5692ed5..c5110463c9800 100644 --- a/packages/preferences/src/components/preference-toggle-menu-item/index.js +++ b/packages/preferences/src/components/preference-toggle-menu-item/index.js @@ -23,7 +23,6 @@ export default function PreferenceToggleMenuItem( { handleToggling = true, onToggle = () => null, disabled = false, - disableSpeech = false, } ) { const isActive = useSelect( ( select ) => !! select( preferencesStore ).get( scope, name ), @@ -61,9 +60,7 @@ export default function PreferenceToggleMenuItem( { if ( handleToggling ) { toggle( scope, name ); } - if ( ! disableSpeech ) { - speakMessage(); - } + speakMessage(); } } role="menuitemcheckbox" info={ info } From fb87f146b8985d2f6f704de6cc91a6d19f11536f Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Wed, 30 Oct 2024 17:37:06 +0400 Subject: [PATCH 08/12] Revert PreferenceToggleMenuItem and add createNotice param for toggleDistractionFree action --- .../reference-guides/data/data-core-editor.md | 4 + .../src/components/more-menu/index.js | 32 +++---- .../editor/src/components/more-menu/index.js | 89 ++++++++++--------- packages/editor/src/store/actions.js | 79 ++++++++-------- 4 files changed, 105 insertions(+), 99 deletions(-) diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index 4b1ba5b7f8a11..9db1ef782de18 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/docs/reference-guides/data/data-core-editor.md @@ -1585,6 +1585,10 @@ _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_ + +- _createNotice_ `boolean`: Whether to create a notice when this action is triggered. + ### toggleEditorPanelEnabled Returns an action object used to enable or disable a panel in the editor. diff --git a/packages/edit-post/src/components/more-menu/index.js b/packages/edit-post/src/components/more-menu/index.js index e3a660dbfcf3c..38113f73706f9 100644 --- a/packages/edit-post/src/components/more-menu/index.js +++ b/packages/edit-post/src/components/more-menu/index.js @@ -5,10 +5,7 @@ import { __ } from '@wordpress/i18n'; import { useViewportMatch } from '@wordpress/compose'; import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { displayShortcut } from '@wordpress/keycodes'; -import { store as preferencesStore } from '@wordpress/preferences'; -import { useDispatch, useSelect } from '@wordpress/data'; -import { MenuItem } from '@wordpress/components'; -import { check } from '@wordpress/icons'; +import { PreferenceToggleMenuItem } from '@wordpress/preferences'; /** * Internal dependencies @@ -17,36 +14,27 @@ 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 editPostStore } from '../../store'; const { ToolsMoreMenuGroup, ViewMoreMenuGroup } = unlock( editorPrivateApis ); const MoreMenu = () => { const isLargeViewport = useViewportMatch( 'large' ); - const { toggleFullscreenMode } = useDispatch( editPostStore ); - const isFullscreenMode = useSelect( - ( select ) => - select( preferencesStore ).get( - 'core/edit-post', - 'fullscreenMode' - ), - [] - ); return ( <> { isLargeViewport && ( - - { __( 'Fullscreen mode' ) } - + /> ) } diff --git a/packages/editor/src/components/more-menu/index.js b/packages/editor/src/components/more-menu/index.js index dfd0009b4b873..cdf0705d6fb0f 100644 --- a/packages/editor/src/components/more-menu/index.js +++ b/packages/editor/src/components/more-menu/index.js @@ -4,14 +4,17 @@ import { __, _x } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; import { displayShortcut } from '@wordpress/keycodes'; -import { external, moreVertical, check } from '@wordpress/icons'; +import { external, moreVertical } from '@wordpress/icons'; import { MenuGroup, MenuItem, VisuallyHidden, DropdownMenu, } from '@wordpress/components'; -import { store as preferencesStore } from '@wordpress/preferences'; +import { + PreferenceToggleMenuItem, + store as preferencesStore, +} from '@wordpress/preferences'; import { store as interfaceStore, ActionItem } from '@wordpress/interface'; /** @@ -26,24 +29,16 @@ import { store as editorStore } from '../../store'; export default function MoreMenu() { const { openModal } = useDispatch( interfaceStore ); const { set: setPreference } = useDispatch( preferencesStore ); - - const { toggleDistractionFree, toggleSpotlightMode, toggleTopToolbar } = - useDispatch( editorStore ); - - const { showIconLabels, isDistractionFree, isSpotlightMode, isTopToolbar } = - useSelect( ( select ) => { - const store = select( preferencesStore ); - return { - showIconLabels: store.get( 'core', 'showIconLabels' ), - isDistractionFree: store.get( 'core', 'distractionFree' ), - isSpotlightMode: store.get( 'core', 'focusMode' ), - isTopToolbar: store.get( 'core', 'fixedToolbar' ), - }; - } ); + const { toggleDistractionFree } = useDispatch( editorStore ); + const { showIconLabels } = useSelect( ( select ) => { + const store = select( preferencesStore ); + return { + showIconLabels: store.get( 'core', 'showIconLabels' ), + }; + } ); const turnOffDistractionFree = () => { setPreference( 'core', 'distractionFree', false ); - toggleTopToolbar(); }; return ( @@ -65,38 +60,50 @@ export default function MoreMenu() { { ( { onClose } ) => ( <> - - { __( 'Top toolbar' ) } - - + - { __( 'Distraction free' ) } - - + - { __( 'Spotlight mode' ) } - + messageActivated={ __( + 'Spotlight mode activated' + ) } + messageDeactivated={ __( + 'Spotlight mode deactivated' + ) } + /> diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index bc3667662f59e..3fa36b11b980b 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -812,9 +812,11 @@ export function setIsListViewOpened( isOpen ) { * 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. + * + * @param {boolean} createNotice Whether to create a notice when this action is triggered. */ export const toggleDistractionFree = - () => + ( createNotice = true ) => ( { dispatch, registry } ) => { const isDistractionFree = registry .select( preferencesStore ) @@ -837,42 +839,47 @@ export const toggleDistractionFree = registry .dispatch( preferencesStore ) .set( 'core', 'distractionFree', ! isDistractionFree ); - registry - .dispatch( noticesStore ) - .createInfoNotice( - isDistractionFree - ? __( 'Distraction free off.' ) - : __( 'Distraction free on.' ), - { - id: 'core/editor/distraction-free-mode/notice', - type: 'snackbar', - speakMessage: isDistractionFree - ? __( 'Distraction free mode activated.' ) - : __( 'Distraction free mode deactivated.' ), - actions: [ - { - label: __( 'Undo' ), - onClick: () => { - registry.batch( () => { - registry - .dispatch( preferencesStore ) - .set( - 'core', - 'fixedToolbar', - isDistractionFree ? true : false - ); - registry - .dispatch( preferencesStore ) - .toggle( - 'core', - 'distractionFree' - ); - } ); + + if ( createNotice ) { + registry + .dispatch( noticesStore ) + .createInfoNotice( + isDistractionFree + ? __( 'Distraction free off.' ) + : __( 'Distraction free on.' ), + { + id: 'core/editor/distraction-free-mode/notice', + type: 'snackbar', + speakMessage: isDistractionFree + ? __( 'Distraction free mode activated.' ) + : __( 'Distraction free mode deactivated.' ), + actions: [ + { + label: __( 'Undo' ), + onClick: () => { + registry.batch( () => { + registry + .dispatch( preferencesStore ) + .set( + 'core', + 'fixedToolbar', + isDistractionFree + ? true + : false + ); + registry + .dispatch( preferencesStore ) + .toggle( + 'core', + 'distractionFree' + ); + } ); + }, }, - }, - ], - } - ); + ], + } + ); + } } ); }; From 3a7723cb70ac4899e6f0d6bf558a87a8c2a52267 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Thu, 31 Oct 2024 12:29:41 +0400 Subject: [PATCH 09/12] Feedback changes Ensure speak messages are consistent for actions and menu items. Remove speakMessage option for createInfoNotice. Revert extraction of showIconLabels. Convert createNotice param to an object based param. --- .../data/data-core-notices.md | 1 - .../src/components/more-menu/index.js | 4 ++-- packages/edit-post/src/store/actions.js | 7 +++--- .../editor/src/components/more-menu/index.js | 23 +++++++++---------- packages/editor/src/store/actions.js | 18 +++++---------- packages/notices/src/store/actions.js | 5 +--- 6 files changed, 23 insertions(+), 35 deletions(-) diff --git a/docs/reference-guides/data/data-core-notices.md b/docs/reference-guides/data/data-core-notices.md index 4ab9ee8baf43d..d36098429811d 100644 --- a/docs/reference-guides/data/data-core-notices.md +++ b/docs/reference-guides/data/data-core-notices.md @@ -164,7 +164,6 @@ _Parameters_ - _options.isDismissible_ `[boolean]`: Whether the notice can be dismissed by user. - _options.type_ `[string]`: Type of notice, one of `default`, or `snackbar`. - _options.speak_ `[boolean]`: Whether the notice content should be announced to screen readers. -- _options.speakMessage_ `[string]`: Message to be spoken for screen readers. - _options.actions_ `[Array]`: User actions to be presented with notice. - _options.icon_ `[string]`: An icon displayed with the notice. Only used when type is set to `snackbar`. - _options.explicitDismiss_ `[boolean]`: Whether the notice includes an explicit dismiss button and can't be dismissed by clicking the body of the notice. Only applies when type is set to `snackbar`. diff --git a/packages/edit-post/src/components/more-menu/index.js b/packages/edit-post/src/components/more-menu/index.js index 38113f73706f9..026354e681349 100644 --- a/packages/edit-post/src/components/more-menu/index.js +++ b/packages/edit-post/src/components/more-menu/index.js @@ -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 index 07cfb23fe0a93..85702ae162285 100644 --- a/packages/edit-post/src/store/actions.js +++ b/packages/edit-post/src/store/actions.js @@ -529,13 +529,12 @@ export const toggleFullscreenMode = registry .dispatch( noticesStore ) .createInfoNotice( - isFullscreen ? __( 'Fullscreen off.' ) : __( 'Fullscreen on.' ), + isFullscreen + ? __( 'Fullscreen mode activated.' ) + : __( 'Fullscreen mode deactivated.' ), { id: 'core/edit-post/toggle-fullscreen-mode/notice', type: 'snackbar', - speakMessage: isFullscreen - ? __( 'Fullscreen mode activated.' ) - : __( 'Fullscreen mode deactivated.' ), actions: [ { label: __( 'Undo' ), diff --git a/packages/editor/src/components/more-menu/index.js b/packages/editor/src/components/more-menu/index.js index cdf0705d6fb0f..fb616b08ee15b 100644 --- a/packages/editor/src/components/more-menu/index.js +++ b/packages/editor/src/components/more-menu/index.js @@ -30,12 +30,11 @@ export default function MoreMenu() { const { openModal } = useDispatch( interfaceStore ); const { set: setPreference } = useDispatch( preferencesStore ); const { toggleDistractionFree } = useDispatch( editorStore ); - const { showIconLabels } = useSelect( ( select ) => { - const store = select( preferencesStore ); - return { - showIconLabels: store.get( 'core', 'showIconLabels' ), - }; - } ); + const showIconLabels = useSelect( + ( select ) => + select( preferencesStore ).get( 'core', 'showIconLabels' ), + [] + ); const turnOffDistractionFree = () => { setPreference( 'core', 'distractionFree', false ); @@ -69,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.' ) } /> diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index 05d230039fd1f..798705ba9f543 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -816,7 +816,7 @@ export function setIsListViewOpened( isOpen ) { * @param {boolean} createNotice Whether to create a notice when this action is triggered. */ export const toggleDistractionFree = - ( createNotice = true ) => + ( { createNotice = true } = {} ) => ( { dispatch, registry } ) => { const isDistractionFree = registry .select( preferencesStore ) @@ -861,8 +861,6 @@ export const toggleDistractionFree = 'core', 'fixedToolbar', isDistractionFree - ? true - : false ); registry .dispatch( preferencesStore ) @@ -895,13 +893,12 @@ export const toggleSpotlightMode = registry .dispatch( noticesStore ) .createInfoNotice( - isFocusMode ? __( 'Spotlight off.' ) : __( 'Spotlight on.' ), + isFocusMode + ? __( 'Spotlight mode activated.' ) + : __( 'Spotlight mode deactivated.' ), { id: 'core/editor/toggle-spotlight-mode/notice', type: 'snackbar', - speakMessage: isFocusMode - ? __( 'Spotlight mode activated.' ) - : __( 'Spotlight mode deactivated.' ), actions: [ { label: __( 'Undo' ), @@ -932,14 +929,11 @@ export const toggleTopToolbar = .dispatch( noticesStore ) .createInfoNotice( isTopToolbar - ? __( 'Top toolbar off.' ) - : __( 'Top toolbar on.' ), + ? __( 'Top toolbar activated.' ) + : __( 'Top toolbar deactivated.' ), { id: 'core/editor/toggle-top-toolbar/notice', type: 'snackbar', - speakMessage: isTopToolbar - ? __( 'Top toolbar activated.' ) - : __( 'Top toolbar deactivated.' ), actions: [ { label: __( 'Undo' ), diff --git a/packages/notices/src/store/actions.js b/packages/notices/src/store/actions.js index c472513c38b78..fb1c424307351 100644 --- a/packages/notices/src/store/actions.js +++ b/packages/notices/src/store/actions.js @@ -34,8 +34,6 @@ let uniqueId = 0; * content should be * announced to screen * readers. - * @param {string} [options.speakMessage] Message to be spoken for - * screen readers. * @param {Array} [options.actions] User actions to be * presented with notice. * @param {string} [options.icon] An icon displayed with the notice. @@ -71,7 +69,6 @@ let uniqueId = 0; export function createNotice( status = DEFAULT_STATUS, content, options = {} ) { const { speak = true, - speakMessage = null, isDismissible = true, context = DEFAULT_CONTEXT, id = `${ context }${ ++uniqueId }`, @@ -95,7 +92,7 @@ export function createNotice( status = DEFAULT_STATUS, content, options = {} ) { id, status, content, - spokenMessage: speak ? speakMessage || content : null, + spokenMessage: speak ? content : null, __unstableHTML, isDismissible, actions, From b42b15018c6c6004840ec31bb10570d636a13b30 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Thu, 31 Oct 2024 12:45:07 +0400 Subject: [PATCH 10/12] Fix createNotice docs --- docs/reference-guides/data/data-core-editor.md | 3 ++- packages/editor/src/store/actions.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index 9db1ef782de18..713a247d88be2 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/docs/reference-guides/data/data-core-editor.md @@ -1587,7 +1587,8 @@ Action that toggles Distraction free mode. Distraction free mode expects there a _Parameters_ -- _createNotice_ `boolean`: Whether to create a notice when this action is triggered. +- _options_ `[Object]`: Optional configuration object +- _options.createNotice_ `[boolean]`: Whether to create a notice ### toggleEditorPanelEnabled diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index 798705ba9f543..08c48c16dd576 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -813,7 +813,8 @@ export function setIsListViewOpened( isOpen ) { * Distraction free mode expects there are no sidebars, as due to the * z-index values set, you can't close sidebars. * - * @param {boolean} createNotice Whether to create a notice when this action is triggered. + * @param {Object} [options={}] Optional configuration object + * @param {boolean} [options.createNotice=true] Whether to create a notice */ export const toggleDistractionFree = ( { createNotice = true } = {} ) => From 3e5573d4f888084cdaeb943efdd2069d747f4626 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Thu, 31 Oct 2024 12:52:39 +0400 Subject: [PATCH 11/12] Disable notice for Distraction Free Menu Item toggle --- packages/editor/src/components/more-menu/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/more-menu/index.js b/packages/editor/src/components/more-menu/index.js index fb616b08ee15b..9e062e5e5adc5 100644 --- a/packages/editor/src/components/more-menu/index.js +++ b/packages/editor/src/components/more-menu/index.js @@ -80,7 +80,11 @@ export default function MoreMenu() { label={ __( 'Distraction free' ) } info={ __( 'Write with calmness' ) } handleToggling={ false } - onToggle={ toggleDistractionFree } + onToggle={ () => + toggleDistractionFree( { + createNotice: false, + } ) + } messageActivated={ __( 'Distraction free mode activated.' ) } From c4abd868880cc5b0fd3f77ede94193cb9c68aea7 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Thu, 31 Oct 2024 13:00:27 +0400 Subject: [PATCH 12/12] Fix incorrect activation notice bug --- packages/editor/src/store/actions.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index 08c48c16dd576..7ff23cb49f498 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -885,12 +885,12 @@ export const toggleDistractionFree = export const toggleSpotlightMode = () => ( { registry } ) => { + registry.dispatch( preferencesStore ).toggle( 'core', 'focusMode' ); + const isFocusMode = registry .select( preferencesStore ) .get( 'core', 'focusMode' ); - registry.dispatch( preferencesStore ).toggle( 'core', 'focusMode' ); - registry .dispatch( noticesStore ) .createInfoNotice( @@ -920,12 +920,12 @@ export const toggleSpotlightMode = export const toggleTopToolbar = () => ( { registry } ) => { + registry.dispatch( preferencesStore ).toggle( 'core', 'fixedToolbar' ); + const isTopToolbar = registry .select( preferencesStore ) .get( 'core', 'fixedToolbar' ); - registry.dispatch( preferencesStore ).toggle( 'core', 'fixedToolbar' ); - registry .dispatch( noticesStore ) .createInfoNotice(