Command center: Add another batch of commands to the site editor (#51832

)

Co-authored-by: Nik Tsekouras <[email protected]>

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 );

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,

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,
+	} );
 }