@wordpress/commands 0.4.0 → 0.5.0

package/build-module/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,37 +34,24 @@
  *
  * @return {Object} action.
  */
-export function registerCommand(_ref) {
-  let {
-    name,
-    label,
-    icon,
-    callback,
-    group = ''
-  } = _ref;
+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
+    name
   };
 }
 /**
@@ -74,33 +62,24 @@ export function unregisterCommand(name, group) {
  * @return {Object} action.
  */
 
-export function registerCommandLoader(_ref2) {
-  let {
-    name,
-    group = '',
-    hook
-  } = _ref2;
+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
+    name
   };
 }
 /**
@@ -125,4 +104,18 @@ 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
+  };
+}
 //# sourceMappingURL=actions.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/commands/src/store/actions.js"],"names":["registerCommand","name","label","icon","callback","group","type","unregisterCommand","registerCommandLoader","hook","unregisterCommandLoader","open","close"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,eAAT,OAAwE;AAAA,MAA9C;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,IAAf;AAAqBC,IAAAA,QAArB;AAA+BC,IAAAA,KAAK,GAAG;AAAvC,GAA8C;AAC9E,SAAO;AACNC,IAAAA,IAAI,EAAE,kBADA;AAENL,IAAAA,IAFM;AAGNC,IAAAA,KAHM;AAINC,IAAAA,IAJM;AAKNC,IAAAA,QALM;AAMNC,IAAAA;AANM,GAAP;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASE,iBAAT,CAA4BN,IAA5B,EAAkCI,KAAlC,EAA0C;AAChD,SAAO;AACNC,IAAAA,IAAI,EAAE,oBADA;AAENL,IAAAA,IAFM;AAGNI,IAAAA;AAHM,GAAP;AAKA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASG,qBAAT,QAA6D;AAAA,MAA7B;AAAEP,IAAAA,IAAF;AAAQI,IAAAA,KAAK,GAAG,EAAhB;AAAoBI,IAAAA;AAApB,GAA6B;AACnE,SAAO;AACNH,IAAAA,IAAI,EAAE,yBADA;AAENL,IAAAA,IAFM;AAGNI,IAAAA,KAHM;AAINI,IAAAA;AAJM,GAAP;AAMA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,uBAAT,CAAkCT,IAAlC,EAAwCI,KAAxC,EAAgD;AACtD,SAAO;AACNC,IAAAA,IAAI,EAAE,2BADA;AAENL,IAAAA,IAFM;AAGNI,IAAAA;AAHM,GAAP;AAKA;AAED;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASM,IAAT,GAAgB;AACtB,SAAO;AACNL,IAAAA,IAAI,EAAE;AADA,GAAP;AAGA;AAED;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASM,KAAT,GAAiB;AACvB,SAAO;AACNN,IAAAA,IAAI,EAAE;AADA,GAAP;AAGA","sourcesContent":["/** @typedef {import('@wordpress/keycodes').WPKeycodeModifier} WPKeycodeModifier */\n\n/**\n * Configuration of a registered keyboard shortcut.\n *\n * @typedef {Object} WPCommandConfig\n *\n * @property {string}      name     Command name.\n * @property {string}      label    Command label.\n * @property {string=}     group    Command group.\n * @property {JSX.Element} icon     Command icon.\n * @property {Function}    callback Command callback.\n */\n\n/**\n * @typedef {(search: string) => WPCommandConfig[]} WPCommandLoaderHook hoo\n */\n\n/**\n * Command loader config.\n *\n * @typedef {Object} WPCommandLoaderConfig\n *\n * @property {string}              name  Command loader name.\n * @property {string=}             group Command loader group.\n * @property {WPCommandLoaderHook} hook  Command loader hook.\n */\n\n/**\n * Returns an action object used to register a new command.\n *\n * @param {WPCommandConfig} config Command config.\n *\n * @return {Object} action.\n */\nexport function registerCommand( { name, label, icon, callback, group = '' } ) {\n\treturn {\n\t\ttype: 'REGISTER_COMMAND',\n\t\tname,\n\t\tlabel,\n\t\ticon,\n\t\tcallback,\n\t\tgroup,\n\t};\n}\n\n/**\n * Returns an action object used to unregister a command.\n *\n * @param {string} name  Command name.\n * @param {string} group Command group.\n *\n * @return {Object} action.\n */\nexport function unregisterCommand( name, group ) {\n\treturn {\n\t\ttype: 'UNREGISTER_COMMAND',\n\t\tname,\n\t\tgroup,\n\t};\n}\n\n/**\n * Register command loader.\n *\n * @param {WPCommandLoaderConfig} config Command loader config.\n *\n * @return {Object} action.\n */\nexport function registerCommandLoader( { name, group = '', hook } ) {\n\treturn {\n\t\ttype: 'REGISTER_COMMAND_LOADER',\n\t\tname,\n\t\tgroup,\n\t\thook,\n\t};\n}\n\n/**\n * Unregister command loader hook.\n *\n * @param {string} name  Command loader name.\n * @param {string} group Command loader group.\n *\n * @return {Object} action.\n */\nexport function unregisterCommandLoader( name, group ) {\n\treturn {\n\t\ttype: 'UNREGISTER_COMMAND_LOADER',\n\t\tname,\n\t\tgroup,\n\t};\n}\n\n/**\n * Opens the command center.\n *\n * @return {Object} action.\n */\nexport function open() {\n\treturn {\n\t\ttype: 'OPEN',\n\t};\n}\n\n/**\n * Closes the command center.\n *\n * @return {Object} action.\n */\nexport function close() {\n\treturn {\n\t\ttype: 'CLOSE',\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/commands/src/store/actions.js"],"names":["registerCommand","config","type","unregisterCommand","name","registerCommandLoader","unregisterCommandLoader","open","close","setContext","context"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,eAAT,CAA0BC,MAA1B,EAAmC;AACzC,SAAO;AACNC,IAAAA,IAAI,EAAE,kBADA;AAEN,OAAGD;AAFG,GAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASE,iBAAT,CAA4BC,IAA5B,EAAmC;AACzC,SAAO;AACNF,IAAAA,IAAI,EAAE,oBADA;AAENE,IAAAA;AAFM,GAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,qBAAT,CAAgCJ,MAAhC,EAAyC;AAC/C,SAAO;AACNC,IAAAA,IAAI,EAAE,yBADA;AAEN,OAAGD;AAFG,GAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASK,uBAAT,CAAkCF,IAAlC,EAAyC;AAC/C,SAAO;AACNF,IAAAA,IAAI,EAAE,2BADA;AAENE,IAAAA;AAFM,GAAP;AAIA;AAED;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASG,IAAT,GAAgB;AACtB,SAAO;AACNL,IAAAA,IAAI,EAAE;AADA,GAAP;AAGA;AAED;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASM,KAAT,GAAiB;AACvB,SAAO;AACNN,IAAAA,IAAI,EAAE;AADA,GAAP;AAGA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASO,UAAT,CAAqBC,OAArB,EAA+B;AACrC,SAAO;AACNR,IAAAA,IAAI,EAAE,aADA;AAENQ,IAAAA;AAFM,GAAP;AAIA","sourcesContent":["/** @typedef {import('@wordpress/keycodes').WPKeycodeModifier} WPKeycodeModifier */\n\n/**\n * Configuration of a registered keyboard shortcut.\n *\n * @typedef {Object} WPCommandConfig\n *\n * @property {string}      name        Command name.\n * @property {string}      label       Command label.\n * @property {string=}     searchLabel Command search label.\n * @property {string=}     context     Command context.\n * @property {JSX.Element} icon        Command icon.\n * @property {Function}    callback    Command callback.\n */\n\n/**\n * @typedef {(search: string) => WPCommandConfig[]} WPCommandLoaderHook hoo\n */\n\n/**\n * Command loader config.\n *\n * @typedef {Object} WPCommandLoaderConfig\n *\n * @property {string}              name    Command loader name.\n * @property {string=}             context Command loader context.\n * @property {WPCommandLoaderHook} hook    Command loader hook.\n */\n\n/**\n * Returns an action object used to register a new command.\n *\n * @param {WPCommandConfig} config Command config.\n *\n * @return {Object} action.\n */\nexport function registerCommand( config ) {\n\treturn {\n\t\ttype: 'REGISTER_COMMAND',\n\t\t...config,\n\t};\n}\n\n/**\n * Returns an action object used to unregister a command.\n *\n * @param {string} name Command name.\n *\n * @return {Object} action.\n */\nexport function unregisterCommand( name ) {\n\treturn {\n\t\ttype: 'UNREGISTER_COMMAND',\n\t\tname,\n\t};\n}\n\n/**\n * Register command loader.\n *\n * @param {WPCommandLoaderConfig} config Command loader config.\n *\n * @return {Object} action.\n */\nexport function registerCommandLoader( config ) {\n\treturn {\n\t\ttype: 'REGISTER_COMMAND_LOADER',\n\t\t...config,\n\t};\n}\n\n/**\n * Unregister command loader hook.\n *\n * @param {string} name Command loader name.\n *\n * @return {Object} action.\n */\nexport function unregisterCommandLoader( name ) {\n\treturn {\n\t\ttype: 'UNREGISTER_COMMAND_LOADER',\n\t\tname,\n\t};\n}\n\n/**\n * Opens the command center.\n *\n * @return {Object} action.\n */\nexport function open() {\n\treturn {\n\t\ttype: 'OPEN',\n\t};\n}\n\n/**\n * Closes the command center.\n *\n * @return {Object} action.\n */\nexport function close() {\n\treturn {\n\t\ttype: 'CLOSE',\n\t};\n}\n\n/**\n * Sets the active context.\n *\n * @param {string} context Context.\n *\n * @return {Object} action.\n */\nexport function setContext( context ) {\n\treturn {\n\t\ttype: 'SET_CONTEXT',\n\t\tcontext,\n\t};\n}\n"]}

package/build-module/store/reducer.js

@@ -18,14 +18,13 @@ function commands() {
   switch (action.type) {
     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
         }
       };
 
@@ -34,10 +33,8 @@ function commands() {
         const {
           [action.name]: _,
           ...remainingState
-        } = state === null || state === void 0 ? void 0 : state[action.group];
-        return { ...state,
-          [action.group]: remainingState
-        };
+        } = state;
+        return remainingState;
       }
   }
 
