Enable the command palette feature everywhere in WordPress

lib/client-assets.php

@@ -213,12 +213,17 @@ function gutenberg_register_packages_scripts( $scripts ) {
 				break;
 
 			case 'wp-edit-post':
-				array_push( $dependencies, 'media-models', 'media-views', 'postbox' );
+				array_push( $dependencies, 'media-models', 'media-views', 'postbox', 'wp-core-commands' );
 				break;
 
 			case 'wp-edit-site':
-				array_push( $dependencies, 'wp-dom-ready' );
+				array_push( $dependencies, 'wp-dom-ready', 'wp-core-commands' );
 				break;
+
+			case 'wp-edit-widgets':
+				array_push( $dependencies, 'wp-core-commands' );
+				break;
+
 			case 'wp-preferences':
 				array_push( $dependencies, 'wp-preferences-persistence' );
 				break;
@@ -418,7 +423,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-edit-widgets',
 		gutenberg_url( 'build/edit-widgets/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-patterns', 'wp-reusable-blocks', 'wp-widgets' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-patterns', 'wp-reusable-blocks', 'wp-widgets', 'wp-commands' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-widgets', 'rtl', 'replace' );

lib/experimental/commands.php

@@ -0,0 +1,39 @@
+<?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' );
+
+	wp_add_inline_script(
+		'wp-core-commands',
+		<<<'EOT'
+			const CommandsMenuWrapper = wp.coreCommands.CommandsMenuWrapper;
+			const mountPoint = document.createElement('div');
+
+			mountPoint.id = 'wp-commands';
+			document.body.appendChild(mountPoint);
+
+			const root = wp.element.createRoot(mountPoint);
+
+			root.render(
+				wp.element.createElement(CommandsMenuWrapper, null)
+			);
+EOT
+	);
+}
+
+add_action( 'wp_print_scripts', 'gutenberg_enqueue_commands', 1 );

lib/load.php

@@ -100,6 +100,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.4/kses.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/core-commands/README.md

@@ -16,6 +16,10 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 <!-- START TOKEN(Autogenerated API docs) -->
 
+### CommandsMenuWrapper
+
+Undocumented declaration.
+
 ### privateApis
 
 Undocumented declaration.

packages/core-commands/src/commands-menu-wrapper.js

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+import { privateApis } from './private-apis';
+
+/**
+ * WordPress dependencies
+ */
+import { CommandMenu } from '@wordpress/commands';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+const { useCommands } = unlock( privateApis );
+const { RouterProvider } = unlock( routerPrivateApis );
+
+export function CommandsMenuWrapper() {
+	useCommands();
+
+	return (
+		<RouterProvider>
+			<CommandMenu />
+		</RouterProvider>
+	);
+}

packages/core-commands/src/index.js

@@ -1 +1,2 @@
 export { privateApis } from './private-apis';
+export { CommandsMenuWrapper } from './commands-menu-wrapper';

packages/edit-post/src/editor.js

@@ -13,8 +13,6 @@ 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';
-import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
 /**
  * Internal dependencies
@@ -26,10 +24,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 +161,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();
@@ -170,7 +166,6 @@ export default function Layout() {
 
 	return (
 		<>
-			<CommandMenu />
 			<KeyboardShortcutsRegister />
 			<KeyboardShortcutsGlobal />
 			{ fullResizer }