From 7bc937745b2ed4bfb084845e255be9f65cde3cb8 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 26 Jun 2023 11:43:39 +0100 Subject: [PATCH 1/2] Add UI commands to the post editor --- packages/edit-post/src/editor.js | 2 + .../src/hooks/commands/use-common-commands.js | 102 ++++++++++++++++++ .../hooks/commands/use-edit-mode-commands.js | 2 +- 3 files changed, 105 insertions(+), 1 deletion(-) create mode 100644 packages/edit-post/src/hooks/commands/use-common-commands.js diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index 42a393c5fe3242..6ec907bfe4b0b0 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -25,6 +25,7 @@ import Layout from './components/layout'; import EditorInitialization from './components/editor-initialization'; import { store as editPostStore } from './store'; import { unlock } from './lock-unlock'; +import useCommonCommands from './hooks/commands/use-common-commands'; const { ExperimentalEditorProvider } = unlock( editorPrivateApis ); const { getLayoutStyles } = unlock( blockEditorPrivateApis ); @@ -32,6 +33,7 @@ const { useCommands } = unlock( coreCommandsPrivateApis ); function Editor( { postId, postType, settings, initialEdits, ...props } ) { useCommands(); + useCommonCommands(); const { hasFixedToolbar, focusMode, diff --git a/packages/edit-post/src/hooks/commands/use-common-commands.js b/packages/edit-post/src/hooks/commands/use-common-commands.js new file mode 100644 index 00000000000000..9a535a94a3dc36 --- /dev/null +++ b/packages/edit-post/src/hooks/commands/use-common-commands.js @@ -0,0 +1,102 @@ +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { __, isRTL } from '@wordpress/i18n'; +import { + code, + cog, + drawerLeft, + drawerRight, + blockDefault, +} from '@wordpress/icons'; +import { useCommand } from '@wordpress/commands'; +import { store as preferencesStore } from '@wordpress/preferences'; +import { store as interfaceStore } from '@wordpress/interface'; + +/** + * Internal dependencies + */ +import { store as editPostStore } from '../../store'; + +export default function useCommonCommands() { + const { openGeneralSidebar, closeGeneralSidebar, switchEditorMode } = + useDispatch( editPostStore ); + const { editorMode, activeSidebar } = useSelect( + ( select ) => ( { + activeSidebar: select( interfaceStore ).getActiveComplementaryArea( + editPostStore.name + ), + } ), + [] + ); + const { toggle } = useDispatch( preferencesStore ); + + useCommand( { + name: 'core/open-settings-sidebar', + label: __( 'Toggle settings sidebar' ), + icon: isRTL() ? drawerLeft : drawerRight, + callback: ( { close } ) => { + close(); + if ( activeSidebar === 'edit-post/document' ) { + closeGeneralSidebar(); + } else { + openGeneralSidebar( 'edit-post/document' ); + } + }, + } ); + + useCommand( { + name: 'core/open-block-inspector', + label: __( 'Toggle block inspector' ), + icon: blockDefault, + callback: ( { close } ) => { + close(); + if ( activeSidebar === 'edit-post/block' ) { + closeGeneralSidebar(); + } else { + openGeneralSidebar( 'edit-post/block' ); + } + }, + } ); + + useCommand( { + name: 'core/toggle-distraction-free', + label: __( 'Toggle distraction free' ), + icon: cog, + callback: ( { close } ) => { + toggle( 'core/edit-post', 'distractionFree' ); + close(); + }, + } ); + + useCommand( { + name: 'core/toggle-spotlight-mode', + label: __( 'Toggle spotlight mode' ), + icon: cog, + callback: ( { close } ) => { + toggle( 'core/edit-post', 'focusMode' ); + close(); + }, + } ); + + useCommand( { + name: 'core/toggle-top-toolbar', + label: __( 'Toggle top toolbar' ), + icon: cog, + callback: ( { close } ) => { + toggle( 'core/edit-post', 'fixedToolbar' ); + close(); + }, + } ); + + useCommand( { + name: 'core/toggle-code-editor', + label: __( 'Toggle code editor' ), + icon: code, + callback: ( { close } ) => { + switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' ); + close(); + }, + } ); +} diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js index 63e20b9c22c14e..2466bb2a706c4e 100644 --- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js +++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js @@ -179,7 +179,7 @@ function useEditUICommands() { } ); commands.push( { - name: 'core/toggle-distraction-free-mode', + name: 'core/toggle-spotlight-mode', label: __( 'Toggle spotlight mode' ), icon: cog, callback: ( { close } ) => { From 68f6ea4dae63d56f4108768f3c87ef2c5f8707cf Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 26 Jun 2023 17:55:14 +0300 Subject: [PATCH 2/2] get editorMode value --- packages/edit-post/src/hooks/commands/use-common-commands.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-post/src/hooks/commands/use-common-commands.js b/packages/edit-post/src/hooks/commands/use-common-commands.js index 9a535a94a3dc36..796e0665fc2fa3 100644 --- a/packages/edit-post/src/hooks/commands/use-common-commands.js +++ b/packages/edit-post/src/hooks/commands/use-common-commands.js @@ -27,6 +27,7 @@ export default function useCommonCommands() { activeSidebar: select( interfaceStore ).getActiveComplementaryArea( editPostStore.name ), + editorMode: select( editPostStore ).getEditorMode(), } ), [] );