diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md index e3fb22a1a7afe0..06fe5fc30420ae 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. + ### 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 ac3413e694877b..713a247d88be29 100644 --- 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 index cbdf5b3725b84b..ceb8f750c3472d 100644 --- 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" - ] -} \ No newline at end of file + "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 index 3d1bc9d3350da3..8567b541d03ab6 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 136742a19dddd4..026354e6813494 100644 --- 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 index 7ab0a965379be2..85702ae1622851 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,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 index 8eb88567bd0a3f..b4b9c05db256d7 100644 --- 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 index 6ccc01c6ac049c..9e062e5e5adc50 100644 --- 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.' ) } /> + 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.' ) } /> diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index cc2c23bcffcf7e..7ff23cb49f4983 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -812,9 +812,12 @@ 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 {Object} [options={}] Optional configuration object + * @param {boolean} [options.createNotice=true] Whether to create a notice */ export const toggleDistractionFree = - () => + ( { createNotice = true } = {} ) => ( { dispatch, registry } ) => { const isDistractionFree = registry .select( preferencesStore ) @@ -837,42 +840,116 @@ export const toggleDistractionFree = registry .dispatch( preferencesStore ) .set( 'core', 'distractionFree', ! isDistractionFree ); - registry - .dispatch( noticesStore ) - .createInfoNotice( - isDistractionFree - ? __( 'Distraction free mode deactivated.' ) - : __( 'Distraction free mode activated.' ), - { - id: 'core/editor/distraction-free-mode/notice', - type: 'snackbar', - 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 mode deactivated.' ) + : __( 'Distraction free mode activated.' ), + { + id: 'core/editor/distraction-free-mode/notice', + type: 'snackbar', + actions: [ + { + label: __( 'Undo' ), + onClick: () => { + registry.batch( () => { + registry + .dispatch( preferencesStore ) + .set( + 'core', + 'fixedToolbar', + isDistractionFree + ); + registry + .dispatch( preferencesStore ) + .toggle( + 'core', + 'distractionFree' + ); + } ); + }, }, - }, - ], - } - ); + ], + } + ); + } } ); }; +/** + * Action that toggles the Spotlight Mode view option. + */ +export const toggleSpotlightMode = + () => + ( { registry } ) => { + registry.dispatch( preferencesStore ).toggle( 'core', 'focusMode' ); + + const isFocusMode = registry + .select( preferencesStore ) + .get( 'core', 'focusMode' ); + + registry + .dispatch( noticesStore ) + .createInfoNotice( + isFocusMode + ? __( 'Spotlight mode activated.' ) + : __( 'Spotlight mode deactivated.' ), + { + 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. + */ +export const toggleTopToolbar = + () => + ( { registry } ) => { + registry.dispatch( preferencesStore ).toggle( 'core', 'fixedToolbar' ); + + const isTopToolbar = registry + .select( preferencesStore ) + .get( 'core', 'fixedToolbar' ); + + registry + .dispatch( noticesStore ) + .createInfoNotice( + isTopToolbar + ? __( 'Top toolbar activated.' ) + : __( 'Top toolbar deactivated.' ), + { + 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. *