@@ -60,11 +57,10 @@ function commandLoaders() {
   switch (action.type) {
     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
         }
       };
 
@@ -73,10 +69,8 @@ function commandLoaders() {
         const {
           [action.name]: _,
           ...remainingState
-        } = state === null || state === void 0 ? void 0 : state[action.group];
-        return { ...state,
-          [action.group]: remainingState
-        };
+        } = state;
+        return remainingState;
       }
   }
 
@@ -106,11 +100,33 @@ function isOpen() {
 
   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() {
+  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'root';
+  let action = arguments.length > 1 ? arguments[1] : undefined;
+
+  switch (action.type) {
+    case 'SET_CONTEXT':
+      return action.context;
+  }
+
+  return state;
+}
 
 const reducer = combineReducers({
   commands,
   commandLoaders,
-  isOpen
+  isOpen,
+  context
 });
 export default reducer;
 //# sourceMappingURL=reducer.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/commands/src/store/reducer.js"],"names":["combineReducers","commands","state","action","type","group","name","label","callback","icon","_","remainingState","commandLoaders","hook","isOpen","reducer"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,eAAT,QAAgC,iBAAhC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,QAAT,GAAwC;AAAA,MAArBC,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AACvC,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,kBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,KAAT,GAAkB,EACjB,GAAGH,KAAK,CAAEC,MAAM,CAACE,KAAT,CADS;AAEjB,WAAEF,MAAM,CAACG,IAAT,GAAiB;AAChBA,YAAAA,IAAI,EAAEH,MAAM,CAACG,IADG;AAEhBC,YAAAA,KAAK,EAAEJ,MAAM,CAACI,KAFE;AAGhBF,YAAAA,KAAK,EAAEF,MAAM,CAACE,KAHE;AAIhBG,YAAAA,QAAQ,EAAEL,MAAM,CAACK,QAJD;AAKhBC,YAAAA,IAAI,EAAEN,MAAM,CAACM;AALG;AAFA;AAFZ,OAAP;;AAaD,SAAK,oBAAL;AAA2B;AAC1B,cAAM;AAAE,WAAEN,MAAM,CAACG,IAAT,GAAiBI,CAAnB;AAAsB,aAAGC;AAAzB,YACLT,KADK,aACLA,KADK,uBACLA,KAAK,CAAIC,MAAM,CAACE,KAAX,CADN;AAEA,eAAO,EACN,GAAGH,KADG;AAEN,WAAEC,MAAM,CAACE,KAAT,GAAkBM;AAFZ,SAAP;AAIA;AAtBF;;AAyBA,SAAOT,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASU,cAAT,GAA8C;AAAA,MAArBV,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AAC7C,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,yBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,KAAT,GAAkB,EACjB,GAAGH,KAAK,CAAEC,MAAM,CAACE,KAAT,CADS;AAEjB,WAAEF,MAAM,CAACG,IAAT,GAAiB;AAChBA,YAAAA,IAAI,EAAEH,MAAM,CAACG,IADG;AAEhBO,YAAAA,IAAI,EAAEV,MAAM,CAACU;AAFG;AAFA;AAFZ,OAAP;;AAUD,SAAK,2BAAL;AAAkC;AACjC,cAAM;AAAE,WAAEV,MAAM,CAACG,IAAT,GAAiBI,CAAnB;AAAsB,aAAGC;AAAzB,YACLT,KADK,aACLA,KADK,uBACLA,KAAK,CAAIC,MAAM,CAACE,KAAX,CADN;AAEA,eAAO,EACN,GAAGH,KADG;AAEN,WAAEC,MAAM,CAACE,KAAT,GAAkBM;AAFZ,SAAP;AAIA;AAnBF;;AAsBA,SAAOT,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASY,MAAT,GAAyC;AAAA,MAAxBZ,KAAwB,uEAAhB,KAAgB;AAAA,MAATC,MAAS;;AACxC,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,MAAL;AACC,aAAO,IAAP;;AACD,SAAK,OAAL;AACC,aAAO,KAAP;AAJF;;AAOA,SAAOF,KAAP;AACA;;AAED,MAAMa,OAAO,GAAGf,eAAe,CAAE;AAChCC,EAAAA,QADgC;AAEhCW,EAAAA,cAFgC;AAGhCE,EAAAA;AAHgC,CAAF,CAA/B;AAMA,eAAeC,OAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { combineReducers } from '@wordpress/data';\n\n/**\n * Reducer returning the registered commands\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commands( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: {\n\t\t\t\t\t...state[ action.group ],\n\t\t\t\t\t[ action.name ]: {\n\t\t\t\t\t\tname: action.name,\n\t\t\t\t\t\tlabel: action.label,\n\t\t\t\t\t\tgroup: action.group,\n\t\t\t\t\t\tcallback: action.callback,\n\t\t\t\t\t\ticon: action.icon,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } =\n\t\t\t\tstate?.[ action.group ];\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: remainingState,\n\t\t\t};\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command loaders\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commandLoaders( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND_LOADER':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: {\n\t\t\t\t\t...state[ action.group ],\n\t\t\t\t\t[ action.name ]: {\n\t\t\t\t\t\tname: action.name,\n\t\t\t\t\t\thook: action.hook,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND_LOADER': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } =\n\t\t\t\tstate?.[ action.group ];\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: remainingState,\n\t\t\t};\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command center open state.\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {boolean} Updated state.\n */\nfunction isOpen( state = false, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'OPEN':\n\t\t\treturn true;\n\t\tcase 'CLOSE':\n\t\t\treturn false;\n\t}\n\n\treturn state;\n}\n\nconst reducer = combineReducers( {\n\tcommands,\n\tcommandLoaders,\n\tisOpen,\n} );\n\nexport default reducer;\n"]}
+{"version":3,"sources":["@wordpress/commands/src/store/reducer.js"],"names":["combineReducers","commands","state","action","type","name","label","searchLabel","context","callback","icon","_","remainingState","commandLoaders","hook","isOpen","reducer"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,eAAT,QAAgC,iBAAhC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,QAAT,GAAwC;AAAA,MAArBC,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AACvC,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,kBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,IAAT,GAAiB;AAChBA,UAAAA,IAAI,EAAEF,MAAM,CAACE,IADG;AAEhBC,UAAAA,KAAK,EAAEH,MAAM,CAACG,KAFE;AAGhBC,UAAAA,WAAW,EAAEJ,MAAM,CAACI,WAHJ;AAIhBC,UAAAA,OAAO,EAAEL,MAAM,CAACK,OAJA;AAKhBC,UAAAA,QAAQ,EAAEN,MAAM,CAACM,QALD;AAMhBC,UAAAA,IAAI,EAAEP,MAAM,CAACO;AANG;AAFX,OAAP;;AAWD,SAAK,oBAAL;AAA2B;AAC1B,cAAM;AAAE,WAAEP,MAAM,CAACE,IAAT,GAAiBM,CAAnB;AAAsB,aAAGC;AAAzB,YAA4CV,KAAlD;AACA,eAAOU,cAAP;AACA;AAhBF;;AAmBA,SAAOV,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASW,cAAT,GAA8C;AAAA,MAArBX,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AAC7C,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,yBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,IAAT,GAAiB;AAChBA,UAAAA,IAAI,EAAEF,MAAM,CAACE,IADG;AAEhBG,UAAAA,OAAO,EAAEL,MAAM,CAACK,OAFA;AAGhBM,UAAAA,IAAI,EAAEX,MAAM,CAACW;AAHG;AAFX,OAAP;;AAQD,SAAK,2BAAL;AAAkC;AACjC,cAAM;AAAE,WAAEX,MAAM,CAACE,IAAT,GAAiBM,CAAnB;AAAsB,aAAGC;AAAzB,YAA4CV,KAAlD;AACA,eAAOU,cAAP;AACA;AAbF;;AAgBA,SAAOV,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASa,MAAT,GAAyC;AAAA,MAAxBb,KAAwB,uEAAhB,KAAgB;AAAA,MAATC,MAAS;;AACxC,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,MAAL;AACC,aAAO,IAAP;;AACD,SAAK,OAAL;AACC,aAAO,KAAP;AAJF;;AAOA,SAAOF,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASM,OAAT,GAA2C;AAAA,MAAzBN,KAAyB,uEAAjB,MAAiB;AAAA,MAATC,MAAS;;AAC1C,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,aAAL;AACC,aAAOD,MAAM,CAACK,OAAd;AAFF;;AAKA,SAAON,KAAP;AACA;;AAED,MAAMc,OAAO,GAAGhB,eAAe,CAAE;AAChCC,EAAAA,QADgC;AAEhCY,EAAAA,cAFgC;AAGhCE,EAAAA,MAHgC;AAIhCP,EAAAA;AAJgC,CAAF,CAA/B;AAOA,eAAeQ,OAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { combineReducers } from '@wordpress/data';\n\n/**\n * Reducer returning the registered commands\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commands( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.name ]: {\n\t\t\t\t\tname: action.name,\n\t\t\t\t\tlabel: action.label,\n\t\t\t\t\tsearchLabel: action.searchLabel,\n\t\t\t\t\tcontext: action.context,\n\t\t\t\t\tcallback: action.callback,\n\t\t\t\t\ticon: action.icon,\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } = state;\n\t\t\treturn remainingState;\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command loaders\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commandLoaders( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND_LOADER':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.name ]: {\n\t\t\t\t\tname: action.name,\n\t\t\t\t\tcontext: action.context,\n\t\t\t\t\thook: action.hook,\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND_LOADER': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } = state;\n\t\t\treturn remainingState;\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command center open state.\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {boolean} Updated state.\n */\nfunction isOpen( state = false, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'OPEN':\n\t\t\treturn true;\n\t\tcase 'CLOSE':\n\t\t\treturn false;\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command center's active context.\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {boolean} Updated state.\n */\nfunction context( state = 'root', action ) {\n\tswitch ( action.type ) {\n\t\tcase 'SET_CONTEXT':\n\t\t\treturn action.context;\n\t}\n\n\treturn state;\n}\n\nconst reducer = combineReducers( {\n\tcommands,\n\tcommandLoaders,\n\tisOpen,\n\tcontext,\n} );\n\nexport default reducer;\n"]}

package/build-module/store/selectors.js

@@ -2,23 +2,24 @@
  * External dependencies
  */
 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) => {
-  var _state$commands$group;
-
-  return Object.values((_state$commands$group = state.commands[group]) !== null && _state$commands$group !== void 0 ? _state$commands$group : {});
-}, (state, group) => [state.commands[group]]);
-export const getCommandLoaders = createSelector((state, group) => {
-  var _state$commandLoaders;
-
-  return Object.values((_state$commandLoaders = state.commandLoaders[group]) !== null && _state$commandLoaders !== void 0 ? _state$commandLoaders : {});
-}, (state, group) => [state.commandLoaders[group]]);
+export const getCommands = createSelector(function (state) {
+  let contextual = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return 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(function (state) {
+  let contextual = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return 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;
+}
 //# sourceMappingURL=selectors.js.map

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,UAAEE,KAAF;AAAA,MAASC,UAAT,uEAAsB,KAAtB;AAAA,SACCC,MAAM,CAACC,MAAP,CAAeH,KAAK,CAACI,QAArB,EAAgCC,MAAhC,CAA0CC,OAAF,IAAe;AACtD,UAAMC,YAAY,GACjBD,OAAO,CAACE,OAAR,IAAmBF,OAAO,CAACE,OAAR,KAAoBR,KAAK,CAACQ,OAD9C;AAEA,WAAOP,UAAU,GAAGM,YAAH,GAAkB,CAAEA,YAArC;AACA,GAJD,CADD;AAAA,CADwC,EAOtCP,KAAF,IAAa,CAAEA,KAAK,CAACI,QAAR,EAAkBJ,KAAK,CAACQ,OAAxB,CAP2B,CAAlC;AAUP,OAAO,MAAMC,iBAAiB,GAAGX,cAAc,CAC9C,UAAEE,KAAF;AAAA,MAASC,UAAT,uEAAsB,KAAtB;AAAA,SACCC,MAAM,CAACC,MAAP,CAAeH,KAAK,CAACU,cAArB,EAAsCL,MAAtC,CAAgDM,MAAF,IAAc;AAC3D,UAAMJ,YAAY,GACjBI,MAAM,CAACH,OAAP,IAAkBG,MAAM,CAACH,OAAP,KAAmBR,KAAK,CAACQ,OAD5C;AAEA,WAAOP,UAAU,GAAGM,YAAH,GAAkB,CAAEA,YAArC;AACA,GAJD,CADD;AAAA,CAD8C,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.5.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.0.0",
+		"@wordpress/data": "^9.4.0",
+		"@wordpress/element": "^5.11.0",
+		"@wordpress/i18n": "^4.34.0",
+		"@wordpress/icons": "^9.25.0",
+		"@wordpress/keyboard-shortcuts": "^4.11.0",
+		"@wordpress/private-apis": "^0.16.0",
 		"cmdk": "^0.2.0",
 		"rememo": "^4.0.2"
 	},
@@ -43,5 +43,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
+	"gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
 }

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,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 ] );
+}

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,
+	] );
 }