From 22895154c72ef7aa6da5851d7f049e0aaf729a36 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 23 Jun 2023 08:30:50 +0100 Subject: [PATCH 1/3] Add another batch of commands to the site editor --- packages/commands/src/hooks/use-command.js | 2 +- .../src/hooks/commands/use-common-commands.js | 21 +++- .../hooks/commands/use-edit-mode-commands.js | 96 ++++++++++++++++++- 3 files changed, 115 insertions(+), 4 deletions(-) diff --git a/packages/commands/src/hooks/use-command.js b/packages/commands/src/hooks/use-command.js index e3f56662b91f29..7d92439a3d5edc 100644 --- a/packages/commands/src/hooks/use-command.js +++ b/packages/commands/src/hooks/use-command.js @@ -28,7 +28,7 @@ export default function useCommand( command ) { label: command.label, searchLabel: command.searchLabel, icon: command.icon, - callback: currentCallback.current, + callback: ( ...args ) => currentCallback.current( ...args ), } ); return () => { unregisterCommand( command.name ); diff --git a/packages/edit-site/src/hooks/commands/use-common-commands.js b/packages/edit-site/src/hooks/commands/use-common-commands.js index 34fef28c277fea..96a48980c021aa 100644 --- a/packages/edit-site/src/hooks/commands/use-common-commands.js +++ b/packages/edit-site/src/hooks/commands/use-common-commands.js @@ -4,7 +4,7 @@ import { useMemo } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { trash, backup, help, styles } from '@wordpress/icons'; +import { trash, backup, help, styles, external } from '@wordpress/icons'; import { useCommandLoader, useCommand } from '@wordpress/commands'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { privateApis as routerPrivateApis } from '@wordpress/router'; @@ -105,6 +105,15 @@ export function useCommonCommands() { ); const { set } = useDispatch( preferencesStore ); const history = useHistory(); + const { homeUrl } = useSelect( ( select ) => { + const { + getUnstableBase, // Site index. + } = select( coreStore ); + + return { + homeUrl: getUnstableBase()?.home, + }; + }, [] ); useCommand( { name: 'core/edit-site/open-global-styles-revisions', @@ -155,6 +164,16 @@ export function useCommonCommands() { icon: help, } ); + useCommand( { + name: 'core/edit-site/view-site', + label: __( 'View site' ), + callback: ( { close } ) => { + close(); + window.open( homeUrl, '_blank' ); + }, + icon: external, + } ); + useCommandLoader( { name: 'core/edit-site/reset-global-styles', hook: useGlobalStylesResetCommands, 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 16414eb1cc98f8..6400027406b32b 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 @@ -2,10 +2,21 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; -import { trash, backup, layout, page } from '@wordpress/icons'; +import { __, isRTL } from '@wordpress/i18n'; +import { + code, + cog, + trash, + backup, + layout, + page, + drawerLeft, + drawerRight, + blockDefault, +} from '@wordpress/icons'; import { useCommandLoader } from '@wordpress/commands'; import { privateApis as routerPrivateApis } from '@wordpress/router'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -106,10 +117,91 @@ function useEditModeCommandLoader() { }; } +function useEditUICommandLoader() { + const { openGeneralSidebar, switchEditorMode } = + useDispatch( editSiteStore ); + const { canvasMode, editorMode } = useSelect( + ( select ) => ( { + isPage: select( editSiteStore ).isPage(), + hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(), + canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(), + editorMode: select( editSiteStore ).getEditorMode(), + } ), + [] + ); + const { toggle } = useDispatch( preferencesStore ); + + if ( canvasMode !== 'edit' ) { + return { isLoading: true, commands: [] }; + } + + const commands = []; + + commands.push( { + name: 'core/open-settings-sidebar', + label: __( 'Open settings sidebar' ), + icon: isRTL() ? drawerLeft : drawerRight, + callback: ( { close } ) => { + openGeneralSidebar( 'edit-site/template' ); + close(); + }, + } ); + + commands.push( { + name: 'core/open-block-inspector', + label: __( 'Open block inspector' ), + icon: blockDefault, + callback: ( { close } ) => { + openGeneralSidebar( 'edit-site/block-inspector' ); + close(); + }, + } ); + + commands.push( { + name: 'core/toggle-distraction-free-mode', + label: __( 'Toggle spotlight mode' ), + icon: cog, + callback: ( { close } ) => { + toggle( 'core/edit-site', 'focusMode' ); + close(); + }, + } ); + + commands.push( { + name: 'core/toggle-top-toolbar', + label: __( 'Toggle top toolbar' ), + icon: cog, + callback: ( { close } ) => { + toggle( 'core/edit-site', 'fixedToolbar' ); + close(); + }, + } ); + + commands.push( { + name: 'core/toggle-code-editor', + label: __( 'Toggle code editor' ), + icon: code, + callback: ( { close } ) => { + switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' ); + close(); + }, + } ); + + return { + isLoading: false, + commands, + }; +} + export function useEditModeCommands() { useCommandLoader( { name: 'core/edit-site/manipulate-document', hook: useEditModeCommandLoader, context: 'site-editor-edit', } ); + + useCommandLoader( { + name: 'core/edit-site/edit-ui', + hook: useEditUICommandLoader, + } ); } From 7f6380582eaa504072adc7d53432e0379657c02d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Sun, 25 Jun 2023 10:58:15 +0100 Subject: [PATCH 2/3] Fix typo Co-authored-by: Nik Tsekouras --- packages/edit-site/src/hooks/commands/use-edit-mode-commands.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 6400027406b32b..5fe72112f6eb59 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 @@ -132,7 +132,7 @@ function useEditUICommandLoader() { const { toggle } = useDispatch( preferencesStore ); if ( canvasMode !== 'edit' ) { - return { isLoading: true, commands: [] }; + return { isLoading: false, commands: [] }; } const commands = []; From cf4851573c4eb6cc2f9a59d58259d7b6d3f48055 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Sun, 25 Jun 2023 11:04:37 +0100 Subject: [PATCH 3/3] Make the sidebar commands toggles --- .../hooks/commands/use-edit-mode-commands.js | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) 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 5fe72112f6eb59..7d6dcdbd05440d 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 @@ -17,6 +17,7 @@ import { import { useCommandLoader } from '@wordpress/commands'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { store as preferencesStore } from '@wordpress/preferences'; +import { store as interfaceStore } from '@wordpress/interface'; /** * Internal dependencies @@ -118,14 +119,17 @@ function useEditModeCommandLoader() { } function useEditUICommandLoader() { - const { openGeneralSidebar, switchEditorMode } = + const { openGeneralSidebar, closeGeneralSidebar, switchEditorMode } = useDispatch( editSiteStore ); - const { canvasMode, editorMode } = useSelect( + const { canvasMode, editorMode, activeSidebar } = useSelect( ( select ) => ( { isPage: select( editSiteStore ).isPage(), hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(), canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(), editorMode: select( editSiteStore ).getEditorMode(), + activeSidebar: select( interfaceStore ).getActiveComplementaryArea( + editSiteStore.name + ), } ), [] ); @@ -139,21 +143,29 @@ function useEditUICommandLoader() { commands.push( { name: 'core/open-settings-sidebar', - label: __( 'Open settings sidebar' ), + label: __( 'Toggle settings sidebar' ), icon: isRTL() ? drawerLeft : drawerRight, callback: ( { close } ) => { - openGeneralSidebar( 'edit-site/template' ); close(); + if ( activeSidebar === 'edit-site/template' ) { + closeGeneralSidebar(); + } else { + openGeneralSidebar( 'edit-site/template' ); + } }, } ); commands.push( { name: 'core/open-block-inspector', - label: __( 'Open block inspector' ), + label: __( 'Toggle block inspector' ), icon: blockDefault, callback: ( { close } ) => { - openGeneralSidebar( 'edit-site/block-inspector' ); close(); + if ( activeSidebar === 'edit-site/block-inspector' ) { + closeGeneralSidebar(); + } else { + openGeneralSidebar( 'edit-site/block-inspector' ); + } }, } );