Command center: Add searchLabel property to commands (#50663)

Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
WordPress · May 16, 2023 · 60984b3 · 60984b3
1 parent 0765968
commit 60984b3
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 12 deletions.
diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/src/components/command-menu.js
@@ -41,7 +41,7 @@ function CommandMenuLoader( { name, search, hook, setLoader, close } ) {
 				{ commands.map( ( command ) => (
 					<Command.Item
 						key={ command.name }
-						value={ command.name }
+						value={ command.searchLabel ?? command.label }
 						onSelect={ () => command.callback( { close } ) }
 					>
 						<HStack
@@ -110,7 +110,7 @@ export function CommandMenuGroup( { isContextual, search, setLoader, close } ) {
 			{ commands.map( ( command ) => (
 				<Command.Item
 					key={ command.name }
-					value={ command.name }
+					value={ command.searchLabel ?? command.label }
 					onSelect={ () => command.callback( { close } ) }
 				>
 					<HStack

diff --git a/packages/commands/src/hooks/use-command.js b/packages/commands/src/hooks/use-command.js
@@ -26,6 +26,7 @@ export default function useCommand( command ) {
 			name: command.name,
 			context: command.context,
 			label: command.label,
+			searchLabel: command.searchLabel,
 			icon: command.icon,
 			callback: currentCallback.current,
 		} );
@@ -35,6 +36,7 @@ export default function useCommand( command ) {
 	}, [
 		command.name,
 		command.label,
+		command.searchLabel,
 		command.icon,
 		command.context,
 		registerCommand,

diff --git a/packages/commands/src/store/actions.js b/packages/commands/src/store/actions.js
@@ -5,11 +5,12 @@
  *
  * @typedef {Object} WPCommandConfig
  *
- * @property {string}      name     Command name.
- * @property {string}      label    Command label.
- * @property {string=}     context  Command context.
- * @property {JSX.Element} icon     Command icon.
- * @property {Function}    callback Command callback.
+ * @property {string}      name        Command name.
+ * @property {string}      label       Command label.
+ * @property {string=}     searchLabel Command search label.
+ * @property {string=}     context     Command context.
+ * @property {JSX.Element} icon        Command icon.
+ * @property {Function}    callback    Command callback.
  */
 
 /**

diff --git a/packages/commands/src/store/reducer.js b/packages/commands/src/store/reducer.js
@@ -19,6 +19,7 @@ function commands( state = {}, action ) {
 				[ action.name ]: {
 					name: action.name,
 					label: action.label,
+					searchLabel: action.searchLabel,
 					context: action.context,
 					callback: action.callback,
 					icon: action.icon,

diff --git a/packages/core-commands/src/add-post-type-commands.js b/packages/core-commands/src/add-post-type-commands.js
@@ -14,15 +14,15 @@ const { useCommand } = unlock( privateApis );
 
 export function useAddPostTypeCommands() {
 	useCommand( {
-		name: 'add new post',
+		name: 'core/add-new-post',
 		label: __( 'Add new post' ),
 		icon: plus,
 		callback: () => {
 			document.location.href = 'post-new.php';
 		},
 	} );
 	useCommand( {
-		name: 'add new page',
+		name: 'core/add-new-page',
 		label: __( 'Add new page' ),
 		icon: plus,
 		callback: () => {

diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js
@@ -66,7 +66,8 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 					? { canvas: getQueryArg( window.location.href, 'canvas' ) }
 					: {};
 				return {
-					name: record.title?.rendered + ' ' + record.id,
+					name: postType + '-' + record.id,
+					searchLabel: record.title?.rendered + ' ' + record.id,
 					label: record.title?.rendered
 						? record.title?.rendered
 						: __( '(no title)' ),

diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
@@ -35,7 +35,7 @@ function useEditModeCommandLoader() {
 				? __( 'Delete template' )
 				: __( 'Delete template part' );
 		commands.push( {
-			name: label,
+			name: 'core/remove-template',
 			label,
 			icon: trash,
 			context: 'site-editor-edit',
@@ -55,7 +55,7 @@ function useEditModeCommandLoader() {
 				? __( 'Reset template' )
 				: __( 'Reset template part' );
 		commands.push( {
-			name: label,
+			name: 'core/reset-template',
 			label,
 			icon: backup,
 			callback: ( { close } ) => {