Experimental: Enable Command Palette in admin dashboard

WordPress · t-hamano · Aug 19, 2025 · Aug 2, 2025 · Aug 13, 2025 · Aug 19, 2025
commit b2ecac71b901d326c0cd0d4e56d635aca7f5e38a
@@ -0,0 +1,44 @@
+<?php
+/**
+ * Bootstraps the Command Palette  in the admin dashboard.
+ *
+ * @package Gutenberg
+ */
+
+/**
+ * Enqueues the assets required for the Command Palette.
+ *
+ * @global string $pagenow The name of the current admin page being viewed.
+ */
+function gutenberg_enqueue_command_palette_assets() {
+	// For now, we don't enqueue assets to the frontend. It may be available in the future.
+	if ( ! is_admin() ) {
+		return;
+	}
+
+	global $pagenow, $current_screen;
+
+	// The Site Editor and Post Editor already implement the Command Palette
+	// within the app, so do nothing on those pages.
+	if ( in_array( $pagenow, array( 'site-editor.php', 'post.php', 'post-new.php' ), true ) && $current_screen->is_block_editor() ) {
+		return;
+	}
 <CommandMenu /> 
 <CommandMenu /> 
+
+	$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+	if ( empty( $gutenberg_experiments ) || ! array_key_exists( 'gutenberg-command-palette-everywhere', $gutenberg_experiments ) ) {
+		return;
+	}
+
+	wp_enqueue_script( 'wp-commands' );
+	wp_enqueue_style( 'wp-commands' );
+	wp_enqueue_script( 'wp-core-commands' );
+
+	$inline_script = <<<JS
+	window.__experimentalEnableCommandPaletteEverywhere = true;
+	wp.coreCommands.initializeCommandPalette();
+JS;
+
+	wp_add_inline_script( 'wp-core-commands', $inline_script );
+}
+
+add_action( 'admin_enqueue_scripts', 'gutenberg_enqueue_command_palette_assets' );
@@ -91,6 +91,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-command-palette-everywhere',
+		__( 'Command Palette: enable everywhere', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enables the Command Palette everywhere in the admin dashboard.', 'gutenberg' ),
+			'id'    => 'gutenberg-command-palette-everywhere',
+		)
+	);
+
 	add_settings_field(
 		'gutenberg-media-processing',
 		__( 'Client-side media processing', 'gutenberg' ),

@@ -91,6 +91,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/synchronization.php';
 require __DIR__ . '/experimental/script-modules.php';
 require __DIR__ . '/experimental/posts/load.php';
+require __DIR__ . '/experimental/commands.php';
 
 if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
 	require __DIR__ . '/experimental/disable-tinymce.php';

diff --git a/packages/core-commands/README.md b/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) -->
 
+### initializeCommandPalette
+
+Initializes the Command Palette. This function does nothing unless the experimental setting is enabled.
+
 ### privateApis
 
 Undocumented declaration.

diff --git a/packages/core-commands/src/index.js b/packages/core-commands/src/index.js
@@ -1 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { createRoot, StrictMode } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { CommandMenu } from '@wordpress/commands';
+
+/**
+ * Internal dependencies
+ */
+import { useAdminNavigationCommands } from './admin-navigation-commands';
+import { useSiteEditorNavigationCommands } from './site-editor-navigation-commands';
+import { unlock } from './lock-unlock';
 export { privateApis } from './private-apis';
+
+const { RouterProvider } = unlock( routerPrivateApis );
+
+// Register core commands and render the Command Palette.
+function CommandPalette() {
+	useAdminNavigationCommands();
+	useSiteEditorNavigationCommands();
+	return (
+		<RouterProvider pathArg="p">
+			<CommandMenu />
+		</RouterProvider>
+	);
+}
+
+/**
+ * Initializes the Command Palette. This function does nothing
+ * unless the experimental setting is enabled.
+ */
+export function initializeCommandPalette() {
+	if ( ! window.__experimentalEnableCommandPaletteEverywhere ) {
+		return;
+	}
+	const root = document.createElement( 'div' );
+	document.body.appendChild( root );
+	createRoot( root ).render(
+		<StrictMode>
+			<CommandPalette />
+		</StrictMode>
+	);
+}
diff --git a/packages/router/src/router.tsx b/packages/router/src/router.tsx
@@ -221,7 +221,7 @@ export function RouterProvider( {
 	);
 	const matcher = useMemo( () => {
 		const ret = new RouteRecognizer();
-		routes.forEach( ( route ) => {
+		( routes ?? [] ).forEach( ( route ) => {
 			ret.add( [ { path: route.path, handler: route } ], {
 				as: route.name,
 			} );