Enable the command palette feature everywhere in WordPress

lib/experimental/commands.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Experiment to enable Command Palette everywhere in WordPress.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Enqueue the command palette everywhere in WordPress.
+ *
+ * @package gutenberg
+ */
+function gutenberg_enqueue_commands() {
+	if ( ! is_user_logged_in() ) {
+		return;
+	}
+
+	wp_enqueue_style( 'wp-commands' );
+	wp_enqueue_script( 'wp-core-commands' );
+}
+
+add_action( 'wp_print_scripts', 'gutenberg_enqueue_commands', 1 );

lib/load.php

@@ -99,6 +99,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.4/script-loader.php';
 
 // Experimental features.
+require __DIR__ . '/experimental/commands.php';
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';
 require __DIR__ . '/experimental/blocks.php';
 require __DIR__ . '/experimental/navigation-theme-opt-in.php';

packages/commands/src/components/command-menu.js

@@ -21,10 +21,6 @@ import {
 	TextHighlight,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import {
-	store as keyboardShortcutsStore,
-	useShortcut,
-} from '@wordpress/keyboard-shortcuts';
 import { Icon, search as inputIcon } from '@wordpress/icons';
 
 /**
@@ -187,45 +183,34 @@ function CommandInput( { isOpen, search, setSearch } ) {
  * @ignore
  */
 export function CommandMenu() {
-	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	const [ search, setSearch ] = useState( '' );
-	const isOpen = useSelect(
-		( select ) => select( commandsStore ).isOpen(),
-		[]
-	);
+	const isOpenRef = useRef( false );
+	const isOpen = useSelect( ( select ) => {
+		return ( isOpenRef.current = select( commandsStore ).isOpen() );
+	}, [] );
 	const { open, close } = useDispatch( commandsStore );
 	const [ loaders, setLoaders ] = useState( {} );
 
 	useEffect( () => {
-		registerShortcut( {
-			name: 'core/commands',
-			category: 'global',
-			description: __( 'Open the command palette.' ),
-			keyCombination: {
-				modifier: 'primary',
-				character: 'k',
-			},
-		} );
-	}, [ registerShortcut ] );
+		const handleUserKeyPress = ( e ) => {
+			if ( e.metaKey && e.key === 'k' ) {
+				// Prevent the Save dialog to open
+				e.preventDefault();
 
-	useShortcut(
-		'core/commands',
-		/** @type {import('react').KeyboardEventHandler} */
-		( event ) => {
-			// Bails to avoid obscuring the effect of the preceding handler(s).
-			if ( event.defaultPrevented ) return;
-
-			event.preventDefault();
-			if ( isOpen ) {
-				close();
-			} else {
-				open();
+				if ( isOpenRef.current ) {
+					close();
+				} else {
+					open();
+				}
 			}
-		},
-		{
-			bindGlobal: true,
-		}
-	);
+		};
+
+		document.addEventListener( 'keydown', handleUserKeyPress );
+
+		return () => {
+			document.removeEventListener( 'keydown', handleUserKeyPress );
+		};
+	}, [ close, open ] );
 
 	const setLoader = useCallback(
 		( name, value ) =>

packages/core-commands/src/index.js

@@ -1 +1,35 @@
-export { privateApis } from './private-apis';
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+import { privateApis } from './private-apis';
+export { privateApis };
+
+/**
+ * WordPress dependencies
+ */
+import { createRoot } from '@wordpress/element';
+import { CommandMenu } from '@wordpress/commands';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+const { useCommands } = unlock( privateApis );
+const { RouterProvider } = unlock( routerPrivateApis );
+
+const mountPoint = document.createElement( 'div' );
+mountPoint.id = 'wp-commands';
+
+document.body.appendChild( mountPoint );
+
+const root = createRoot( mountPoint );
+
+function CommandMenuWrapper() {
+	useCommands();
+
+	return (
+		<RouterProvider>
+			<CommandMenu />
+		</RouterProvider>
+	);
+}
+
+root.render( <CommandMenuWrapper /> );

packages/edit-post/src/editor.js

@@ -13,7 +13,7 @@ import { useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { CommandMenu } from '@wordpress/commands';
+// eslint-disable-next-line no-unused-vars
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
 /**
@@ -26,10 +26,8 @@ import { unlock } from './lock-unlock';
 import useCommonCommands from './hooks/commands/use-common-commands';
 
 const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
-const { useCommands } = unlock( coreCommandsPrivateApis );
 
 function Editor( { postId, postType, settings, initialEdits, ...props } ) {
-	useCommands();
 	useCommonCommands();
 	const {
 		hasFixedToolbar,
@@ -165,7 +163,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
 				{ ...props }
 			>
 				<ErrorBoundary>
-					<CommandMenu />
 					<EditorInitialization postId={ postId } />
 					<Layout />
 				</ErrorBoundary>

packages/edit-site/src/components/layout/index.js

@@ -21,16 +21,14 @@ import { __ } from '@wordpress/i18n';
 import { useState, useRef } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import {
-	CommandMenu,
-	privateApis as commandsPrivateApis,
-} from '@wordpress/commands';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	privateApis as blockEditorPrivateApis,
 	useBlockCommands,
 } from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+// eslint-disable-next-line no-unused-vars
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
 /**
@@ -55,7 +53,6 @@ import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands
 import PageMain from '../page-main';
 import { useIsSiteEditorLoading } from './hooks';
 
-const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
@@ -66,7 +63,6 @@ export default function Layout() {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
 	useSyncCanvasModeWithURL();
-	useCommands();
 	useEditModeCommands();
 	useCommonCommands();
 	useBlockCommands();
@@ -168,7 +164,6 @@ export default function Layout() {
 
 	return (
 		<>
-			<CommandMenu />
 			<KeyboardShortcutsRegister />
 			<KeyboardShortcutsGlobal />
 			{ fullResizer }