@wordpress/core-commands 1.32.0 → 1.32.1-next.47f435fc9.0

package/build-module/site-editor-navigation-commands.js

@@ -1,25 +1,25 @@
-/**
- * WordPress dependencies
- */
-import { useCommandLoader } from '@wordpress/commands';
-import { __ } from '@wordpress/i18n';
-import { useMemo, useEffect, useState } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { post, page, layout, symbol, symbolFilled, styles, navigation, brush } from '@wordpress/icons';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { addQueryArgs, getPath } from '@wordpress/url';
-import { useDebounce } from '@wordpress/compose';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import { unlock } from './lock-unlock';
-import { orderEntityRecordsBySearch } from './utils/order-entity-records-by-search';
-const {
-  useHistory
-} = unlock(routerPrivateApis);
+import { useCommandLoader } from "@wordpress/commands";
+import { __ } from "@wordpress/i18n";
+import { useMemo, useEffect, useState } from "@wordpress/element";
+import { useSelect } from "@wordpress/data";
+import { store as coreStore } from "@wordpress/core-data";
+import {
+  post,
+  page,
+  layout,
+  symbol,
+  symbolFilled,
+  styles,
+  navigation,
+  brush
+} from "@wordpress/icons";
+import { privateApis as routerPrivateApis } from "@wordpress/router";
+import { addQueryArgs, getPath } from "@wordpress/url";
+import { useDebounce } from "@wordpress/compose";
+import { decodeEntities } from "@wordpress/html-entities";
+import { unlock } from "./lock-unlock";
+import { orderEntityRecordsBySearch } from "./utils/order-entity-records-by-search";
+const { useHistory } = unlock(routerPrivateApis);
 const icons = {
   post,
   page,
@@ -28,7 +28,7 @@ const icons = {
   wp_template_part: symbolFilled
 };
 function useDebouncedValue(value) {
-  const [debouncedValue, setDebouncedValue] = useState('');
+  const [debouncedValue, setDebouncedValue] = useState("");
   const debounced = useDebounce(setDebouncedValue, 250);
   useEffect(() => {
     debounced(value);
@@ -36,80 +36,94 @@ function useDebouncedValue(value) {
   }, [debounced, value]);
   return debouncedValue;
 }
-const getNavigationCommandLoaderPerPostType = postType => function useNavigationCommandLoader({
-  search
-}) {
+const getNavigationCommandLoaderPerPostType = (postType) => function useNavigationCommandLoader({ search }) {
   const history = useHistory();
-  const {
-    isBlockBasedTheme,
-    canCreateTemplate
-  } = useSelect(select => {
-    return {
-      isBlockBasedTheme: select(coreStore).getCurrentTheme()?.is_block_theme,
-      canCreateTemplate: select(coreStore).canUser('create', {
-        kind: 'postType',
-        name: 'wp_template'
-      })
-    };
-  }, []);
+  const { isBlockBasedTheme, canCreateTemplate } = useSelect(
+    (select) => {
+      return {
+        isBlockBasedTheme: select(coreStore).getCurrentTheme()?.is_block_theme,
+        canCreateTemplate: select(coreStore).canUser("create", {
+          kind: "postType",
+          name: "wp_template"
+        })
+      };
+    },
+    []
+  );
   const delayedSearch = useDebouncedValue(search);
-  const {
-    records,
-    isLoading
-  } = useSelect(select => {
-    if (!delayedSearch) {
+  const { records, isLoading } = useSelect(
+    (select) => {
+      if (!delayedSearch) {
+        return {
+          isLoading: false
+        };
+      }
+      const query = {
+        search: delayedSearch,
+        per_page: 10,
+        orderby: "relevance",
+        status: [
+          "publish",
+          "future",
+          "draft",
+          "pending",
+          "private"
+        ]
+      };
       return {
-        isLoading: false
+        records: select(coreStore).getEntityRecords(
+          "postType",
+          postType,
+          query
+        ),
+        isLoading: !select(coreStore).hasFinishedResolution(
+          "getEntityRecords",
+          ["postType", postType, query]
+        )
       };
-    }
-    const query = {
-      search: delayedSearch,
-      per_page: 10,
-      orderby: 'relevance',
-      status: ['publish', 'future', 'draft', 'pending', 'private']
-    };
-    return {
-      records: select(coreStore).getEntityRecords('postType', postType, query),
-      isLoading: !select(coreStore).hasFinishedResolution('getEntityRecords', ['postType', postType, query])
-    };
-  }, [delayedSearch]);
+    },
+    [delayedSearch]
+  );
   const commands = useMemo(() => {
-    return (records !== null && records !== void 0 ? records : []).map(record => {
+    return (records ?? []).map((record) => {
       const command = {
-        name: postType + '-' + record.id,
-        searchLabel: record.title?.rendered + ' ' + record.id,
-        label: record.title?.rendered ? decodeEntities(record.title?.rendered) : __('(no title)'),
+        name: postType + "-" + record.id,
+        searchLabel: record.title?.rendered + " " + record.id,
+        label: record.title?.rendered ? decodeEntities(record.title?.rendered) : __("(no title)"),
         icon: icons[postType]
       };
-      if (!canCreateTemplate || postType === 'post' || postType === 'page' && !isBlockBasedTheme) {
+      if (!canCreateTemplate || postType === "post" || postType === "page" && !isBlockBasedTheme) {
         return {
           ...command,
-          callback: ({
-            close
-          }) => {
+          callback: ({ close }) => {
             const args = {
               post: record.id,
-              action: 'edit'
+              action: "edit"
             };
-            const targetUrl = addQueryArgs('post.php', args);
+            const targetUrl = addQueryArgs("post.php", args);
             document.location = targetUrl;
             close();
           }
         };
       }
-      const isSiteEditor = getPath(window.location.href)?.includes('site-editor.php');
+      const isSiteEditor = getPath(window.location.href)?.includes(
+        "site-editor.php"
+      );
       return {
         ...command,
-        callback: ({
-          close
-        }) => {
+        callback: ({ close }) => {
           if (isSiteEditor) {
-            history.navigate(`/${postType}/${record.id}?canvas=edit`);
+            history.navigate(
+              `/${postType}/${record.id}?canvas=edit`
+            );
           } else {
-            document.location = addQueryArgs('site-editor.php', {
-              p: `/${postType}/${record.id}`,
-              canvas: 'edit'
-            });
+            document.location = addQueryArgs(
+              "site-editor.php",
+              {
+                p: `/${postType}/${record.id}`,
+                canvas: "edit"
+              }
+            );
           }
           close();
         }
@@ -121,89 +135,87 @@ const getNavigationCommandLoaderPerPostType = postType => function useNavigation
     isLoading
   };
 };
-const getNavigationCommandLoaderPerTemplate = templateType => function useNavigationCommandLoader({
-  search
-}) {
+const getNavigationCommandLoaderPerTemplate = (templateType) => function useNavigationCommandLoader({ search }) {
   const history = useHistory();
-  const {
-    isBlockBasedTheme,
-    canCreateTemplate
-  } = useSelect(select => {
-    return {
-      isBlockBasedTheme: select(coreStore).getCurrentTheme()?.is_block_theme,
-      canCreateTemplate: select(coreStore).canUser('read', {
-        kind: 'postType',
-        name: templateType
-      })
-    };
-  }, []);
-  const {
-    records,
-    isLoading
-  } = useSelect(select => {
-    const {
-      getEntityRecords
-    } = select(coreStore);
-    const query = {
-      per_page: -1
-    };
+  const { isBlockBasedTheme, canCreateTemplate } = useSelect(
+    (select) => {
+      return {
+        isBlockBasedTheme: select(coreStore).getCurrentTheme()?.is_block_theme,
+        canCreateTemplate: select(coreStore).canUser("read", {
+          kind: "postType",
+          name: templateType
+        })
+      };
+    },
+    []
+  );
+  const { records, isLoading } = useSelect((select) => {
+    const { getEntityRecords } = select(coreStore);
+    const query = { per_page: -1 };
     return {
-      records: getEntityRecords('postType', templateType, query),
-      isLoading: !select(coreStore).hasFinishedResolution('getEntityRecords', ['postType', templateType, query])
+      records: getEntityRecords("postType", templateType, query),
+      isLoading: !select(coreStore).hasFinishedResolution(
+        "getEntityRecords",
+        ["postType", templateType, query]
+      )
     };
   }, []);
-
-  /*
-   * wp_template and wp_template_part endpoints do not support per_page or orderby parameters.
-   * We need to sort the results based on the search query to avoid removing relevant
-   * records below using .slice().
-   */
   const orderedRecords = useMemo(() => {
     return orderEntityRecordsBySearch(records, search).slice(0, 10);
   }, [records, search]);
   const commands = useMemo(() => {
-    if (!canCreateTemplate || !isBlockBasedTheme && !templateType === 'wp_template_part') {
+    if (!canCreateTemplate || !isBlockBasedTheme && !templateType === "wp_template_part") {
       return [];
     }
-    const isSiteEditor = getPath(window.location.href)?.includes('site-editor.php');
+    const isSiteEditor = getPath(window.location.href)?.includes(
+      "site-editor.php"
+    );
     const result = [];
-    result.push(...orderedRecords.map(record => {
-      return {
-        name: templateType + '-' + record.id,
-        searchLabel: record.title?.rendered + ' ' + record.id,
-        label: record.title?.rendered ? record.title?.rendered : __('(no title)'),
-        icon: icons[templateType],
-        callback: ({
-          close
-        }) => {
-          if (isSiteEditor) {
-            history.navigate(`/${templateType}/${record.id}?canvas=edit`);
-          } else {
-            document.location = addQueryArgs('site-editor.php', {
-              p: `/${templateType}/${record.id}`,
-              canvas: 'edit'
-            });
+    result.push(
+      ...orderedRecords.map((record) => {
+        return {
+          name: templateType + "-" + record.id,
+          searchLabel: record.title?.rendered + " " + record.id,
+          label: record.title?.rendered ? record.title?.rendered : __("(no title)"),
+          icon: icons[templateType],
+          callback: ({ close }) => {
+            if (isSiteEditor) {
+              history.navigate(
+                `/${templateType}/${record.id}?canvas=edit`
+              );
+            } else {
+              document.location = addQueryArgs(
+                "site-editor.php",
+                {
+                  p: `/${templateType}/${record.id}`,
+                  canvas: "edit"
+                }
+              );
+            }
+            close();
           }
-          close();
-        }
-      };
-    }));
-    if (orderedRecords?.length > 0 && templateType === 'wp_template_part') {
+        };
+      })
+    );
+    if (orderedRecords?.length > 0 && templateType === "wp_template_part") {
       result.push({
-        name: 'core/edit-site/open-template-parts',
-        label: __('Go to: Template parts'),
+        name: "core/edit-site/open-template-parts",
+        label: __("Go to: Template parts"),
         icon: symbolFilled,
-        callback: ({
-          close
-        }) => {
+        callback: ({ close }) => {
           if (isSiteEditor) {
-            history.navigate('/pattern?postType=wp_template_part&categoryId=all-parts');
+            history.navigate(
+              "/pattern?postType=wp_template_part&categoryId=all-parts"
+            );
           } else {
-            document.location = addQueryArgs('site-editor.php', {
-              p: '/pattern',
-              postType: 'wp_template_part',
-              categoryId: 'all-parts'
-            });
+            document.location = addQueryArgs(
+              "site-editor.php",
+              {
+                p: "/pattern",
+                postType: "wp_template_part",
+                categoryId: "all-parts"
+              }
+            );
           }
           close();
         }
@@ -218,75 +230,75 @@ const getNavigationCommandLoaderPerTemplate = templateType => function useNaviga
 };
 const getSiteEditorBasicNavigationCommands = () => function useSiteEditorBasicNavigationCommands() {
   const history = useHistory();
-  const isSiteEditor = getPath(window.location.href)?.includes('site-editor.php');
-  const {
-    isBlockBasedTheme,
-    canCreateTemplate,
-    canCreatePatterns
-  } = useSelect(select => {
+  const isSiteEditor = getPath(window.location.href)?.includes(
+    "site-editor.php"
+  );
+  const { isBlockBasedTheme, canCreateTemplate, canCreatePatterns } = useSelect((select) => {
     return {
       isBlockBasedTheme: select(coreStore).getCurrentTheme()?.is_block_theme,
-      canCreateTemplate: select(coreStore).canUser('create', {
-        kind: 'postType',
-        name: 'wp_template'
+      canCreateTemplate: select(coreStore).canUser("create", {
+        kind: "postType",
+        name: "wp_template"
       }),
-      canCreatePatterns: select(coreStore).canUser('create', {
-        kind: 'postType',
-        name: 'wp_block'
+      canCreatePatterns: select(coreStore).canUser("create", {
+        kind: "postType",
+        name: "wp_block"
       })
     };
   }, []);
   const commands = useMemo(() => {
     const result = [];
     if (canCreateTemplate && isBlockBasedTheme) {
-      // Go to Styles command
       result.push({
-        name: 'core/edit-site/open-styles',
-        label: __('Go to: Styles'),
+        name: "core/edit-site/open-styles",
+        label: __("Go to: Styles"),
         icon: styles,
-        callback: ({
-          close
-        }) => {
+        callback: ({ close }) => {
           if (isSiteEditor) {
-            history.navigate('/styles');
+            history.navigate("/styles");
           } else {
-            document.location = addQueryArgs('site-editor.php', {
-              p: '/styles'
-            });
+            document.location = addQueryArgs(
+              "site-editor.php",
+              {
+                p: "/styles"
+              }
+            );
           }
           close();
         }
       });
       result.push({
-        name: 'core/edit-site/open-navigation',
-        label: __('Go to: Navigation'),
+        name: "core/edit-site/open-navigation",
+        label: __("Go to: Navigation"),
         icon: navigation,
-        callback: ({
-          close
-        }) => {
+        callback: ({ close }) => {
           if (isSiteEditor) {
-            history.navigate('/navigation');
+            history.navigate("/navigation");
           } else {
-            document.location = addQueryArgs('site-editor.php', {
-              p: '/navigation'
-            });
+            document.location = addQueryArgs(
+              "site-editor.php",
+              {
+                p: "/navigation"
+              }
+            );
           }
           close();
         }
       });
       result.push({
-        name: 'core/edit-site/open-templates',
-        label: __('Go to: Templates'),
+        name: "core/edit-site/open-templates",
+        label: __("Go to: Templates"),
         icon: layout,
-        callback: ({
-          close
-        }) => {
+        callback: ({ close }) => {
           if (isSiteEditor) {
-            history.navigate('/template');
+            history.navigate("/template");
           } else {
-            document.location = addQueryArgs('site-editor.php', {
-              p: '/template'
-            });
+            document.location = addQueryArgs(
+              "site-editor.php",
+              {
+                p: "/template"
+              }
+            );
           }
           close();
         }
@@ -294,30 +306,36 @@ const getSiteEditorBasicNavigationCommands = () => function useSiteEditorBasicNa
     }
     if (canCreatePatterns) {
       result.push({
-        name: 'core/edit-site/open-patterns',
-        label: __('Go to: Patterns'),
+        name: "core/edit-site/open-patterns",
+        label: __("Go to: Patterns"),
         icon: symbol,
-        callback: ({
-          close
-        }) => {
+        callback: ({ close }) => {
           if (canCreateTemplate) {
             if (isSiteEditor) {
-              history.navigate('/pattern');
+              history.navigate("/pattern");
             } else {
-              document.location = addQueryArgs('site-editor.php', {
-                p: '/pattern'
-              });
+              document.location = addQueryArgs(
+                "site-editor.php",
+                {
+                  p: "/pattern"
+                }
+              );
             }
             close();
           } else {
-            // If a user cannot access the site editor.
-            document.location.href = 'edit.php?post_type=wp_block';
+            document.location.href = "edit.php?post_type=wp_block";
           }
         }
       });
     }
     return result;
-  }, [history, isSiteEditor, canCreateTemplate, canCreatePatterns, isBlockBasedTheme]);
+  }, [
+    history,
+    isSiteEditor,
+    canCreateTemplate,
+    canCreatePatterns,
+    isBlockBasedTheme
+  ]);
   return {
     commands,
     isLoading: false
@@ -325,77 +343,80 @@ const getSiteEditorBasicNavigationCommands = () => function useSiteEditorBasicNa
 };
 const getGlobalStylesOpenCssCommands = () => function useGlobalStylesOpenCssCommands() {
   const history = useHistory();
-  const isSiteEditor = getPath(window.location.href)?.includes('site-editor.php');
-  const {
-    canEditCSS
-  } = useSelect(select => {
-    const {
-      getEntityRecord,
-      __experimentalGetCurrentGlobalStylesId
-    } = select(coreStore);
+  const isSiteEditor = getPath(window.location.href)?.includes(
+    "site-editor.php"
+  );
+  const { canEditCSS } = useSelect((select) => {
+    const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = select(coreStore);
     const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-    const globalStyles = globalStylesId ? getEntityRecord('root', 'globalStyles', globalStylesId) : undefined;
+    const globalStyles = globalStylesId ? getEntityRecord("root", "globalStyles", globalStylesId) : void 0;
     return {
-      canEditCSS: !!globalStyles?._links?.['wp:action-edit-css']
+      canEditCSS: !!globalStyles?._links?.["wp:action-edit-css"]
     };
   }, []);
   const commands = useMemo(() => {
     if (!canEditCSS) {
       return [];
     }
-    return [{
-      name: 'core/open-styles-css',
-      label: __('Open custom CSS'),
-      icon: brush,
-      callback: ({
-        close
-      }) => {
-        close();
-        if (isSiteEditor) {
-          history.navigate('/styles?section=/css');
-        } else {
-          document.location = addQueryArgs('site-editor.php', {
-            p: '/styles',
-            section: '/css'
-          });
+    return [
+      {
+        name: "core/open-styles-css",
+        label: __("Open custom CSS"),
+        icon: brush,
+        callback: ({ close }) => {
+          close();
+          if (isSiteEditor) {
+            history.navigate("/styles?section=/css");
+          } else {
+            document.location = addQueryArgs(
+              "site-editor.php",
+              {
+                p: "/styles",
+                section: "/css"
+              }
+            );
+          }
         }
       }
-    }];
+    ];
   }, [history, canEditCSS, isSiteEditor]);
   return {
     isLoading: false,
     commands
   };
 };
-export function useSiteEditorNavigationCommands() {
+function useSiteEditorNavigationCommands() {
   useCommandLoader({
-    name: 'core/edit-site/navigate-pages',
-    hook: getNavigationCommandLoaderPerPostType('page')
+    name: "core/edit-site/navigate-pages",
+    hook: getNavigationCommandLoaderPerPostType("page")
   });
   useCommandLoader({
-    name: 'core/edit-site/navigate-posts',
-    hook: getNavigationCommandLoaderPerPostType('post')
+    name: "core/edit-site/navigate-posts",
+    hook: getNavigationCommandLoaderPerPostType("post")
   });
   useCommandLoader({
-    name: 'core/edit-site/navigate-templates',
-    hook: getNavigationCommandLoaderPerTemplate('wp_template')
+    name: "core/edit-site/navigate-templates",
+    hook: getNavigationCommandLoaderPerTemplate("wp_template")
   });
   useCommandLoader({
-    name: 'core/edit-site/navigate-templates',
-    hook: getNavigationCommandLoaderPerTemplate('wp_registered_template')
+    name: "core/edit-site/navigate-templates",
+    hook: getNavigationCommandLoaderPerTemplate("wp_registered_template")
   });
   useCommandLoader({
-    name: 'core/edit-site/navigate-template-parts',
-    hook: getNavigationCommandLoaderPerTemplate('wp_template_part')
+    name: "core/edit-site/navigate-template-parts",
+    hook: getNavigationCommandLoaderPerTemplate("wp_template_part")
   });
   useCommandLoader({
-    name: 'core/edit-site/basic-navigation',
+    name: "core/edit-site/basic-navigation",
     hook: getSiteEditorBasicNavigationCommands(),
-    context: 'site-editor'
+    context: "site-editor"
   });
   useCommandLoader({
-    name: 'core/edit-site/global-styles-css',
+    name: "core/edit-site/global-styles-css",
     hook: getGlobalStylesOpenCssCommands()
   });
 }
-//# sourceMappingURL=site-editor-navigation-commands.js.map
+export {
+  useSiteEditorNavigationCommands
+};
+//# sourceMappingURL=site-editor-navigation-commands.js.map