From 354dc17e9648586c47652f2e94e3bc8a646dd41c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Sun, 25 Jun 2023 11:41:19 +0100 Subject: [PATCH] Command center: Add another batch of commands to the site editor (#51832) Co-authored-by: Nik Tsekouras --- packages/commands/src/hooks/use-command.js | 2 +- .../src/hooks/commands/use-common-commands.js | 21 +++- .../hooks/commands/use-edit-mode-commands.js | 108 +++++++++++++++++- 3 files changed, 127 insertions(+), 4 deletions(-) diff --git a/packages/commands/src/hooks/use-command.js b/packages/commands/src/hooks/use-command.js index e3f56662b91f2..7d92439a3d5ed 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 34fef28c277fe..96a48980c021a 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 16414eb1cc98f..7d6dcdbd05440 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,22 @@ * 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'; +import { store as interfaceStore } from '@wordpress/interface'; /** * Internal dependencies @@ -106,10 +118,102 @@ function useEditModeCommandLoader() { }; } +function useEditUICommandLoader() { + const { openGeneralSidebar, closeGeneralSidebar, switchEditorMode } = + useDispatch( editSiteStore ); + 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 + ), + } ), + [] + ); + const { toggle } = useDispatch( preferencesStore ); + + if ( canvasMode !== 'edit' ) { + return { isLoading: false, commands: [] }; + } + + const commands = []; + + commands.push( { + name: 'core/open-settings-sidebar', + label: __( 'Toggle settings sidebar' ), + icon: isRTL() ? drawerLeft : drawerRight, + callback: ( { close } ) => { + close(); + if ( activeSidebar === 'edit-site/template' ) { + closeGeneralSidebar(); + } else { + openGeneralSidebar( 'edit-site/template' ); + } + }, + } ); + + commands.push( { + name: 'core/open-block-inspector', + label: __( 'Toggle block inspector' ), + icon: blockDefault, + callback: ( { close } ) => { + close(); + if ( activeSidebar === 'edit-site/block-inspector' ) { + closeGeneralSidebar(); + } else { + openGeneralSidebar( 'edit-site/block-inspector' ); + } + }, + } ); + + 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, + } ); }