@wordpress/commands 0.4.0 → 0.6.0

package/build-module/store/selectors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/commands/src/store/selectors.js"],"names":["createSelector","unique","array","filter","value","index","current","indexOf","getGroups","state","Object","keys","commands","concat","commandLoaders","getCommands","group","values","getCommandLoaders","isOpen"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,cAAP,MAA2B,QAA3B;;AAEA,SAASC,MAAT,CAAiBC,KAAjB,EAAyB;AACxB,SAAOA,KAAK,CAACC,MAAN,CACN,CAAEC,KAAF,EAASC,KAAT,EAAgBC,OAAhB,KAA6BA,OAAO,CAACC,OAAR,CAAiBH,KAAjB,MAA6BC,KADpD,CAAP;AAGA;;AAED,OAAO,MAAMG,SAAS,GAAGR,cAAc,CACpCS,KAAF,IACCR,MAAM,CACLS,MAAM,CAACC,IAAP,CAAaF,KAAK,CAACG,QAAnB,EAA8BC,MAA9B,CACCH,MAAM,CAACC,IAAP,CAAaF,KAAK,CAACK,cAAnB,CADD,CADK,CAF+B,EAOpCL,KAAF,IAAa,CAAEA,KAAK,CAACG,QAAR,EAAkBH,KAAK,CAACK,cAAxB,CAPyB,CAAhC;AAUP,OAAO,MAAMC,WAAW,GAAGf,cAAc,CACxC,CAAES,KAAF,EAASO,KAAT;AAAA;;AAAA,SAAoBN,MAAM,CAACO,MAAP,0BAAeR,KAAK,CAACG,QAAN,CAAgBI,KAAhB,CAAf,yEAA0C,EAA1C,CAApB;AAAA,CADwC,EAExC,CAAEP,KAAF,EAASO,KAAT,KAAoB,CAAEP,KAAK,CAACG,QAAN,CAAgBI,KAAhB,CAAF,CAFoB,CAAlC;AAKP,OAAO,MAAME,iBAAiB,GAAGlB,cAAc,CAC9C,CAAES,KAAF,EAASO,KAAT;AAAA;;AAAA,SAAoBN,MAAM,CAACO,MAAP,0BAAeR,KAAK,CAACK,cAAN,CAAsBE,KAAtB,CAAf,yEAAgD,EAAhD,CAApB;AAAA,CAD8C,EAE9C,CAAEP,KAAF,EAASO,KAAT,KAAoB,CAAEP,KAAK,CAACK,cAAN,CAAsBE,KAAtB,CAAF,CAF0B,CAAxC;AAKP,OAAO,SAASG,MAAT,CAAiBV,KAAjB,EAAyB;AAC/B,SAAOA,KAAK,CAACU,MAAb;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport createSelector from 'rememo';\n\nfunction unique( array ) {\n\treturn array.filter(\n\t\t( value, index, current ) => current.indexOf( value ) === index\n\t);\n}\n\nexport const getGroups = createSelector(\n\t( state ) =>\n\t\tunique(\n\t\t\tObject.keys( state.commands ).concat(\n\t\t\t\tObject.keys( state.commandLoaders )\n\t\t\t)\n\t\t),\n\t( state ) => [ state.commands, state.commandLoaders ]\n);\n\nexport const getCommands = createSelector(\n\t( state, group ) => Object.values( state.commands[ group ] ?? {} ),\n\t( state, group ) => [ state.commands[ group ] ]\n);\n\nexport const getCommandLoaders = createSelector(\n\t( state, group ) => Object.values( state.commandLoaders[ group ] ?? {} ),\n\t( state, group ) => [ state.commandLoaders[ group ] ]\n);\n\nexport function isOpen( state ) {\n\treturn state.isOpen;\n}\n"]}
+{"version":3,"sources":["@wordpress/commands/src/store/selectors.js"],"names":["createSelector","getCommands","state","contextual","Object","values","commands","filter","command","isContextual","context","getCommandLoaders","commandLoaders","loader","isOpen","getContext"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,cAAP,MAA2B,QAA3B;AAEA,OAAO,MAAMC,WAAW,GAAGD,cAAc,CACxC,CAAEE,KAAF,EAASC,UAAU,GAAG,KAAtB,KACCC,MAAM,CAACC,MAAP,CAAeH,KAAK,CAACI,QAArB,EAAgCC,MAAhC,CAA0CC,OAAF,IAAe;AACtD,QAAMC,YAAY,GACjBD,OAAO,CAACE,OAAR,IAAmBF,OAAO,CAACE,OAAR,KAAoBR,KAAK,CAACQ,OAD9C;AAEA,SAAOP,UAAU,GAAGM,YAAH,GAAkB,CAAEA,YAArC;AACA,CAJD,CAFuC,EAOtCP,KAAF,IAAa,CAAEA,KAAK,CAACI,QAAR,EAAkBJ,KAAK,CAACQ,OAAxB,CAP2B,CAAlC;AAUP,OAAO,MAAMC,iBAAiB,GAAGX,cAAc,CAC9C,CAAEE,KAAF,EAASC,UAAU,GAAG,KAAtB,KACCC,MAAM,CAACC,MAAP,CAAeH,KAAK,CAACU,cAArB,EAAsCL,MAAtC,CAAgDM,MAAF,IAAc;AAC3D,QAAMJ,YAAY,GACjBI,MAAM,CAACH,OAAP,IAAkBG,MAAM,CAACH,OAAP,KAAmBR,KAAK,CAACQ,OAD5C;AAEA,SAAOP,UAAU,GAAGM,YAAH,GAAkB,CAAEA,YAArC;AACA,CAJD,CAF6C,EAO5CP,KAAF,IAAa,CAAEA,KAAK,CAACU,cAAR,EAAwBV,KAAK,CAACQ,OAA9B,CAPiC,CAAxC;AAUP,OAAO,SAASI,MAAT,CAAiBZ,KAAjB,EAAyB;AAC/B,SAAOA,KAAK,CAACY,MAAb;AACA;AAED,OAAO,SAASC,UAAT,CAAqBb,KAArB,EAA6B;AACnC,SAAOA,KAAK,CAACQ,OAAb;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport createSelector from 'rememo';\n\nexport const getCommands = createSelector(\n\t( state, contextual = false ) =>\n\t\tObject.values( state.commands ).filter( ( command ) => {\n\t\t\tconst isContextual =\n\t\t\t\tcommand.context && command.context === state.context;\n\t\t\treturn contextual ? isContextual : ! isContextual;\n\t\t} ),\n\t( state ) => [ state.commands, state.context ]\n);\n\nexport const getCommandLoaders = createSelector(\n\t( state, contextual = false ) =>\n\t\tObject.values( state.commandLoaders ).filter( ( loader ) => {\n\t\t\tconst isContextual =\n\t\t\t\tloader.context && loader.context === state.context;\n\t\t\treturn contextual ? isContextual : ! isContextual;\n\t\t} ),\n\t( state ) => [ state.commandLoaders, state.context ]\n);\n\nexport function isOpen( state ) {\n\treturn state.isOpen;\n}\n\nexport function getContext( state ) {\n\treturn state.context;\n}\n"]}

package/build-style/style-rtl.css

@@ -97,7 +97,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -184,6 +184,8 @@
 .commands-command-menu__container [cmdk-root] > [cmdk-list] {
   max-height: 400px;
   overflow: auto;
+}
+.commands-command-menu__container [cmdk-root] > [cmdk-list] > [cmdk-list-sizer] :has([cmdk-group-items]:not(:empty)) {
   padding: 8px;
 }
 .commands-command-menu__container [cmdk-empty] {
@@ -200,6 +202,9 @@
 .commands-command-menu__container [cmdk-list-sizer] {
   position: relative;
 }
+.commands-command-menu__container [cmdk-group]:has([cmdk-group-items]:not(:empty)) + [cmdk-group]:has([cmdk-group-items]:not(:empty)) {
+  border-top: 1px solid #e0e0e0;
+}
 
 .commands-command-menu__item mark {
   color: inherit;

package/build-style/style.css

@@ -97,7 +97,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -184,6 +184,8 @@
 .commands-command-menu__container [cmdk-root] > [cmdk-list] {
   max-height: 400px;
   overflow: auto;
+}
+.commands-command-menu__container [cmdk-root] > [cmdk-list] > [cmdk-list-sizer] :has([cmdk-group-items]:not(:empty)) {
   padding: 8px;
 }
 .commands-command-menu__container [cmdk-empty] {
@@ -200,6 +202,9 @@
 .commands-command-menu__container [cmdk-list-sizer] {
   position: relative;
 }
+.commands-command-menu__container [cmdk-group]:has([cmdk-group-items]:not(:empty)) + [cmdk-group]:has([cmdk-group-items]:not(:empty)) {
+  border-top: 1px solid #e0e0e0;
+}
 
 .commands-command-menu__item mark {
   color: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/commands",
-	"version": "0.4.0",
+	"version": "0.6.0",
 	"description": "Handles the commands menu.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,13 +27,13 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/components": "^24.0.0",
-		"@wordpress/data": "^9.3.0",
-		"@wordpress/element": "^5.10.0",
-		"@wordpress/i18n": "^4.33.0",
-		"@wordpress/icons": "^9.24.0",
-		"@wordpress/keyboard-shortcuts": "^4.10.0",
-		"@wordpress/private-apis": "^0.15.0",
+		"@wordpress/components": "^25.1.0",
+		"@wordpress/data": "^9.5.0",
+		"@wordpress/element": "^5.12.0",
+		"@wordpress/i18n": "^4.35.0",
+		"@wordpress/icons": "^9.26.0",
+		"@wordpress/keyboard-shortcuts": "^4.12.0",
+		"@wordpress/private-apis": "^0.17.0",
 		"cmdk": "^0.2.0",
 		"rememo": "^4.0.2"
 	},
@@ -43,5 +43,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
+	"gitHead": "a92f606309b1541b834ff9b0a76ed2a466fc45ed"
 }

package/src/components/command-menu.js

@@ -31,17 +31,17 @@ function CommandMenuLoader( { name, search, hook, setLoader, close } ) {
 		setLoader( name, isLoading );
 	}, [ setLoader, name, isLoading ] );
 
+	if ( ! commands.length ) {
+		return null;
+	}
+
 	return (
 		<>
 			<Command.List>
-				{ isLoading && (
-					<Command.Loading>{ __( 'Searching…' ) }</Command.Loading>
-				) }
-
 				{ commands.map( ( command ) => (
 					<Command.Item
 						key={ command.name }
-						value={ command.name }
+						value={ command.searchLabel ?? command.label }
 						onSelect={ () => command.callback( { close } ) }
 					>
 						<HStack
@@ -89,24 +89,28 @@ export function CommandMenuLoaderWrapper( { hook, search, setLoader, close } ) {
 	);
 }
 
-export function CommandMenuGroup( { group, search, setLoader, close } ) {
+export function CommandMenuGroup( { isContextual, search, setLoader, close } ) {
 	const { commands, loaders } = useSelect(
 		( select ) => {
 			const { getCommands, getCommandLoaders } = select( commandsStore );
 			return {
-				commands: getCommands( group ),
-				loaders: getCommandLoaders( group ),
+				commands: getCommands( isContextual ),
+				loaders: getCommandLoaders( isContextual ),
 			};
 		},
-		[ group ]
+		[ isContextual ]
 	);
 
+	if ( ! commands.length && ! loaders.length ) {
+		return null;
+	}
+
 	return (
 		<Command.Group>
 			{ commands.map( ( command ) => (
 				<Command.Item
 					key={ command.name }
-					value={ command.name }
+					value={ command.searchLabel ?? command.label }
 					onSelect={ () => command.callback( { close } ) }
 				>
 					<HStack
@@ -139,13 +143,10 @@ export function CommandMenuGroup( { group, search, setLoader, close } ) {
 export function CommandMenu() {
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	const [ search, setSearch ] = useState( '' );
-	const { groups, isOpen } = useSelect( ( select ) => {
-		const { getGroups, isOpen: _isOpen } = select( commandsStore );
-		return {
-			groups: getGroups(),
-			isOpen: _isOpen(),
-		};
-	}, [] );
+	const isOpen = useSelect(
+		( select ) => select( commandsStore ).isOpen(),
+		[]
+	);
 	const { open, close } = useDispatch( commandsStore );
 	const [ loaders, setLoaders ] = useState( {} );
 	const commandMenuInput = useRef();
@@ -219,24 +220,26 @@ 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>
+						) }
+						<CommandMenuGroup
+							search={ search }
+							setLoader={ setLoader }
+							close={ closeAndReset }
+							isContextual
+						/>
+						{ search && (
+							<CommandMenuGroup
+								search={ search }
+								setLoader={ setLoader }
+								close={ closeAndReset }
+							/>
+						) }
+					</Command.List>
 				</Command>
 			</div>
 		</Modal>

package/src/components/style.scss

@@ -93,7 +93,10 @@
 	[cmdk-root] > [cmdk-list] {
 		max-height: 400px;
 		overflow: auto;
-		padding: $grid-unit;
+
+		& > [cmdk-list-sizer] :has([cmdk-group-items]:not(:empty)) {
+			padding: $grid-unit;
+		}
 	}
 
 	[cmdk-empty] {
@@ -112,6 +115,10 @@
 	[cmdk-list-sizer] {
 		position: relative;
 	}
+
+	[cmdk-group]:has([cmdk-group-items]:not(:empty)) + [cmdk-group]:has([cmdk-group-items]:not(:empty)) {
+		border-top: 1px solid $gray-200;
+	}
 }
 
 .commands-command-menu__item mark {

package/src/hooks/use-command-context.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as commandsStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+/**
+ * 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 } = unlock( 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 ] );
+}

package/src/hooks/use-command-loader.js

@@ -14,17 +14,23 @@ 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,
+			hook: loader.hook,
+			context: loader.context,
 		} );
 		return () => {
-			unregisterCommandLoader( name, group );
+			unregisterCommandLoader( loader.name );
 		};
-	}, [ name, group, hook, registerCommandLoader, unregisterCommandLoader ] );
+	}, [
+		loader.name,
+		loader.hook,
+		loader.context,
+		registerCommandLoader,
+		unregisterCommandLoader,
+	] );
 }

package/src/hooks/use-command.js

@@ -24,19 +24,21 @@ export default function useCommand( command ) {
 	useEffect( () => {
 		registerCommand( {
 			name: command.name,
-			group: command.group,
+			context: command.context,
 			label: command.label,
+			searchLabel: command.searchLabel,
 			icon: command.icon,
 			callback: currentCallback.current,
 		} );
 		return () => {
-			unregisterCommand( command.name, command.group );
+			unregisterCommand( command.name );
 		};
 	}, [
 		command.name,
 		command.label,
-		command.group,
+		command.searchLabel,
 		command.icon,
+		command.context,
 		registerCommand,
 		unregisterCommand,
 	] );

package/src/index.js

@@ -1,2 +1,5 @@
 export { CommandMenu } from './components/command-menu';
 export { privateApis } from './private-apis';
+export { default as useCommand } from './hooks/use-command';
+export { default as useCommandLoader } from './hooks/use-command-loader';
+export { store } from './store';

package/src/lock-unlock.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'@wordpress/commands'
+	);

package/src/private-apis.js

@@ -1,24 +1,10 @@
-/**
- * WordPress dependencies
- */
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
-
 /**
  * Internal dependencies
  */
-import { default as useCommand } from './hooks/use-command';
-import { default as useCommandLoader } from './hooks/use-command-loader';
-import { store } from './store';
-
-export const { lock, unlock } =
-	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
-		'@wordpress/commands'
-	);
+import { default as useCommandContext } from './hooks/use-command-context';
+import { lock } from './lock-unlock';
 
 export const privateApis = {};
 lock( privateApis, {
-	useCommand,
-	useCommandLoader,
-	store,
+	useCommandContext,
 } );

package/src/store/actions.js

@@ -5,11 +5,12 @@
  *
  * @typedef {Object} WPCommandConfig
  *
- * @property {string}      name     Command name.
- * @property {string}      label    Command label.
- * @property {string=}     group    Command group.
- * @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.
  */
 
 /**
@@ -21,9 +22,9 @@
  *
  * @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=}             context Command loader context.
+ * @property {WPCommandLoaderHook} hook    Command loader hook.
  */
 
 /**
@@ -33,30 +34,24 @@
  *
  * @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,
 	};
 }
 
 /**
  * Returns an action object used to unregister a command.
  *
- * @param {string} name  Command name.
- * @param {string} group Command group.
+ * @param {string} name Command name.
  *
  * @return {Object} action.
  */
-export function unregisterCommand( name, group ) {
+export function unregisterCommand( name ) {
 	return {
 		type: 'UNREGISTER_COMMAND',
 		name,
-		group,
 	};
 }
 
@@ -67,28 +62,24 @@ 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,
 	};
 }
 
 /**
  * Unregister command loader hook.
  *
- * @param {string} name  Command loader name.
- * @param {string} group Command loader group.
+ * @param {string} name Command loader name.
  *
  * @return {Object} action.
  */
-export function unregisterCommandLoader( name, group ) {
+export function unregisterCommandLoader( name ) {
 	return {
 		type: 'UNREGISTER_COMMAND_LOADER',
 		name,
-		group,
 	};
 }
 

package/src/store/index.js

@@ -9,6 +9,8 @@ import { createReduxStore, register } from '@wordpress/data';
 import reducer from './reducer';
 import * as actions from './actions';
 import * as selectors from './selectors';
+import * as privateActions from './private-actions';
+import { unlock } from '../lock-unlock';
 
 const STORE_NAME = 'core/commands';
 
@@ -26,3 +28,4 @@ export const store = createReduxStore( STORE_NAME, {
 } );
 
 register( store );
+unlock( store ).registerPrivateActions( privateActions );

package/src/store/private-actions.js

@@ -0,0 +1,13 @@
+/**
+ * Sets the active context.
+ *
+ * @param {string} context Context.
+ *
+ * @return {Object} action.
+ */
+export function setContext( context ) {
+	return {
+		type: 'SET_CONTEXT',
+		context,
+	};
+}

package/src/store/reducer.js

@@ -16,24 +16,18 @@ function commands( state = {}, action ) {
 		case 'REGISTER_COMMAND':
 			return {
 				...state,
-				[ action.group ]: {
-					...state[ action.group ],
-					[ action.name ]: {
-						name: action.name,
-						label: action.label,
-						group: action.group,
-						callback: action.callback,
-						icon: action.icon,
-					},
+				[ action.name ]: {
+					name: action.name,
+					label: action.label,
+					searchLabel: action.searchLabel,
+					context: action.context,
+					callback: action.callback,
+					icon: action.icon,
 				},
 			};
 		case 'UNREGISTER_COMMAND': {
-			const { [ action.name ]: _, ...remainingState } =
-				state?.[ action.group ];
-			return {
-				...state,
-				[ action.group ]: remainingState,
-			};
+			const { [ action.name ]: _, ...remainingState } = state;
+			return remainingState;
 		}
 	}
 
@@ -53,21 +47,15 @@ function commandLoaders( state = {}, action ) {
 		case 'REGISTER_COMMAND_LOADER':
 			return {
 				...state,
-				[ action.group ]: {
-					...state[ action.group ],
-					[ action.name ]: {
-						name: action.name,
-						hook: action.hook,
-					},
+				[ action.name ]: {
+					name: action.name,
+					context: action.context,
+					hook: action.hook,
 				},
 			};
 		case 'UNREGISTER_COMMAND_LOADER': {
-			const { [ action.name ]: _, ...remainingState } =
-				state?.[ action.group ];
-			return {
-				...state,
-				[ action.group ]: remainingState,
-			};
+			const { [ action.name ]: _, ...remainingState } = state;
+			return remainingState;
 		}
 	}
 
@@ -93,10 +81,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;

package/src/store/selectors.js

@@ -3,32 +3,30 @@
  */
 import createSelector from 'rememo';
 
-function unique( array ) {
-	return array.filter(
-		( value, index, current ) => current.indexOf( value ) === index
-	);
-}
-
-export const getGroups = createSelector(
-	( state ) =>
-		unique(
-			Object.keys( state.commands ).concat(
-				Object.keys( state.commandLoaders )
-			)
-		),
-	( state ) => [ state.commands, state.commandLoaders ]
-);
-
 export const getCommands = createSelector(
-	( state, group ) => Object.values( state.commands[ group ] ?? {} ),
-	( state, group ) => [ state.commands[ group ] ]
+	( state, contextual = false ) =>
+		Object.values( state.commands ).filter( ( command ) => {
+			const isContextual =
+				command.context && command.context === state.context;
+			return contextual ? isContextual : ! isContextual;
+		} ),
+	( state ) => [ state.commands, state.context ]
 );
 
 export const getCommandLoaders = createSelector(
-	( state, group ) => Object.values( state.commandLoaders[ group ] ?? {} ),
-	( state, group ) => [ state.commandLoaders[ group ] ]
+	( state, contextual = false ) =>
+		Object.values( state.commandLoaders ).filter( ( loader ) => {
+			const isContextual =
+				loader.context && loader.context === state.context;
+			return contextual ? isContextual : ! isContextual;
+		} ),
+	( state ) => [ state.commandLoaders, state.context ]
 );
 
 export function isOpen( state ) {
 	return state.isOpen;
 }
+
+export function getContext( state ) {
+	return state.context;
+}