Command Center: Add an API to open/close the command center

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;
+}