Add contextual commands

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

@@ -90,17 +90,31 @@ export function CommandMenuLoaderWrapper( { hook, search, setLoader, close } ) {
 }
 
 export function CommandMenuGroup( { group, search, setLoader, close } ) {
+	const hasSearch = !! search;
 	const { commands, loaders } = useSelect(
 		( select ) => {
-			const { getCommands, getCommandLoaders } = select( commandsStore );
+			const {
+				getCommands,
+				getCommandLoaders,
+				getContextualCommands,
+				getContextualCommandLoaders,
+			} = select( commandsStore );
 			return {
-				commands: getCommands( group ),
-				loaders: getCommandLoaders( group ),
+				commands: hasSearch
+					? getCommands( group )
+					: getContextualCommands( group ),
+				loaders: hasSearch
+					? getCommandLoaders( group )
+					: getContextualCommandLoaders( group ),
 			};
 		},
-		[ group ]
+		[ group, hasSearch ]
 	);
 
+	if ( ! commands.length && ! loaders.length ) {
+		return null;
+	}
+
 	return (
 		<Command.Group>
 			{ commands.map( ( command ) => (
@@ -219,24 +233,22 @@ export function CommandMenu() {
 							placeholder={ __( 'Type a command or search' ) }
 						/>
 					</div>
-					{ search && (
-						<Command.List>
-							{ ! isLoading && (
-								<Command.Empty>
-									{ __( 'No results found.' ) }
-								</Command.Empty>
-							) }
-							{ groups.map( ( group ) => (
-								<CommandMenuGroup
-									key={ group }
-									group={ group }
-									search={ search }
-									setLoader={ setLoader }
-									close={ closeAndReset }
-								/>
-							) ) }
-						</Command.List>
-					) }
+					<Command.List>
+						{ search && ! isLoading && (
+							<Command.Empty>
+								{ __( 'No results found.' ) }
+							</Command.Empty>
+						) }
+						{ groups.map( ( group ) => (
+							<CommandMenuGroup
+								key={ group }
+								group={ group }
+								search={ search }
+								setLoader={ setLoader }
+								close={ closeAndReset }
+							/>
+						) ) }
+					</Command.List>
 				</Command>
 			</div>
 		</Modal>

packages/commands/src/components/style.scss

@@ -93,7 +93,15 @@
 	[cmdk-root] > [cmdk-list] {
 		max-height: 400px;
 		overflow: auto;
-		padding: $grid-unit;
+
+		& > [cmdk-list-sizer] {
+			padding: $grid-unit;
+
+			// Hides the padding in empty contexts.
+			&:empty {
+				display: none;
+			}
+		}
 	}
 
 	[cmdk-empty] {

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

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as commandsStore } from '../store';
+
+/**
+ * Sets the active context of the command center
+ *
+ * @param {string} context Context to set.
+ */
+export default function useCommandContext( context ) {
+	const { getContext } = useSelect( commandsStore );
+	const initialContext = useRef( getContext() );
+	const { setContext } = useDispatch( commandsStore );
+
+	useEffect( () => {
+		setContext( context );
+	}, [ context, setContext ] );
+
+	// This effects ensures that on unmount, we restore the context
+	// that was set before the component actually mounts.
+	useEffect( () => {
+		const initialContextRef = initialContext.current;
+		return () => setContext( initialContextRef );
+	}, [ setContext ] );
+}

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

@@ -14,17 +14,25 @@ import { store as commandsStore } from '../store';
  *
  * @param {import('../store/actions').WPCommandLoaderConfig} loader command loader config.
  */
-export default function useCommandLoader( { name, group, hook } ) {
+export default function useCommandLoader( loader ) {
 	const { registerCommandLoader, unregisterCommandLoader } =
 		useDispatch( commandsStore );
 	useEffect( () => {
 		registerCommandLoader( {
-			name,
-			group,
-			hook,
+			name: loader.name,
+			group: loader.group,
+			hook: loader.hook,
+			context: loader.context,
 		} );
 		return () => {
-			unregisterCommandLoader( name, group );
+			unregisterCommandLoader( loader.name, loader.group );
 		};
-	}, [ name, group, hook, registerCommandLoader, unregisterCommandLoader ] );
+	}, [
+		loader.name,
+		loader.group,
+		loader.hook,
+		loader.context,
+		registerCommandLoader,
+		unregisterCommandLoader,
+	] );
 }

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

@@ -25,6 +25,7 @@ export default function useCommand( command ) {
 		registerCommand( {
 			name: command.name,
 			group: command.group,
+			context: command.context,
 			label: command.label,
 			icon: command.icon,
 			callback: currentCallback.current,
@@ -37,6 +38,7 @@ export default function useCommand( command ) {
 		command.label,
 		command.group,
 		command.icon,
+		command.context,
 		registerCommand,
 		unregisterCommand,
 	] );

packages/commands/src/private-apis.js

@@ -8,6 +8,7 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
  */
 import { default as useCommand } from './hooks/use-command';
 import { default as useCommandLoader } from './hooks/use-command-loader';
+import { default as useCommandContext } from './hooks/use-command-context';
 import { store } from './store';
 
 export const { lock, unlock } =
@@ -20,5 +21,6 @@ export const privateApis = {};
 lock( privateApis, {
 	useCommand,
 	useCommandLoader,
+	useCommandContext,
 	store,
 } );

packages/commands/src/store/actions.js

@@ -8,6 +8,7 @@
  * @property {string}      name     Command name.
  * @property {string}      label    Command label.
  * @property {string=}     group    Command group.
+ * @property {string=}     context  Command context.
  * @property {JSX.Element} icon     Command icon.
  * @property {Function}    callback Command callback.
  */
@@ -21,9 +22,10 @@
  *
  * @typedef {Object} WPCommandLoaderConfig
  *
- * @property {string}              name  Command loader name.
- * @property {string=}             group Command loader group.
- * @property {WPCommandLoaderHook} hook  Command loader hook.
+ * @property {string}              name    Command loader name.
+ * @property {string=}             group   Command loader group.
+ * @property {string=}             context Command loader context.
+ * @property {WPCommandLoaderHook} hook    Command loader hook.
  */
 
 /**
@@ -33,14 +35,11 @@
  *
  * @return {Object} action.
  */
-export function registerCommand( { name, label, icon, callback, group = '' } ) {
+export function registerCommand( config ) {
 	return {
 		type: 'REGISTER_COMMAND',
-		name,
-		label,
-		icon,
-		callback,
-		group,
+		...config,
+		group: config.group ?? '',
 	};
 }
 
@@ -67,12 +66,11 @@ export function unregisterCommand( name, group ) {
  *
  * @return {Object} action.
  */
-export function registerCommandLoader( { name, group = '', hook } ) {
+export function registerCommandLoader( config ) {
 	return {
 		type: 'REGISTER_COMMAND_LOADER',
-		name,
-		group,
-		hook,
+		...config,
+		group: config.group ?? '',
 	};
 }
 
@@ -113,3 +111,17 @@ export function close() {
 		type: 'CLOSE',
 	};
 }
+
+/**
+ * Sets the active context.
+ *
+ * @param {string} context Context.
+ *
+ * @return {Object} action.
+ */
+export function setContext( context ) {
+	return {
+		type: 'SET_CONTEXT',
+		context,
+	};
+}

packages/commands/src/store/reducer.js

@@ -22,6 +22,7 @@ function commands( state = {}, action ) {
 						name: action.name,
 						label: action.label,
 						group: action.group,
+						context: action.context,
 						callback: action.callback,
 						icon: action.icon,
 					},
@@ -57,6 +58,7 @@ function commandLoaders( state = {}, action ) {
 					...state[ action.group ],
 					[ action.name ]: {
 						name: action.name,
+						context: action.context,
 						hook: action.hook,
 					},
 				},
@@ -93,10 +95,28 @@ function isOpen( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning the command center's active context.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+function context( state = 'root', action ) {
+	switch ( action.type ) {
+		case 'SET_CONTEXT':
+			return action.context;
+	}
+
+	return state;
+}
+
 const reducer = combineReducers( {
 	commands,
 	commandLoaders,
 	isOpen,
+	context,
 } );
 
 export default reducer;

packages/commands/src/store/selectors.js

@@ -32,3 +32,25 @@ export const getCommandLoaders = createSelector(
 export function isOpen( state ) {
 	return state.isOpen;
 }
+
+export function getContext( state ) {
+	return state.context;
+}
+
+export const getContextualCommands = createSelector(
+	( state, group ) => {
+		return getCommands( state, group ).filter(
+			( command ) => command.context === state.context
+		);
+	},
+	( state, group ) => [ state.commands[ group ], state.context ]
+);
+
+export const getContextualCommandLoaders = createSelector(
+	( state, group ) => {
+		return getCommandLoaders( state, group ).filter(
+			( loader ) => loader.context === state.context
+		);
+	},
+	( state, group ) => [ state.commandLoaders[ group ], state.context ]
+);

packages/core-commands/src/site-editor-navigation-commands.js

@@ -31,29 +31,31 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 		const supportsSearch = ! [ 'wp_template', 'wp_template_part' ].includes(
 			postType
 		);
-		const deps = supportsSearch ? [ search ] : [];
-		const { records, isLoading } = useSelect( ( select ) => {
-			const { getEntityRecords } = select( coreStore );
-			const query = supportsSearch
-				? {
-						search: !! search ? search : undefined,
-						per_page: 10,
-						orderby: search ? 'relevance' : 'date',
-				  }
-				: {
-						per_page: -1,
-				  };
-			return {
-				records: getEntityRecords( 'postType', postType, query ),
-				isLoading: ! select( coreStore ).hasFinishedResolution(
-					'getEntityRecords',
-					[ 'postType', postType, query ]
-				),
-				// We're using the string literal to check whether we're in the site editor.
-				/* eslint-disable-next-line @wordpress/data-no-store-string-literals */
-				isSiteEditor: !! select( 'edit-site' ),
-			};
-		}, deps );
+		const { records, isLoading } = useSelect(
+			( select ) => {
+				const { getEntityRecords } = select( coreStore );
+				const query = supportsSearch
+					? {
+							search: !! search ? search : undefined,
+							per_page: 10,
+							orderby: search ? 'relevance' : 'date',
+					  }
+					: {
+							per_page: -1,
+					  };
+				return {
+					records: getEntityRecords( 'postType', postType, query ),
+					isLoading: ! select( coreStore ).hasFinishedResolution(
+						'getEntityRecords',
+						[ 'postType', postType, query ]
+					),
+					// We're using the string literal to check whether we're in the site editor.
+					/* eslint-disable-next-line @wordpress/data-no-store-string-literals */
+					isSiteEditor: !! select( 'edit-site' ),
+				};
+			},
+			[ supportsSearch, search ]
+		);
 
 		const commands = useMemo( () => {
 			return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {