Command Palette: Register menu navigation based on Core Menu API (#71476)

t-hamano · youknowriad · shail-mehta · web-flow · commit 17c36f9c7304 · 2025-09-05T10:43:28.000+09:00
* Command Palette: Register menu navigation based on Core Menu API

* Handle menu_slug better

* Add PHPDoc

Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
Co-authored-by: youknowriad &lt;youknowriad@git.wordpress.org&gt;
Co-authored-by: shail-mehta &lt;shailu25@git.wordpress.org&gt;
diff --git a/backport-changelog/6.9/9542.md b/backport-changelog/6.9/9542.md
@@ -1,3 +1,4 @@
 https://github.com/WordPress/wordpress-develop/pull/9542
 
 * https://github.com/WordPress/gutenberg/pull/71264
+* https://github.com/WordPress/gutenberg/pull/71476
diff --git a/lib/compat/wordpress-6.9/command-palette.php b/lib/compat/wordpress-6.9/command-palette.php
@@ -1,16 +1,95 @@
 <?php
 /**
  * Enqueues the assets required for the Command Palette.
+ *
+ * @global array  $menu
+ * @global array  $submenu
  */
 function gutenberg_enqueue_command_palette_assets() {
-	if ( ! is_admin() ) {
-		return;
+	global $menu, $submenu;
+
+	$command_palette_settings = array();
+
+	if ( $menu ) {
+		$menu_commands = array();
+		foreach ( $menu as $menu_item ) {
+			if ( empty( $menu_item[0] ) || ! empty( $menu_item[1] ) && ! current_user_can( $menu_item[1] ) ) {
+				continue;
+			}
+
+			// Remove all HTML tags and their contents.
+			$menu_label = $menu_item[0];
+			while ( preg_match( '/<[^>]*>/', $menu_label ) ) {
+				$menu_label = preg_replace( '/<[^>]*>.*?<\/[^>]*>|<[^>]*\/>|<[^>]*>/s', '', $menu_label );
+			}
+			$menu_label = trim( $menu_label );
+			$menu_url   = '';
+			$menu_slug  = $menu_item[2];
+
+			if ( preg_match( '/\.php($|\?)/', $menu_slug ) || wp_http_validate_url( $menu_slug ) ) {
+				$menu_url = $menu_slug;
+			} elseif ( ! empty( menu_page_url( $menu_slug, false ) ) ) {
+				$menu_url = menu_page_url( $menu_slug, false );
+			}
+
+			if ( $menu_url ) {
+				$menu_commands[] = array(
+					'label' => $menu_label,
+					'url'   => $menu_url,
+					'name'  => $menu_slug,
+				);
+			}
+
+			if ( array_key_exists( $menu_slug, $submenu ) ) {
+				foreach ( $submenu[ $menu_slug ] as $submenu_item ) {
+					if ( empty( $submenu_item[0] ) || ! empty( $submenu_item[1] ) && ! current_user_can( $submenu_item[1] ) ) {
+						continue;
+					}
+
+					// Remove all HTML tags and their contents.
+					$submenu_label = $submenu_item[0];
+					while ( preg_match( '/<[^>]*>/', $submenu_label ) ) {
+						$submenu_label = preg_replace( '/<[^>]*>.*?<\/[^>]*>|<[^>]*\/>|<[^>]*>/s', '', $submenu_label );
+					}
+					$submenu_label = trim( $submenu_label );
+					$submenu_url   = '';
+					$submenu_slug  = $submenu_item[2];
+
+					if ( preg_match( '/\.php($|\?)/', $submenu_slug ) || wp_http_validate_url( $submenu_slug ) ) {
+						$submenu_url = $submenu_slug;
+					} elseif ( ! empty( menu_page_url( $submenu_slug, false ) ) ) {
+						$submenu_url = menu_page_url( $submenu_slug, false );
+					}
+
+					if ( $submenu_url ) {
+						$menu_commands[] = array(
+							'label' => sprintf(
+								/* translators: 1: Menu label, 2: Submenu label. */
+								__( '%1$s > %2$s' ),
+								$menu_label,
+								$submenu_label
+							),
+							'url'   => $submenu_url,
+							'name'  => $menu_slug . '-' . $submenu_item[2],
+						);
+					}
+				}
+			}
+		}
+		$command_palette_settings['menu_commands'] = $menu_commands;
 	}
 
 	wp_enqueue_script( 'wp-commands' );
 	wp_enqueue_style( 'wp-commands' );
 	wp_enqueue_script( 'wp-core-commands' );
-	wp_add_inline_script( 'wp-core-commands', 'wp.coreCommands.initializeCommandPalette();' );
+
+	wp_add_inline_script(
+		'wp-core-commands',
+		sprintf(
+			'wp.coreCommands.initializeCommandPalette( %s );',
+			wp_json_encode( $command_palette_settings, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES )
+		)
+	);
 }
 
 if ( has_filter( 'admin_enqueue_scripts', 'wp_enqueue_command_palette_assets' ) ) {
diff --git a/packages/core-commands/README.md b/packages/core-commands/README.md
@@ -20,6 +20,10 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 Initializes the Command Palette.
 
+_Parameters_
+
+-   _settings_ `Object`: Command palette settings.
+
 ### privateApis
 
 Undocumented declaration.
diff --git a/packages/core-commands/src/admin-navigation-commands.js b/packages/core-commands/src/admin-navigation-commands.js
@@ -2,249 +2,40 @@
  * WordPress dependencies
  */
 import { useCommandLoader } from '@wordpress/commands';
-import { __ } from '@wordpress/i18n';
-import { plus, dashboard } from '@wordpress/icons';
-import { getPath } from '@wordpress/url';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useMemo } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import { unlock } from './lock-unlock';
-
-const { useHistory } = unlock( routerPrivateApis );
-
-const getAddNewPageCommand = () =>
-	function useAddNewPageCommand() {
-		const canCreatePage = useSelect(
-			( select ) =>
-				select( coreStore ).canUser( 'create', {
-					kind: 'postType',
-					name: 'page',
-				} ),
-			[]
-		);
-		const isSiteEditor = getPath( window.location.href )?.includes(
-			'site-editor.php'
-		);
-		const history = useHistory();
-		const isBlockBasedTheme = useSelect( ( select ) => {
-			return select( coreStore ).getCurrentTheme()?.is_block_theme;
-		}, [] );
-		const { saveEntityRecord } = useDispatch( coreStore );
-		const { createErrorNotice } = useDispatch( noticesStore );
-
-		const createPageEntity = useCallback(
-			async ( { close } ) => {
-				try {
-					const page = await saveEntityRecord(
-						'postType',
-						'page',
-						{
-							status: 'draft',
-						},
-						{
-							throwOnError: true,
-						}
-					);
-					if ( page?.id ) {
-						history.navigate( `/page/${ page.id }?canvas=edit` );
-					}
-				} catch ( error ) {
-					const errorMessage =
-						error.message && error.code !== 'unknown_error'
-							? error.message
-							: __(
-									'An error occurred while creating the item.'
-							  );
-
-					createErrorNotice( errorMessage, {
-						type: 'snackbar',
-					} );
-				} finally {
-					close();
-				}
-			},
-			[ createErrorNotice, history, saveEntityRecord ]
-		);
-
-		const commands = useMemo( () => {
-			if ( ! canCreatePage ) {
-				return [];
-			}
-
-			const addNewPage =
-				isSiteEditor && isBlockBasedTheme
-					? createPageEntity
-					: () =>
-							( document.location.href =
-								'post-new.php?post_type=page' );
-			return [
-				{
-					name: 'core/add-new-page',
-					label: __( 'Add Page' ),
-					icon: plus,
-					callback: addNewPage,
-					keywords: [
-						__( 'page' ),
-						__( 'new' ),
-						__( 'add' ),
-						__( 'create' ),
-					],
-				},
-			];
-		}, [
-			createPageEntity,
-			isSiteEditor,
-			isBlockBasedTheme,
-			canCreatePage,
-		] );
-
-		return {
-			isLoading: false,
-			commands,
-		};
-	};
-
-const getAdminBasicNavigationCommands = () =>
+const getAdminNavigationCommands = ( menuCommands ) =>
 	function useAdminBasicNavigationCommands() {
-		const { isBlockBasedTheme, canCreateTemplate } = useSelect(
-			( select ) => {
-				return {
-					isBlockBasedTheme:
-						select( coreStore ).getCurrentTheme()?.is_block_theme,
-					canCreateTemplate: select( coreStore ).canUser( 'create', {
-						kind: 'postType',
-						name: 'wp_template',
-					} ),
-				};
-			},
-			[]
-		);
-
 		const commands = useMemo( () => {
-			if ( canCreateTemplate && isBlockBasedTheme ) {
-				const isSiteEditor = getPath( window.location.href )?.includes(
-					'site-editor.php'
+			return ( menuCommands ?? [] ).map( ( menuCommand ) => {
+				const label = sprintf(
+					/* translators: %s: menu label */
+					__( 'Go to: %s' ),
+					menuCommand.label
 				);
-				if ( ! isSiteEditor ) {
-					return [
-						{
-							name: 'core/go-to-site-editor',
-							label: __( 'Open Site Editor' ),
-							callback: ( { close } ) => {
-								close();
-								document.location = 'site-editor.php';
-							},
-						},
-					];
-				}
-			}
-
-			return [];
-		}, [ canCreateTemplate, isBlockBasedTheme ] );
-
-		return {
-			commands,
-			isLoading: false,
-		};
-	};
-
-const getDashboardCommand = () =>
-	function useDashboardCommand() {
-		const currentPath = getPath( window.location.href );
-
-		const isEditorScreen =
-			currentPath?.includes( 'site-editor.php' ) ||
-			currentPath?.includes( 'post.php' ) ||
-			currentPath?.includes( 'post-new.php' ) ||
-			currentPath?.includes( 'widgets.php' ) ||
-			currentPath?.includes( 'customize.php' );
-
-		const commands = useMemo( () => {
-			if ( isEditorScreen ) {
-				return [
-					{
-						name: 'core/dashboard',
-						label: __( 'Dashboard' ),
-						icon: dashboard,
-						callback: () => {
-							document.location.assign( 'index.php' );
-						},
+				return {
+					label,
+					searchLabel: label,
+					name: menuCommand.name,
+					url: menuCommand.url,
+					callback: ( { close } ) => {
+						document.location = menuCommand.url;
+						close();
 					},
-				];
-			}
-			return [];
-		}, [ isEditorScreen ] );
+				};
+			} );
+		}, [] );
 
 		return {
-			isLoading: false,
 			commands,
-		};
-	};
-
-const getAddNewPostCommand = () =>
-	function useAddNewPostCommand() {
-		const canCreatePost = useSelect(
-			( select ) =>
-				select( coreStore ).canUser( 'create', {
-					kind: 'postType',
-					name: 'post',
-				} ),
-			[]
-		);
-
-		const commands = useMemo( () => {
-			if ( ! canCreatePost ) {
-				return [];
-			}
-
-			return [
-				{
-					name: 'core/add-new-post',
-					label: __( 'Add Post' ),
-					icon: plus,
-					callback: () => {
-						document.location.assign( 'post-new.php' );
-					},
-					keywords: [
-						__( 'post' ),
-						__( 'new' ),
-						__( 'add' ),
-						__( 'create' ),
-					],
-				},
-			];
-		}, [ canCreatePost ] );
-
-		return {
 			isLoading: false,
-			commands,
 		};
 	};
 
-export function useAdminNavigationCommands() {
-	useCommandLoader( {
-		name: 'core/add-new-post',
-		hook: getAddNewPostCommand(),
-	} );
-
-	useCommandLoader( {
-		name: 'core/dashboard',
-		hook: getDashboardCommand(),
-	} );
-
-	useCommandLoader( {
-		name: 'core/add-new-page',
-		hook: getAddNewPageCommand(),
-	} );
-
+export function useAdminNavigationCommands( menuCommands ) {
 	useCommandLoader( {
 		name: 'core/admin-navigation',
-		hook: getAdminBasicNavigationCommands(),
+		hook: getAdminNavigationCommands( menuCommands ),
 	} );
 }
diff --git a/packages/core-commands/src/index.js b/packages/core-commands/src/index.js
diff --git a/test/e2e/specs/site-editor/command-center.spec.js b/test/e2e/specs/site-editor/command-center.spec.js

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`https://github.com/WordPress/wordpress-develop/pull/9542`
`2`	`2`
`3`	`3`	`* https://github.com/WordPress/gutenberg/pull/71264`
	`4`	`+* https://github.com/WordPress/gutenberg/pull/71476`