feat: added keyword support & added basic keywords for post/page

packages/commands/README.md

@@ -11,6 +11,7 @@ There are two ways to register commands: static or dynamic. Both methods receive
 -   `icon`: An SVG icon
 -   `callback`: A callback function that is called when the command is selected
 -   `context`: (Optional) The context of the command
+-   `keywords`: (Optional) An array of keywords for search matching
 
 ### Static commands
 

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

@@ -50,6 +50,7 @@ function CommandMenuLoader( { name, search, hook, setLoader, close } ) {
 				<Command.Item
 					key={ command.name }
 					value={ command.searchLabel ?? command.label }
+					keywords={ command.keywords }
 					onSelect={ () => command.callback( { close } ) }
 					id={ command.name }
 				>
@@ -121,6 +122,7 @@ export function CommandMenuGroup( { isContextual, search, setLoader, close } ) {
 				<Command.Item
 					key={ command.name }
 					value={ command.searchLabel ?? command.label }
+					keywords={ command.keywords }
 					onSelect={ () => command.callback( { close } ) }
 					id={ command.name }
 				>

packages/commands/src/hooks/use-command.js

@@ -47,6 +47,7 @@ export default function useCommand( command ) {
 			label: command.label,
 			searchLabel: command.searchLabel,
 			icon: command.icon,
+			keywords: command.keywords,
 			callback: ( ...args ) => currentCallbackRef.current( ...args ),
 		} );
 		return () => {
@@ -58,6 +59,7 @@ export default function useCommand( command ) {
 		command.searchLabel,
 		command.icon,
 		command.context,
+		command.keywords,
 		command.disabled,
 		registerCommand,
 		unregisterCommand,

packages/commands/src/store/actions.js

@@ -12,6 +12,7 @@
  * @property {JSX.Element} icon        Command icon.
  * @property {Function}    callback    Command callback.
  * @property {boolean}     disabled    Whether to disable the command.
+ * @property {string[]=}   keywords    Command keywords for search matching.
  */
 
 /**

packages/commands/src/store/reducer.js

@@ -23,6 +23,7 @@ function commands( state = {}, action ) {
 					context: action.context,
 					callback: action.callback,
 					icon: action.icon,
+					keywords: action.keywords,
 				},
 			};
 		case 'UNREGISTER_COMMAND': {

packages/core-commands/src/admin-navigation-commands.js

@@ -77,6 +77,12 @@ const getAddNewPageCommand = () =>
 					label: __( 'Add new page' ),
 					icon: plus,
 					callback: addNewPage,
+					keywords: [
+						__( 'page' ),
+						__( 'new' ),
+						__( 'add' ),
+						__( 'create' ),
+					],
 				},
 			];
 		}, [ createPageEntity, isSiteEditor, isBlockBasedTheme ] );
@@ -95,6 +101,7 @@ export function useAdminNavigationCommands() {
 		callback: () => {
 			document.location.assign( 'post-new.php' );
 		},
+		keywords: [ __( 'post' ), __( 'new' ), __( 'add' ), __( 'create' ) ],
 	} );
 
 	useCommandLoader( {

test/e2e/specs/site-editor/command-center.spec.js

@@ -39,6 +39,37 @@ test.describe( 'Site editor command palette', () => {
 		).toBeVisible();
 	} );
 
+	test( 'Open the command palette and create page using "create" keyword', async ( {
+		page,
+	} ) => {
+		await page
+			.getByRole( 'button', { name: 'Open command palette' } )
+			.focus();
+		await page.keyboard.press( 'Meta+k' );
+		await page.keyboard.type( 'create page' );
+		await page.getByRole( 'option', { name: 'Add new page' } ).click();
+		await expect( page ).toHaveURL(
+			/\/wp-admin\/site-editor.php\?p=%2Fpage%2F(\d+)&canvas=edit/
+		);
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'No title · Page' } )
+		).toBeVisible();
+	} );
+
+	test( 'Open the command palette and create post using "create" keyword', async ( {
+		page,
+	} ) => {
+		await page
+			.getByRole( 'button', { name: 'Open command palette' } )
+			.focus();
+		await page.keyboard.press( 'Meta+k' );
+		await page.keyboard.type( 'create post' );
+		await page.getByRole( 'option', { name: 'Add new post' } ).click();
+		await expect( page ).toHaveURL( /\/wp-admin\/post-new\.php/ );
+	} );
+
 	test( 'Open the command palette and navigate to a template', async ( {
 		page,
 	} ) => {