@wordpress/edit-site 6.32.0 → 6.32.1-next.b8c8708f3.0

package/build-module/components/editor/index.js

@@ -1,62 +1,53 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { Button, __unstableMotion as motion } from '@wordpress/components';
-import { useInstanceId, useReducedMotion } from '@wordpress/compose';
-import { EditorKeyboardShortcutsRegister, privateApis as editorPrivateApis, store as editorStore } from '@wordpress/editor';
-import { __, sprintf } from '@wordpress/i18n';
-import { store as coreDataStore } from '@wordpress/core-data';
-import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
-import { useCallback, useMemo } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { decodeEntities } from '@wordpress/html-entities';
-import { Icon, arrowUpLeft } from '@wordpress/icons';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { addQueryArgs } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import WelcomeGuide from '../welcome-guide';
-import { store as editSiteStore } from '../../store';
-import { GlobalStylesRenderer } from '../global-styles-renderer';
-import CanvasLoader from '../canvas-loader';
-import { unlock } from '../../lock-unlock';
-import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
-import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
-import GlobalStylesSidebar from '../global-styles-sidebar';
-import { isPreviewingTheme } from '../../utils/is-previewing-theme';
-import { getEditorCanvasContainerTitle, useHasEditorCanvasContainer } from '../editor-canvas-container';
-import SaveButton from '../save-button';
-import SavePanel from '../save-panel';
-import SiteEditorMoreMenu from '../more-menu';
-import SiteIcon from '../site-icon';
-import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
-import useEditorTitle from './use-editor-title';
-import { useIsSiteEditorLoading } from '../layout/hooks';
-import { useAdaptEditorToCanvas } from './use-adapt-editor-to-canvas';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-import { useResolveEditedEntity, useSyncDeprecatedEntityIntoState } from './use-resolve-edited-entity';
-import SitePreview from './site-preview';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  Editor,
-  BackButton
-} = unlock(editorPrivateApis);
-const {
-  useHistory,
-  useLocation
-} = unlock(routerPrivateApis);
-const {
-  BlockKeyboardShortcuts
-} = unlock(blockLibraryPrivateApis);
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useDispatch, useSelect } from "@wordpress/data";
+import { Button, __unstableMotion as motion } from "@wordpress/components";
+import { useInstanceId, useReducedMotion } from "@wordpress/compose";
+import {
+  EditorKeyboardShortcutsRegister,
+  privateApis as editorPrivateApis,
+  store as editorStore
+} from "@wordpress/editor";
+import { __, sprintf } from "@wordpress/i18n";
+import { store as coreDataStore } from "@wordpress/core-data";
+import { privateApis as blockLibraryPrivateApis } from "@wordpress/block-library";
+import { useCallback, useMemo } from "@wordpress/element";
+import { store as noticesStore } from "@wordpress/notices";
+import { privateApis as routerPrivateApis } from "@wordpress/router";
+import { decodeEntities } from "@wordpress/html-entities";
+import { Icon, arrowUpLeft } from "@wordpress/icons";
+import { store as blockEditorStore } from "@wordpress/block-editor";
+import { addQueryArgs } from "@wordpress/url";
+import WelcomeGuide from "../welcome-guide";
+import { store as editSiteStore } from "../../store";
+import { GlobalStylesRenderer } from "../global-styles-renderer";
+import CanvasLoader from "../canvas-loader";
+import { unlock } from "../../lock-unlock";
+import { useSpecificEditorSettings } from "../block-editor/use-site-editor-settings";
+import PluginTemplateSettingPanel from "../plugin-template-setting-panel";
+import GlobalStylesSidebar from "../global-styles-sidebar";
+import { isPreviewingTheme } from "../../utils/is-previewing-theme";
+import {
+  getEditorCanvasContainerTitle,
+  useHasEditorCanvasContainer
+} from "../editor-canvas-container";
+import SaveButton from "../save-button";
+import SavePanel from "../save-panel";
+import SiteEditorMoreMenu from "../more-menu";
+import SiteIcon from "../site-icon";
+import useEditorIframeProps from "../block-editor/use-editor-iframe-props";
+import useEditorTitle from "./use-editor-title";
+import { useIsSiteEditorLoading } from "../layout/hooks";
+import { useAdaptEditorToCanvas } from "./use-adapt-editor-to-canvas";
+import { TEMPLATE_POST_TYPE } from "../../utils/constants";
+import {
+  useResolveEditedEntity,
+  useSyncDeprecatedEntityIntoState
+} from "./use-resolve-edited-entity";
+import SitePreview from "./site-preview";
+const { Editor, BackButton } = unlock(editorPrivateApis);
+const { useHistory, useLocation } = unlock(routerPrivateApis);
+const { BlockKeyboardShortcuts } = unlock(blockLibraryPrivateApis);
 const toggleHomeIconVariants = {
   edit: {
     opacity: 0,
@@ -65,215 +56,265 @@ const toggleHomeIconVariants = {
   hover: {
     opacity: 1,
     scale: 1,
-    clipPath: 'inset( 22% round 2px )'
+    clipPath: "inset( 22% round 2px )"
   }
 };
 const siteIconVariants = {
   edit: {
-    clipPath: 'inset(0% round 0px)'
+    clipPath: "inset(0% round 0px)"
   },
   hover: {
-    clipPath: 'inset( 22% round 2px )'
+    clipPath: "inset( 22% round 2px )"
   },
   tap: {
-    clipPath: 'inset(0% round 0px)'
+    clipPath: "inset(0% round 0px)"
   }
 };
 function getListPathForPostType(postType) {
   switch (postType) {
-    case 'navigation':
-      return '/navigation';
-    case 'wp_block':
-      return '/pattern?postType=wp_block';
-    case 'wp_template_part':
-      return '/pattern?postType=wp_template_part';
-    case 'wp_template':
-      return '/template';
-    case 'page':
-      return '/page';
-    case 'post':
-      return '/';
+    case "navigation":
+      return "/navigation";
+    case "wp_block":
+      return "/pattern?postType=wp_block";
+    case "wp_template_part":
+      return "/pattern?postType=wp_template_part";
+    case "wp_template":
+      return "/template";
+    case "page":
+      return "/page";
+    case "post":
+      return "/";
   }
-  throw 'Unknown post type';
+  throw "Unknown post type";
 }
 function getNavigationPath(location, postType) {
-  const {
-    path,
-    name
-  } = location;
-  if (['pattern-item', 'template-part-item', 'page-item', 'template-item', 'static-template-item', 'post-item'].includes(name)) {
+  const { path, name } = location;
+  if ([
+    "pattern-item",
+    "template-part-item",
+    "page-item",
+    "template-item",
+    "static-template-item",
+    "post-item"
+  ].includes(name)) {
     return getListPathForPostType(postType);
   }
-  return addQueryArgs(path, {
-    canvas: undefined
-  });
+  return addQueryArgs(path, { canvas: void 0 });
 }
-export default function EditSiteEditor({
+function EditSiteEditor({
   isHomeRoute = false,
   isPostsList = false
 }) {
   const disableMotion = useReducedMotion();
   const location = useLocation();
-  const {
-    canvas = 'view'
-  } = location.query;
+  const { canvas = "view" } = location.query;
   const isLoading = useIsSiteEditorLoading();
   useAdaptEditorToCanvas(canvas);
   const entity = useResolveEditedEntity();
-  // deprecated sync state with url
   useSyncDeprecatedEntityIntoState(entity);
-  const {
-    postType,
-    postId,
-    context
-  } = entity;
+  const { postType, postId, context } = entity;
   const {
     isBlockBasedTheme,
     editorCanvasView,
     currentPostIsTrashed,
     hasSiteIcon
-  } = useSelect(select => {
-    const {
-      getEditorCanvasContainerView
-    } = unlock(select(editSiteStore));
-    const {
-      getCurrentTheme,
-      getEntityRecord
-    } = select(coreDataStore);
-    const siteData = getEntityRecord('root', '__unstableBase', undefined);
+  } = useSelect((select) => {
+    const { getEditorCanvasContainerView } = unlock(
+      select(editSiteStore)
+    );
+    const { getCurrentTheme, getEntityRecord } = select(coreDataStore);
+    const siteData = getEntityRecord("root", "__unstableBase", void 0);
     return {
       isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
       editorCanvasView: getEditorCanvasContainerView(),
-      currentPostIsTrashed: select(editorStore).getCurrentPostAttribute('status') === 'trash',
+      currentPostIsTrashed: select(editorStore).getCurrentPostAttribute("status") === "trash",
       hasSiteIcon: !!siteData?.site_icon_url
     };
   }, []);
   const postWithTemplate = !!context?.postId;
-  useEditorTitle(postWithTemplate ? context.postType : postType, postWithTemplate ? context.postId : postId);
+  useEditorTitle(
+    postWithTemplate ? context.postType : postType,
+    postWithTemplate ? context.postId : postId
+  );
   const _isPreviewingTheme = isPreviewingTheme();
   const hasDefaultEditorCanvasView = !useHasEditorCanvasContainer();
   const iframeProps = useEditorIframeProps();
-  const isEditMode = canvas === 'edit';
-  const loadingProgressId = useInstanceId(CanvasLoader, 'edit-site-editor__loading-progress');
+  const isEditMode = canvas === "edit";
+  const loadingProgressId = useInstanceId(
+    CanvasLoader,
+    "edit-site-editor__loading-progress"
+  );
   const settings = useSpecificEditorSettings();
-  const styles = useMemo(() => [...settings.styles, {
-    // Forming a "block formatting context" to prevent margin collapsing.
-    // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-    css: canvas === 'view' ? `body{min-height: 100vh; ${currentPostIsTrashed ? '' : 'cursor: pointer;'}}` : undefined
-  }], [settings.styles, canvas, currentPostIsTrashed]);
-  const {
-    resetZoomLevel
-  } = unlock(useDispatch(blockEditorStore));
-  const {
-    createSuccessNotice
-  } = useDispatch(noticesStore);
+  const styles = useMemo(
+    () => [
+      ...settings.styles,
+      {
+        // Forming a "block formatting context" to prevent margin collapsing.
+        // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+        css: canvas === "view" ? `body{min-height: 100vh; ${currentPostIsTrashed ? "" : "cursor: pointer;"}}` : void 0
+      }
+    ],
+    [settings.styles, canvas, currentPostIsTrashed]
+  );
+  const { resetZoomLevel } = unlock(useDispatch(blockEditorStore));
+  const { createSuccessNotice } = useDispatch(noticesStore);
   const history = useHistory();
-  const onActionPerformed = useCallback((actionId, items) => {
-    switch (actionId) {
-      case 'move-to-trash':
-      case 'delete-post':
-        {
-          history.navigate(getListPathForPostType(postWithTemplate ? context.postType : postType));
-        }
-        break;
-      case 'duplicate-post':
-        {
-          const newItem = items[0];
-          const _title = typeof newItem.title === 'string' ? newItem.title : newItem.title?.rendered;
-          createSuccessNotice(sprintf(
-          // translators: %s: Title of the created post or template, e.g: "Hello world".
-          __('"%s" successfully created.'), decodeEntities(_title) || __('(no title)')), {
-            type: 'snackbar',
-            id: 'duplicate-post-action',
-            actions: [{
-              label: __('Edit'),
-              onClick: () => {
-                history.navigate(`/${newItem.type}/${newItem.id}?canvas=edit`);
+  const onActionPerformed = useCallback(
+    (actionId, items) => {
+      switch (actionId) {
+        case "move-to-trash":
+        case "delete-post":
+          {
+            history.navigate(
+              getListPathForPostType(
+                postWithTemplate ? context.postType : postType
+              )
+            );
+          }
+          break;
+        case "duplicate-post":
+          {
+            const newItem = items[0];
+            const _title = typeof newItem.title === "string" ? newItem.title : newItem.title?.rendered;
+            createSuccessNotice(
+              sprintf(
+                // translators: %s: Title of the created post or template, e.g: "Hello world".
+                __('"%s" successfully created.'),
+                decodeEntities(_title) || __("(no title)")
+              ),
+              {
+                type: "snackbar",
+                id: "duplicate-post-action",
+                actions: [
+                  {
+                    label: __("Edit"),
+                    onClick: () => {
+                      history.navigate(
+                        `/${newItem.type}/${newItem.id}?canvas=edit`
+                      );
+                    }
+                  }
+                ]
               }
-            }]
-          });
-        }
-        break;
-    }
-  }, [postType, context?.postType, postWithTemplate, history, createSuccessNotice]);
-
-  // Replace the title and icon displayed in the DocumentBar when there's an overlay visible.
+            );
+          }
+          break;
+      }
+    },
+    [
+      postType,
+      context?.postType,
+      postWithTemplate,
+      history,
+      createSuccessNotice
+    ]
+  );
   const title = getEditorCanvasContainerTitle(editorCanvasView);
   const isReady = !isLoading;
   const transition = {
     duration: disableMotion ? 0 : 0.2
   };
-  return !isBlockBasedTheme && isHomeRoute ? /*#__PURE__*/_jsx(SitePreview, {}) : /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(GlobalStylesRenderer, {
-      disableRootPadding: postType !== TEMPLATE_POST_TYPE
-    }), /*#__PURE__*/_jsx(EditorKeyboardShortcutsRegister, {}), isEditMode && /*#__PURE__*/_jsx(BlockKeyboardShortcuts, {}), !isReady ? /*#__PURE__*/_jsx(CanvasLoader, {
-      id: loadingProgressId
-    }) : null, isEditMode && /*#__PURE__*/_jsx(WelcomeGuide, {
-      postType: postWithTemplate ? context.postType : postType
-    }), isReady && /*#__PURE__*/_jsxs(Editor, {
-      postType: postWithTemplate ? context.postType : postType,
-      postId: postWithTemplate ? context.postId : postId,
-      templateId: postWithTemplate ? postId : undefined,
-      settings: settings,
-      className: "edit-site-editor__editor-interface",
-      styles: styles,
-      customSaveButton: _isPreviewingTheme && /*#__PURE__*/_jsx(SaveButton, {
-        size: "compact"
-      }),
-      customSavePanel: _isPreviewingTheme && /*#__PURE__*/_jsx(SavePanel, {}),
-      forceDisableBlockTools: !hasDefaultEditorCanvasView,
-      title: title,
-      iframeProps: iframeProps,
-      onActionPerformed: onActionPerformed,
-      extraSidebarPanels: !postWithTemplate && /*#__PURE__*/_jsx(PluginTemplateSettingPanel.Slot, {}),
-      children: [isEditMode && /*#__PURE__*/_jsx(BackButton, {
-        children: ({
-          length
-        }) => length <= 1 && /*#__PURE__*/_jsxs(motion.div, {
-          className: "edit-site-editor__view-mode-toggle",
-          transition: transition,
-          animate: "edit",
-          initial: "edit",
-          whileHover: "hover",
-          whileTap: "tap",
-          children: [/*#__PURE__*/_jsx(Button, {
-            __next40pxDefaultSize: true,
-            label: __('Open Navigation'),
-            showTooltip: true,
-            tooltipPosition: "middle right",
-            onClick: () => {
-              resetZoomLevel();
-
-              // TODO: this is a temporary solution to navigate to the posts list if we are
-              // come here through `posts list` and are in focus mode editing a template, template part etc..
-              if (isPostsList && location.query?.focusMode) {
-                history.navigate('/', {
-                  transition: 'canvas-mode-view-transition'
-                });
-              } else {
-                history.navigate(getNavigationPath(location, postWithTemplate ? context.postType : postType), {
-                  transition: 'canvas-mode-view-transition'
-                });
-              }
-            },
-            children: /*#__PURE__*/_jsx(motion.div, {
-              variants: siteIconVariants,
-              children: /*#__PURE__*/_jsx(SiteIcon, {
-                className: "edit-site-editor__view-mode-toggle-icon"
-              })
-            })
-          }), /*#__PURE__*/_jsx(motion.div, {
-            className: clsx('edit-site-editor__back-icon', {
-              'has-site-icon': hasSiteIcon
-            }),
-            variants: toggleHomeIconVariants,
-            children: /*#__PURE__*/_jsx(Icon, {
-              icon: arrowUpLeft
-            })
-          })]
-        })
-      }), /*#__PURE__*/_jsx(SiteEditorMoreMenu, {}), isBlockBasedTheme && /*#__PURE__*/_jsx(GlobalStylesSidebar, {})]
-    })]
-  });
+  return !isBlockBasedTheme && isHomeRoute ? /* @__PURE__ */ jsx(SitePreview, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      GlobalStylesRenderer,
+      {
+        disableRootPadding: postType !== TEMPLATE_POST_TYPE
+      }
+    ),
+    /* @__PURE__ */ jsx(EditorKeyboardShortcutsRegister, {}),
+    isEditMode && /* @__PURE__ */ jsx(BlockKeyboardShortcuts, {}),
+    !isReady ? /* @__PURE__ */ jsx(CanvasLoader, { id: loadingProgressId }) : null,
+    isEditMode && /* @__PURE__ */ jsx(
+      WelcomeGuide,
+      {
+        postType: postWithTemplate ? context.postType : postType
+      }
+    ),
+    isReady && /* @__PURE__ */ jsxs(
+      Editor,
+      {
+        postType: postWithTemplate ? context.postType : postType,
+        postId: postWithTemplate ? context.postId : postId,
+        templateId: postWithTemplate ? postId : void 0,
+        settings,
+        className: "edit-site-editor__editor-interface",
+        styles,
+        customSaveButton: _isPreviewingTheme && /* @__PURE__ */ jsx(SaveButton, { size: "compact" }),
+        customSavePanel: _isPreviewingTheme && /* @__PURE__ */ jsx(SavePanel, {}),
+        forceDisableBlockTools: !hasDefaultEditorCanvasView,
+        title,
+        iframeProps,
+        onActionPerformed,
+        extraSidebarPanels: !postWithTemplate && /* @__PURE__ */ jsx(PluginTemplateSettingPanel.Slot, {}),
+        children: [
+          isEditMode && /* @__PURE__ */ jsx(BackButton, { children: ({ length }) => length <= 1 && /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              className: "edit-site-editor__view-mode-toggle",
+              transition,
+              animate: "edit",
+              initial: "edit",
+              whileHover: "hover",
+              whileTap: "tap",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    __next40pxDefaultSize: true,
+                    label: __("Open Navigation"),
+                    showTooltip: true,
+                    tooltipPosition: "middle right",
+                    onClick: () => {
+                      resetZoomLevel();
+                      if (isPostsList && location.query?.focusMode) {
+                        history.navigate("/", {
+                          transition: "canvas-mode-view-transition"
+                        });
+                      } else {
+                        history.navigate(
+                          getNavigationPath(
+                            location,
+                            postWithTemplate ? context.postType : postType
+                          ),
+                          {
+                            transition: "canvas-mode-view-transition"
+                          }
+                        );
+                      }
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        variants: siteIconVariants,
+                        children: /* @__PURE__ */ jsx(SiteIcon, { className: "edit-site-editor__view-mode-toggle-icon" })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    className: clsx(
+                      "edit-site-editor__back-icon",
+                      {
+                        "has-site-icon": hasSiteIcon
+                      }
+                    ),
+                    variants: toggleHomeIconVariants,
+                    children: /* @__PURE__ */ jsx(Icon, { icon: arrowUpLeft })
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(SiteEditorMoreMenu, {}),
+          isBlockBasedTheme && /* @__PURE__ */ jsx(GlobalStylesSidebar, {})
+        ]
+      }
+    )
+  ] });
 }
-//# sourceMappingURL=index.js.map
+export {
+  EditSiteEditor as default
+};
+//# sourceMappingURL=index.js.map