Command Center: Add an API to open/close the command center (#50423)

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

@@ -139,13 +139,14 @@ export function CommandMenuGroup( { group, search, setLoader, close } ) {
 export function CommandMenu() {
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	const [ search, setSearch ] = useState( '' );
-	const [ open, setOpen ] = useState( false );
-	const { groups } = useSelect( ( select ) => {
-		const { getGroups } = select( commandsStore );
+	const { groups, isOpen } = useSelect( ( select ) => {
+		const { getGroups, isOpen: _isOpen } = select( commandsStore );
 		return {
 			groups: getGroups(),
+			isOpen: _isOpen(),
 		};
 	}, [] );
+	const { open, close } = useDispatch( commandsStore );
 	const [ loaders, setLoaders ] = useState( {} );
 	const commandMenuInput = useRef();
 
@@ -165,7 +166,11 @@ export function CommandMenu() {
 		'core/commands',
 		( event ) => {
 			event.preventDefault();
-			setOpen( ( prevOpen ) => ! prevOpen );
+			if ( isOpen ) {
+				close();
+			} else {
+				open();
+			}
 		},
 		{
 			bindGlobal: true,
@@ -180,19 +185,19 @@ export function CommandMenu() {
 			} ) ),
 		[]
 	);
-	const close = () => {
+	const closeAndReset = () => {
 		setSearch( '' );
-		setOpen( false );
+		close();
 	};
 
 	useEffect( () => {
 		// Focus the command menu input when mounting the modal.
-		if ( open ) {
+		if ( isOpen ) {
 			commandMenuInput.current.focus();
 		}
-	}, [ open ] );
+	}, [ isOpen ] );
 
-	if ( ! open ) {
+	if ( ! isOpen ) {
 		return false;
 	}
 	const isLoading = Object.values( loaders ).some( Boolean );
@@ -201,7 +206,7 @@ export function CommandMenu() {
 		<Modal
 			className="commands-command-menu"
 			overlayClassName="commands-command-menu__overlay"
-			onRequestClose={ close }
+			onRequestClose={ closeAndReset }
 			__experimentalHideHeader
 		>
 			<div className="commands-command-menu__container">
@@ -227,7 +232,7 @@ export function CommandMenu() {
 									group={ group }
 									search={ search }
 									setLoader={ setLoader }
-									close={ close }
+									close={ closeAndReset }
 								/>
 							) ) }
 						</Command.List>

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 { store } from './store';
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -19,4 +20,5 @@ export const privateApis = {};
 lock( privateApis, {
 	useCommand,
 	useCommandLoader,
+	store,
 } );

packages/commands/src/store/actions.js

@@ -91,3 +91,25 @@ export function unregisterCommandLoader( name, group ) {
 		group,
 	};
 }
+
+/**
+ * Opens the command center.
+ *
+ * @return {Object} action.
+ */
+export function open() {
+	return {
+		type: 'OPEN',
+	};
+}
+
+/**
+ * Closes the command center.
+ *
+ * @return {Object} action.
+ */
+export function close() {
+	return {
+		type: 'CLOSE',
+	};
+}

packages/commands/src/store/reducer.js

@@ -74,9 +74,29 @@ function commandLoaders( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning the command center open state.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+function isOpen( state = false, action ) {
+	switch ( action.type ) {
+		case 'OPEN':
+			return true;
+		case 'CLOSE':
+			return false;
+	}
+
+	return state;
+}
+
 const reducer = combineReducers( {
 	commands,
 	commandLoaders,
+	isOpen,
 } );
 
 export default reducer;

packages/commands/src/store/selectors.js

@@ -18,6 +18,7 @@ export const getGroups = createSelector(
 		),
 	( state ) => [ state.commands, state.commandLoaders ]
 );
+
 export const getCommands = createSelector(
 	( state, group ) => Object.values( state.commands[ group ] ?? {} ),
 	( state, group ) => [ state.commands[ group ] ]
@@ -27,3 +28,7 @@ export const getCommandLoaders = createSelector(
 	( state, group ) => Object.values( state.commandLoaders[ group ] ?? {} ),
 	( state, group ) => [ state.commandLoaders[ group ] ]
 );
+
+export function isOpen( state ) {
+	return state.isOpen;
+}