@wordpress/edit-post 8.32.0 → 8.32.1-next.ff1cebbba.0

package/build/components/layout/index.js

@@ -1,149 +1,148 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var layout_exports = {};
+__export(layout_exports, {
+  default: () => layout_default
 });
-exports.default = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _editor = require("@wordpress/editor");
-var _data = require("@wordpress/data");
-var _blockEditor = require("@wordpress/block-editor");
-var _plugins = require("@wordpress/plugins");
-var _i18n = require("@wordpress/i18n");
-var _element = require("@wordpress/element");
-var _icons = require("@wordpress/icons");
-var _notices = require("@wordpress/notices");
-var _preferences = require("@wordpress/preferences");
-var _commands = require("@wordpress/commands");
-var _blockLibrary = require("@wordpress/block-library");
-var _url = require("@wordpress/url");
-var _htmlEntities = require("@wordpress/html-entities");
-var _coreData = require("@wordpress/core-data");
-var _components = require("@wordpress/components");
-var _compose = require("@wordpress/compose");
-var _backButton = _interopRequireDefault(require("../back-button"));
-var _editorInitialization = _interopRequireDefault(require("../editor-initialization"));
-var _keyboardShortcuts = _interopRequireDefault(require("../keyboard-shortcuts"));
-var _initPatternModal = _interopRequireDefault(require("../init-pattern-modal"));
-var _browserUrl = _interopRequireDefault(require("../browser-url"));
-var _metaBoxes = _interopRequireDefault(require("../meta-boxes"));
-var _moreMenu = _interopRequireDefault(require("../more-menu"));
-var _welcomeGuide = _interopRequireDefault(require("../welcome-guide"));
-var _store = require("../../store");
-var _lockUnlock = require("../../lock-unlock");
-var _useCommands = _interopRequireDefault(require("../../commands/use-commands"));
-var _usePaddingAppender = require("./use-padding-appender");
-var _useShouldIframe = require("./use-should-iframe");
-var _useNavigateToEntityRecord = _interopRequireDefault(require("../../hooks/use-navigate-to-entity-record"));
-var _useMetaBoxInitialization = require("../meta-boxes/use-meta-box-initialization");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  getLayoutStyles
-} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
-const {
-  useCommandContext
-} = (0, _lockUnlock.unlock)(_commands.privateApis);
-const {
-  Editor,
-  FullscreenMode,
-  NavigableRegion
-} = (0, _lockUnlock.unlock)(_editor.privateApis);
-const {
-  BlockKeyboardShortcuts
-} = (0, _lockUnlock.unlock)(_blockLibrary.privateApis);
-const DESIGN_POST_TYPES = ['wp_template', 'wp_template_part', 'wp_block', 'wp_navigation', 'wp_registered_template'];
+module.exports = __toCommonJS(layout_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_admin_ui = require("@wordpress/admin-ui");
+var import_editor = require("@wordpress/editor");
+var import_data = require("@wordpress/data");
+var import_block_editor = require("@wordpress/block-editor");
+var import_plugins = require("@wordpress/plugins");
+var import_i18n = require("@wordpress/i18n");
+var import_element = require("@wordpress/element");
+var import_icons = require("@wordpress/icons");
+var import_notices = require("@wordpress/notices");
+var import_preferences = require("@wordpress/preferences");
+var import_commands = require("@wordpress/commands");
+var import_block_library = require("@wordpress/block-library");
+var import_url = require("@wordpress/url");
+var import_html_entities = require("@wordpress/html-entities");
+var import_core_data = require("@wordpress/core-data");
+var import_components = require("@wordpress/components");
+var import_compose = require("@wordpress/compose");
+var import_back_button = __toESM(require("../back-button"));
+var import_editor_initialization = __toESM(require("../editor-initialization"));
+var import_keyboard_shortcuts = __toESM(require("../keyboard-shortcuts"));
+var import_init_pattern_modal = __toESM(require("../init-pattern-modal"));
+var import_browser_url = __toESM(require("../browser-url"));
+var import_meta_boxes = __toESM(require("../meta-boxes"));
+var import_more_menu = __toESM(require("../more-menu"));
+var import_welcome_guide = __toESM(require("../welcome-guide"));
+var import_store = require("../../store");
+var import_lock_unlock = require("../../lock-unlock");
+var import_use_commands = __toESM(require("../../commands/use-commands"));
+var import_use_padding_appender = require("./use-padding-appender");
+var import_use_should_iframe = require("./use-should-iframe");
+var import_use_navigate_to_entity_record = __toESM(require("../../hooks/use-navigate-to-entity-record"));
+var import_use_meta_box_initialization = require("../meta-boxes/use-meta-box-initialization");
+const { getLayoutStyles } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+const { useCommandContext } = (0, import_lock_unlock.unlock)(import_commands.privateApis);
+const { Editor, FullscreenMode } = (0, import_lock_unlock.unlock)(import_editor.privateApis);
+const { BlockKeyboardShortcuts } = (0, import_lock_unlock.unlock)(import_block_library.privateApis);
+const DESIGN_POST_TYPES = [
+  "wp_template",
+  "wp_template_part",
+  "wp_block",
+  "wp_navigation",
+  "wp_registered_template"
+];
 function useEditorStyles(...additionalStyles) {
-  const {
-    hasThemeStyleSupport,
-    editorSettings
-  } = (0, _data.useSelect)(select => {
+  const { hasThemeStyleSupport, editorSettings } = (0, import_data.useSelect)((select) => {
     return {
-      hasThemeStyleSupport: select(_store.store).isFeatureActive('themeStyles'),
-      editorSettings: select(_editor.store).getEditorSettings()
+      hasThemeStyleSupport: select(import_store.store).isFeatureActive("themeStyles"),
+      editorSettings: select(import_editor.store).getEditorSettings()
     };
   }, []);
-  const addedStyles = additionalStyles.join('\n');
-
-  // Compute the default styles.
-  return (0, _element.useMemo)(() => {
-    var _editorSettings$style, _editorSettings$defau, _editorSettings$style2, _editorSettings$style3;
-    const presetStyles = (_editorSettings$style = editorSettings.styles?.filter(style => style.__unstableType && style.__unstableType !== 'theme')) !== null && _editorSettings$style !== void 0 ? _editorSettings$style : [];
-    const defaultEditorStyles = [...((_editorSettings$defau = editorSettings?.defaultEditorStyles) !== null && _editorSettings$defau !== void 0 ? _editorSettings$defau : []), ...presetStyles];
-
-    // Has theme styles if the theme supports them and if some styles were not preset styles (in which case they're theme styles).
-    const hasThemeStyles = hasThemeStyleSupport && presetStyles.length !== ((_editorSettings$style2 = editorSettings.styles?.length) !== null && _editorSettings$style2 !== void 0 ? _editorSettings$style2 : 0);
-
-    // If theme styles are not present or displayed, ensure that
-    // base layout styles are still present in the editor.
+  const addedStyles = additionalStyles.join("\n");
+  return (0, import_element.useMemo)(() => {
+    const presetStyles = editorSettings.styles?.filter(
+      (style) => style.__unstableType && style.__unstableType !== "theme"
+    ) ?? [];
+    const defaultEditorStyles = [
+      ...editorSettings?.defaultEditorStyles ?? [],
+      ...presetStyles
+    ];
+    const hasThemeStyles = hasThemeStyleSupport && presetStyles.length !== (editorSettings.styles?.length ?? 0);
     if (!editorSettings.disableLayoutStyles && !hasThemeStyles) {
       defaultEditorStyles.push({
         css: getLayoutStyles({
           style: {},
-          selector: 'body',
+          selector: "body",
           hasBlockGapSupport: false,
           hasFallbackGapSupport: true,
-          fallbackGapValue: '0.5em'
+          fallbackGapValue: "0.5em"
         })
       });
     }
-    const baseStyles = hasThemeStyles ? (_editorSettings$style3 = editorSettings.styles) !== null && _editorSettings$style3 !== void 0 ? _editorSettings$style3 : [] : defaultEditorStyles;
+    const baseStyles = hasThemeStyles ? editorSettings.styles ?? [] : defaultEditorStyles;
     if (addedStyles) {
-      return [...baseStyles, {
-        css: addedStyles
-      }];
+      return [...baseStyles, { css: addedStyles }];
     }
     return baseStyles;
-  }, [editorSettings.defaultEditorStyles, editorSettings.disableLayoutStyles, editorSettings.styles, hasThemeStyleSupport, addedStyles]);
+  }, [
+    editorSettings.defaultEditorStyles,
+    editorSettings.disableLayoutStyles,
+    editorSettings.styles,
+    hasThemeStyleSupport,
+    addedStyles
+  ]);
 }
-
-/**
- * @param {Object}  props
- * @param {boolean} props.isLegacy True when the editor canvas is not in an iframe.
- */
-function MetaBoxesMain({
-  isLegacy
-}) {
-  const [isOpen, openHeight, hasAnyVisible] = (0, _data.useSelect)(select => {
-    const {
-      get
-    } = select(_preferences.store);
-    const {
-      isMetaBoxLocationVisible
-    } = select(_store.store);
-    return [!!get('core/edit-post', 'metaBoxesMainIsOpen'), get('core/edit-post', 'metaBoxesMainOpenHeight'), isMetaBoxLocationVisible('normal') || isMetaBoxLocationVisible('advanced') || isMetaBoxLocationVisible('side')];
+function MetaBoxesMain({ isLegacy }) {
+  const [isOpen, openHeight, hasAnyVisible] = (0, import_data.useSelect)((select) => {
+    const { get } = select(import_preferences.store);
+    const { isMetaBoxLocationVisible } = select(import_store.store);
+    return [
+      !!get("core/edit-post", "metaBoxesMainIsOpen"),
+      get("core/edit-post", "metaBoxesMainOpenHeight"),
+      isMetaBoxLocationVisible("normal") || isMetaBoxLocationVisible("advanced") || isMetaBoxLocationVisible("side")
+    ];
   }, []);
-  const {
-    set: setPreference
-  } = (0, _data.useDispatch)(_preferences.store);
-  const metaBoxesMainRef = (0, _element.useRef)();
-  const isShort = (0, _compose.useMediaQuery)('(max-height: 549px)');
-  const [{
-    min,
-    max
-  }, setHeightConstraints] = (0, _element.useState)(() => ({}));
-  // Keeps the resizable area’s size constraints updated taking into account
-  // editor notices. The constraints are also used to derive the value for the
-  // aria-valuenow attribute on the separator.
-  const effectSizeConstraints = (0, _compose.useRefEffect)(node => {
-    const container = node.closest('.interface-interface-skeleton__content');
+  const { set: setPreference } = (0, import_data.useDispatch)(import_preferences.store);
+  const metaBoxesMainRef = (0, import_element.useRef)();
+  const isShort = (0, import_compose.useMediaQuery)("(max-height: 549px)");
+  const [{ min, max }, setHeightConstraints] = (0, import_element.useState)(() => ({}));
+  const effectSizeConstraints = (0, import_compose.useRefEffect)((node) => {
+    const container = node.closest(
+      ".interface-interface-skeleton__content"
+    );
     if (!container) {
       return;
     }
-    const noticeLists = container.querySelectorAll(':scope > .components-notice-list');
-    const resizeHandle = container.querySelector('.edit-post-meta-boxes-main__presenter');
+    const noticeLists = container.querySelectorAll(
+      ":scope > .components-notice-list"
+    );
+    const resizeHandle = container.querySelector(
+      ".edit-post-meta-boxes-main__presenter"
+    );
     const deriveConstraints = () => {
       const fullHeight = container.offsetHeight;
       let nextMax = fullHeight;
@@ -151,10 +150,7 @@ function MetaBoxesMain({
         nextMax -= element.offsetHeight;
       }
       const nextMin = resizeHandle.offsetHeight;
-      setHeightConstraints({
-        min: nextMin,
-        max: nextMax
-      });
+      setHeightConstraints({ min: nextMin, max: nextMax });
     };
     const observer = new window.ResizeObserver(deriveConstraints);
     observer.observe(container);
@@ -163,27 +159,22 @@ function MetaBoxesMain({
     }
     return () => observer.disconnect();
   }, []);
-  const resizeDataRef = (0, _element.useRef)({});
-  const separatorRef = (0, _element.useRef)();
-  const separatorHelpId = (0, _element.useId)();
-
-  /**
-   * @param {number|'auto'} [candidateHeight] Height in pixels or 'auto'.
-   * @param {boolean}       isPersistent      Whether to persist the height in preferences.
-   * @param {boolean}       isInstant         Whether to update the height in the DOM.
-   */
-  const applyHeight = (candidateHeight = 'auto', isPersistent, isInstant) => {
-    if (candidateHeight === 'auto') {
-      isPersistent = false; // Just in case — “auto” should never persist.
+  const resizeDataRef = (0, import_element.useRef)({});
+  const separatorRef = (0, import_element.useRef)();
+  const separatorHelpId = (0, import_element.useId)();
+  const applyHeight = (candidateHeight = "auto", isPersistent, isInstant) => {
+    if (candidateHeight === "auto") {
+      isPersistent = false;
     } else {
       candidateHeight = Math.min(max, Math.max(min, candidateHeight));
     }
     if (isPersistent) {
-      setPreference('core/edit-post', 'metaBoxesMainOpenHeight', candidateHeight);
-    }
-    // Updates aria-valuenow only when not persisting the value because otherwise
-    // it's done by the render that persisting the value causes.
-    else if (!isShort) {
+      setPreference(
+        "core/edit-post",
+        "metaBoxesMainOpenHeight",
+        candidateHeight
+      );
+    } else if (!isShort) {
       separatorRef.current.ariaValueNow = getAriaValueNow(candidateHeight);
     }
     if (isInstant) {
@@ -193,22 +184,15 @@ function MetaBoxesMain({
         // if `width` is left unspecified a subsequent drag gesture applies a fixed
         // width and the pane fails to widen/narrow with parent width changes from
         // sidebars opening/closing or window resizes.
-        width: 'auto'
+        width: "auto"
       });
     }
   };
-  const getRenderValues = (0, _compose.useEvent)(() => ({
-    isOpen,
-    openHeight,
-    min
-  }));
-  // Sets the height to 'auto' when not resizable (isShort) and to the
-  // preferred height when resizable.
-  (0, _element.useEffect)(() => {
+  const getRenderValues = (0, import_compose.useEvent)(() => ({ isOpen, openHeight, min }));
+  (0, import_element.useEffect)(() => {
     const fresh = getRenderValues();
-    // Tests for `min` having a value to skip the first render.
-    if (fresh.min !== undefined && metaBoxesMainRef.current) {
-      const usedOpenHeight = isShort ? 'auto' : fresh.openHeight;
+    if (fresh.min !== void 0 && metaBoxesMainRef.current) {
+      const usedOpenHeight = isShort ? "auto" : fresh.openHeight;
       const usedHeight = fresh.isOpen ? usedOpenHeight : fresh.min;
       applyHeight(usedHeight, false, true);
     }
@@ -216,31 +200,26 @@ function MetaBoxesMain({
   if (!hasAnyVisible) {
     return;
   }
-  const contents = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    // The class name 'edit-post-layout__metaboxes' is retained because some plugins use it.
-    className: "edit-post-layout__metaboxes edit-post-meta-boxes-main__liner",
-    hidden: !isOpen,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_metaBoxes.default, {
-      location: "normal"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_metaBoxes.default, {
-      location: "advanced"
-    })]
-  });
+  const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: "edit-post-layout__metaboxes edit-post-meta-boxes-main__liner",
+      hidden: !isLegacy && !isOpen,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_meta_boxes.default, { location: "normal" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_meta_boxes.default, { location: "advanced" })
+      ]
+    }
+  );
   if (isLegacy) {
     return contents;
   }
-  const isAutoHeight = openHeight === undefined;
-  const getAriaValueNow = height => Math.round((height - min) / (max - min) * 100);
-  const usedAriaValueNow = max === undefined || isAutoHeight ? 50 : getAriaValueNow(openHeight);
-  const persistIsOpen = (to = !isOpen) => setPreference('core/edit-post', 'metaBoxesMainIsOpen', to);
-
-  // TODO: Support more/all keyboard interactions from the window splitter pattern:
-  // https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
-  const onSeparatorKeyDown = event => {
-    const delta = {
-      ArrowUp: 20,
-      ArrowDown: -20
-    }[event.key];
+  const isAutoHeight = openHeight === void 0;
+  const getAriaValueNow = (height) => Math.round((height - min) / (max - min) * 100);
+  const usedAriaValueNow = max === void 0 || isAutoHeight ? 50 : getAriaValueNow(openHeight);
+  const persistIsOpen = (to = !isOpen) => setPreference("core/edit-post", "metaBoxesMainIsOpen", to);
+  const onSeparatorKeyDown = (event) => {
+    const delta = { ArrowUp: 20, ArrowDown: -20 }[event.key];
     if (delta) {
       const pane = metaBoxesMainRef.current.resizable;
       const fromHeight = isAutoHeight ? pane.offsetHeight : openHeight;
@@ -250,136 +229,107 @@ function MetaBoxesMain({
       event.preventDefault();
     }
   };
-  const paneLabel = (0, _i18n.__)('Meta Boxes');
-  const toggle = /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-    "aria-expanded": isOpen,
-    onClick: ({
-      detail
-    }) => {
-      const {
-        isToggleInferred
-      } = resizeDataRef.current;
-      if (isShort || !detail || isToggleInferred) {
-        persistIsOpen();
-        const usedOpenHeight = isShort ? 'auto' : openHeight;
-        const usedHeight = isOpen ? min : usedOpenHeight;
-        applyHeight(usedHeight, false, true);
-      }
+  const paneLabel = (0, import_i18n.__)("Meta Boxes");
+  const toggle = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      "aria-expanded": isOpen,
+      onClick: ({ detail }) => {
+        const { isToggleInferred } = resizeDataRef.current;
+        if (isShort || !detail || isToggleInferred) {
+          persistIsOpen();
+          const usedOpenHeight = isShort ? "auto" : openHeight;
+          const usedHeight = isOpen ? min : usedOpenHeight;
+          applyHeight(usedHeight, false, true);
+        }
+      },
+      ...isShort && {
+        onMouseDown: (event) => event.stopPropagation(),
+        onTouchStart: (event) => event.stopPropagation()
+      },
+      children: [
+        paneLabel,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Icon, { icon: isOpen ? import_icons.chevronUp : import_icons.chevronDown })
+      ]
     }
-    // Prevents resizing in short viewports.
-    ,
-    ...(isShort && {
-      onMouseDown: event => event.stopPropagation(),
-      onTouchStart: event => event.stopPropagation()
-    }),
-    children: [paneLabel, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
-      icon: isOpen ? _icons.chevronUp : _icons.chevronDown
-    })]
-  });
-  const separator = !isShort && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
-      text: (0, _i18n.__)('Drag to resize'),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        // eslint-disable-line jsx-a11y/role-supports-aria-props
+  );
+  const separator = !isShort && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tooltip, { text: (0, import_i18n.__)("Drag to resize"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
         ref: separatorRef,
-        role: "separator" // eslint-disable-line jsx-a11y/no-interactive-element-to-noninteractive-role
-        ,
+        role: "separator",
         "aria-valuenow": usedAriaValueNow,
-        "aria-label": (0, _i18n.__)('Drag to resize'),
+        "aria-label": (0, import_i18n.__)("Drag to resize"),
         "aria-describedby": separatorHelpId,
         onKeyDown: onSeparatorKeyDown
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
-      id: separatorHelpId,
-      children: (0, _i18n.__)('Use up and down arrow keys to resize the meta box panel.')
-    })]
-  });
-  const paneProps = /** @type {Parameters<typeof ResizableBox>[0]} */{
-    as: NavigableRegion,
-    ref: metaBoxesMainRef,
-    className: 'edit-post-meta-boxes-main',
-    defaultSize: {
-      height: isOpen ? openHeight : 0
-    },
-    minHeight: min,
-    maxHeight: max,
-    enable: {
-      top: true
-    },
-    handleClasses: {
-      top: 'edit-post-meta-boxes-main__presenter'
-    },
-    handleComponent: {
-      top: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [toggle, separator]
-      })
-    },
-    // Avoids hiccups while dragging over objects like iframes and ensures that
-    // the event to end the drag is captured by the target (resize handle)
-    // whether or not it’s under the pointer.
-    onPointerDown: ({
-      pointerId,
-      target
-    }) => {
-      if (separatorRef.current?.parentElement.contains(target)) {
-        target.setPointerCapture(pointerId);
       }
-    },
-    onResizeStart: ({
-      timeStamp
-    }, direction, elementRef) => {
-      if (isAutoHeight) {
-        // Sets the starting height to avoid visual jumps in height and
-        // aria-valuenow being `NaN` for the first (few) resize events.
-        applyHeight(elementRef.offsetHeight, false, true);
-      }
-      elementRef.classList.add('is-resizing');
-      resizeDataRef.current = {
-        timeStamp,
-        maxDelta: 0
-      };
-    },
-    onResize: (event, direction, elementRef, delta) => {
-      const {
-        maxDelta
-      } = resizeDataRef.current;
-      const newDelta = Math.abs(delta.height);
-      resizeDataRef.current.maxDelta = Math.max(maxDelta, newDelta);
-      applyHeight(metaBoxesMainRef.current.state.height);
-    },
-    onResizeStop: (event, direction, elementRef) => {
-      elementRef.classList.remove('is-resizing');
-      const duration = event.timeStamp - resizeDataRef.current.timeStamp;
-      const wasSeparator = event.target === separatorRef.current;
-      const {
-        maxDelta
-      } = resizeDataRef.current;
-      const isToggleInferred = maxDelta < 1 || duration < 144 && maxDelta < 5;
-      if (isShort || !wasSeparator && isToggleInferred) {
-        resizeDataRef.current.isToggleInferred = true;
-      } else {
-        const {
-          height
-        } = metaBoxesMainRef.current.state;
-        const nextIsOpen = height > min;
-        persistIsOpen(nextIsOpen);
-        // Persists height only if still open. This is so that when closed by a drag the
-        // prior height can be restored by the toggle button instead of having to drag
-        // the pane open again. Also, if already closed, a click on the separator won’t
-        // persist the height as the minimum.
-        if (nextIsOpen) {
-          applyHeight(height, true);
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, { id: separatorHelpId, children: (0, import_i18n.__)(
+      "Use up and down arrow keys to resize the meta box panel."
+    ) })
+  ] });
+  const paneProps = (
+    /** @type {Parameters<typeof ResizableBox>[0]} */
+    {
+      as: import_admin_ui.NavigableRegion,
+      ref: metaBoxesMainRef,
+      className: "edit-post-meta-boxes-main",
+      defaultSize: { height: isOpen ? openHeight : 0 },
+      minHeight: min,
+      maxHeight: max,
+      enable: { top: true },
+      handleClasses: { top: "edit-post-meta-boxes-main__presenter" },
+      handleComponent: {
+        top: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          toggle,
+          separator
+        ] })
+      },
+      // Avoids hiccups while dragging over objects like iframes and ensures that
+      // the event to end the drag is captured by the target (resize handle)
+      // whether or not it’s under the pointer.
+      onPointerDown: ({ pointerId, target }) => {
+        if (separatorRef.current?.parentElement.contains(target)) {
+          target.setPointerCapture(pointerId);
+        }
+      },
+      onResizeStart: ({ timeStamp }, direction, elementRef) => {
+        if (isAutoHeight) {
+          applyHeight(elementRef.offsetHeight, false, true);
+        }
+        elementRef.classList.add("is-resizing");
+        resizeDataRef.current = { timeStamp, maxDelta: 0 };
+      },
+      onResize: (event, direction, elementRef, delta) => {
+        const { maxDelta } = resizeDataRef.current;
+        const newDelta = Math.abs(delta.height);
+        resizeDataRef.current.maxDelta = Math.max(maxDelta, newDelta);
+        applyHeight(metaBoxesMainRef.current.state.height);
+      },
+      onResizeStop: (event, direction, elementRef) => {
+        elementRef.classList.remove("is-resizing");
+        const duration = event.timeStamp - resizeDataRef.current.timeStamp;
+        const wasSeparator = event.target === separatorRef.current;
+        const { maxDelta } = resizeDataRef.current;
+        const isToggleInferred = maxDelta < 1 || duration < 144 && maxDelta < 5;
+        if (isShort || !wasSeparator && isToggleInferred) {
+          resizeDataRef.current.isToggleInferred = true;
+        } else {
+          const { height } = metaBoxesMainRef.current.state;
+          const nextIsOpen = height > min;
+          persistIsOpen(nextIsOpen);
+          if (nextIsOpen) {
+            applyHeight(height, true);
+          }
         }
       }
     }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ResizableBox, {
-    "aria-label": paneLabel,
-    ...paneProps,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("meta", {
-      ref: effectSizeConstraints
-    }), contents]
-  });
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.ResizableBox, { "aria-label": paneLabel, ...paneProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meta", { ref: effectSizeConstraints }),
+    contents
+  ] });
 }
 function Layout({
   postId: initialPostId,
@@ -387,20 +337,19 @@ function Layout({
   settings,
   initialEdits
 }) {
-  (0, _useCommands.default)();
-  const shouldIframe = (0, _useShouldIframe.useShouldIframe)();
+  (0, import_use_commands.default)();
+  const shouldIframe = (0, import_use_should_iframe.useShouldIframe)();
+  const { createErrorNotice } = (0, import_data.useDispatch)(import_notices.store);
   const {
-    createErrorNotice
-  } = (0, _data.useDispatch)(_notices.store);
-  const {
-    currentPost: {
-      postId: currentPostId,
-      postType: currentPostType
-    },
+    currentPost: { postId: currentPostId, postType: currentPostType },
     onNavigateToEntityRecord,
     onNavigateToPreviousEntityRecord
-  } = (0, _useNavigateToEntityRecord.default)(initialPostId, initialPostType, 'post-only');
-  const isEditingTemplate = currentPostType === 'wp_template';
+  } = (0, import_use_navigate_to_entity_record.default)(
+    initialPostId,
+    initialPostType,
+    "post-only"
+  );
+  const isEditingTemplate = currentPostType === "wp_template";
   const {
     mode,
     isFullscreenActive,
@@ -414,177 +363,208 @@ function Layout({
     templateId,
     enablePaddingAppender,
     isDevicePreview
-  } = (0, _data.useSelect)(select => {
-    var _getPostType$viewable;
-    const {
-      get
-    } = select(_preferences.store);
-    const {
-      isFeatureActive,
-      hasMetaBoxes
-    } = select(_store.store);
-    const {
-      canUser,
-      getPostType,
-      getTemplateId
-    } = (0, _lockUnlock.unlock)(select(_coreData.store));
-    const supportsTemplateMode = settings.supportsTemplateMode;
-    const isViewable = (_getPostType$viewable = getPostType(currentPostType)?.viewable) !== null && _getPostType$viewable !== void 0 ? _getPostType$viewable : false;
-    const canViewTemplate = canUser('read', {
-      kind: 'postType',
-      name: 'wp_template'
-    });
-    const {
-      getBlockSelectionStart,
-      isZoomOut
-    } = (0, _lockUnlock.unlock)(select(_blockEditor.store));
-    const {
-      getEditorMode,
-      getRenderingMode,
-      getDefaultRenderingMode,
-      getDeviceType
-    } = (0, _lockUnlock.unlock)(select(_editor.store));
-    const isRenderingPostOnly = getRenderingMode() === 'post-only';
-    const isNotDesignPostType = !DESIGN_POST_TYPES.includes(currentPostType);
-    const isDirectlyEditingPattern = currentPostType === 'wp_block' && !onNavigateToPreviousEntityRecord;
-    const _templateId = getTemplateId(currentPostType, currentPostId);
-    const defaultMode = getDefaultRenderingMode(currentPostType);
-    return {
-      mode: getEditorMode(),
-      isFullscreenActive: isFeatureActive('fullscreenMode'),
-      hasActiveMetaboxes: hasMetaBoxes(),
-      hasResolvedMode: defaultMode === 'template-locked' ? !!_templateId : defaultMode !== undefined,
-      hasBlockSelected: !!getBlockSelectionStart(),
-      showIconLabels: get('core', 'showIconLabels'),
-      isDistractionFree: get('core', 'distractionFree'),
-      showMetaBoxes: isNotDesignPostType && !isZoomOut() || isDirectlyEditingPattern,
-      isWelcomeGuideVisible: isFeatureActive('welcomeGuide'),
-      templateId: supportsTemplateMode && isViewable && canViewTemplate && !isEditingTemplate ? _templateId : null,
-      enablePaddingAppender: !isZoomOut() && isRenderingPostOnly && isNotDesignPostType,
-      isDevicePreview: getDeviceType() !== 'Desktop'
-    };
-  }, [currentPostType, currentPostId, isEditingTemplate, settings.supportsTemplateMode, onNavigateToPreviousEntityRecord]);
-  (0, _useMetaBoxInitialization.useMetaBoxInitialization)(hasActiveMetaboxes && hasResolvedMode);
-  const editableResolvedTemplateId = (0, _data.useSelect)(select => {
-    if (typeof templateId !== 'string') {
-      return templateId;
-    }
-    return (0, _lockUnlock.unlock)(select(_coreData.store)).getTemplateAutoDraftId(templateId);
-  }, [templateId]);
-  const [paddingAppenderRef, paddingStyle] = (0, _usePaddingAppender.usePaddingAppender)(enablePaddingAppender);
-
-  // Set the right context for the command palette
-  const commandContext = hasBlockSelected ? 'block-selection-edit' : 'entity-edit';
+  } = (0, import_data.useSelect)(
+    (select) => {
+      const { get } = select(import_preferences.store);
+      const { isFeatureActive, hasMetaBoxes } = select(import_store.store);
+      const { canUser, getPostType, getTemplateId } = (0, import_lock_unlock.unlock)(
+        select(import_core_data.store)
+      );
+      const supportsTemplateMode = settings.supportsTemplateMode;
+      const isViewable = getPostType(currentPostType)?.viewable ?? false;
+      const canViewTemplate = canUser("read", {
+        kind: "postType",
+        name: "wp_template"
+      });
+      const { getBlockSelectionStart, isZoomOut } = (0, import_lock_unlock.unlock)(
+        select(import_block_editor.store)
+      );
+      const {
+        getEditorMode,
+        getRenderingMode,
+        getDefaultRenderingMode,
+        getDeviceType
+      } = (0, import_lock_unlock.unlock)(select(import_editor.store));
+      const isRenderingPostOnly = getRenderingMode() === "post-only";
+      const isNotDesignPostType = !DESIGN_POST_TYPES.includes(currentPostType);
+      const isDirectlyEditingPattern = currentPostType === "wp_block" && !onNavigateToPreviousEntityRecord;
+      const _templateId = getTemplateId(currentPostType, currentPostId);
+      const defaultMode = getDefaultRenderingMode(currentPostType);
+      return {
+        mode: getEditorMode(),
+        isFullscreenActive: isFeatureActive("fullscreenMode"),
+        hasActiveMetaboxes: hasMetaBoxes(),
+        hasResolvedMode: defaultMode === "template-locked" ? !!_templateId : defaultMode !== void 0,
+        hasBlockSelected: !!getBlockSelectionStart(),
+        showIconLabels: get("core", "showIconLabels"),
+        isDistractionFree: get("core", "distractionFree"),
+        showMetaBoxes: isNotDesignPostType && !isZoomOut() || isDirectlyEditingPattern,
+        isWelcomeGuideVisible: isFeatureActive("welcomeGuide"),
+        templateId: supportsTemplateMode && isViewable && canViewTemplate && !isEditingTemplate ? _templateId : null,
+        enablePaddingAppender: !isZoomOut() && isRenderingPostOnly && isNotDesignPostType,
+        isDevicePreview: getDeviceType() !== "Desktop"
+      };
+    },
+    [
+      currentPostType,
+      currentPostId,
+      isEditingTemplate,
+      settings.supportsTemplateMode,
+      onNavigateToPreviousEntityRecord
+    ]
+  );
+  (0, import_use_meta_box_initialization.useMetaBoxInitialization)(hasActiveMetaboxes && hasResolvedMode);
+  const editableResolvedTemplateId = (0, import_data.useSelect)(
+    (select) => {
+      if (typeof templateId !== "string") {
+        return templateId;
+      }
+      return (0, import_lock_unlock.unlock)(select(import_core_data.store)).getTemplateAutoDraftId(
+        templateId
+      );
+    },
+    [templateId]
+  );
+  const [paddingAppenderRef, paddingStyle] = (0, import_use_padding_appender.usePaddingAppender)(
+    enablePaddingAppender
+  );
+  const commandContext = hasBlockSelected ? "block-selection-edit" : "entity-edit";
   useCommandContext(commandContext);
-  const editorSettings = (0, _element.useMemo)(() => ({
-    ...settings,
-    onNavigateToEntityRecord,
-    onNavigateToPreviousEntityRecord,
-    defaultRenderingMode: 'post-only'
-  }), [settings, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord]);
+  const editorSettings = (0, import_element.useMemo)(
+    () => ({
+      ...settings,
+      onNavigateToEntityRecord,
+      onNavigateToPreviousEntityRecord,
+      defaultRenderingMode: "post-only"
+    }),
+    [settings, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord]
+  );
   const styles = useEditorStyles(paddingStyle);
-
-  // We need to add the show-icon-labels class to the body element so it is applied to modals.
   if (showIconLabels) {
-    document.body.classList.add('show-icon-labels');
+    document.body.classList.add("show-icon-labels");
   } else {
-    document.body.classList.remove('show-icon-labels');
+    document.body.classList.remove("show-icon-labels");
   }
-  const navigateRegionsProps = (0, _components.__unstableUseNavigateRegions)();
-  const className = (0, _clsx.default)('edit-post-layout', 'is-mode-' + mode, {
-    'has-metaboxes': hasActiveMetaboxes
+  const navigateRegionsProps = (0, import_components.__unstableUseNavigateRegions)();
+  const className = (0, import_clsx.default)("edit-post-layout", "is-mode-" + mode, {
+    "has-metaboxes": hasActiveMetaboxes
   });
   function onPluginAreaError(name) {
-    createErrorNotice((0, _i18n.sprintf)(/* translators: %s: plugin name */
-    (0, _i18n.__)('The "%s" plugin has encountered an error and cannot be rendered.'), name));
+    createErrorNotice(
+      (0, import_i18n.sprintf)(
+        /* translators: %s: plugin name */
+        (0, import_i18n.__)(
+          'The "%s" plugin has encountered an error and cannot be rendered.'
+        ),
+        name
+      )
+    );
   }
-  const {
-    createSuccessNotice
-  } = (0, _data.useDispatch)(_notices.store);
-  const onActionPerformed = (0, _element.useCallback)((actionId, items) => {
-    switch (actionId) {
-      case 'move-to-trash':
-        {
-          document.location.href = (0, _url.addQueryArgs)('edit.php', {
-            trashed: 1,
-            post_type: items[0].type,
-            ids: items[0].id
-          });
-        }
-        break;
-      case 'duplicate-post':
-        {
-          const newItem = items[0];
-          const title = typeof newItem.title === 'string' ? newItem.title : newItem.title?.rendered;
-          createSuccessNotice((0, _i18n.sprintf)(
-          // translators: %s: Title of the created post or template, e.g: "Hello world".
-          (0, _i18n.__)('"%s" successfully created.'), (0, _htmlEntities.decodeEntities)(title) || (0, _i18n.__)('(no title)')), {
-            type: 'snackbar',
-            id: 'duplicate-post-action',
-            actions: [{
-              label: (0, _i18n.__)('Edit'),
-              onClick: () => {
-                const postId = newItem.id;
-                document.location.href = (0, _url.addQueryArgs)('post.php', {
-                  post: postId,
-                  action: 'edit'
-                });
+  const { createSuccessNotice } = (0, import_data.useDispatch)(import_notices.store);
+  const onActionPerformed = (0, import_element.useCallback)(
+    (actionId, items) => {
+      switch (actionId) {
+        case "move-to-trash":
+          {
+            document.location.href = (0, import_url.addQueryArgs)("edit.php", {
+              trashed: 1,
+              post_type: items[0].type,
+              ids: items[0].id
+            });
+          }
+          break;
+        case "duplicate-post":
+          {
+            const newItem = items[0];
+            const title = typeof newItem.title === "string" ? newItem.title : newItem.title?.rendered;
+            createSuccessNotice(
+              (0, import_i18n.sprintf)(
+                // translators: %s: Title of the created post or template, e.g: "Hello world".
+                (0, import_i18n.__)('"%s" successfully created.'),
+                (0, import_html_entities.decodeEntities)(title) || (0, import_i18n.__)("(no title)")
+              ),
+              {
+                type: "snackbar",
+                id: "duplicate-post-action",
+                actions: [
+                  {
+                    label: (0, import_i18n.__)("Edit"),
+                    onClick: () => {
+                      const postId = newItem.id;
+                      document.location.href = (0, import_url.addQueryArgs)("post.php", {
+                        post: postId,
+                        action: "edit"
+                      });
+                    }
+                  }
+                ]
               }
-            }]
-          });
-        }
-        break;
-    }
-  }, [createSuccessNotice]);
-  const initialPost = (0, _element.useMemo)(() => {
+            );
+          }
+          break;
+      }
+    },
+    [createSuccessNotice]
+  );
+  const initialPost = (0, import_element.useMemo)(() => {
     return {
       type: initialPostType,
       id: initialPostId
     };
   }, [initialPostType, initialPostId]);
-  const backButton = (0, _compose.useViewportMatch)('medium') && isFullscreenActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_backButton.default, {
-    initialPost: initialPost
-  }) : null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SlotFillProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_editor.ErrorBoundary, {
-      canCopyContent: true,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_welcomeGuide.default, {
-        postType: currentPostType
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  const backButton = (0, import_compose.useViewportMatch)("medium") && isFullscreenActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_back_button.default, { initialPost }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.SlotFillProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_editor.ErrorBoundary, { canCopyContent: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_welcome_guide.default, { postType: currentPostType }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
         className: navigateRegionsProps.className,
         ...navigateRegionsProps,
         ref: navigateRegionsProps.ref,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Editor, {
-          settings: editorSettings,
-          initialEdits: initialEdits,
-          postType: currentPostType,
-          postId: currentPostId,
-          templateId: editableResolvedTemplateId,
-          className: className,
-          styles: styles,
-          forceIsDirty: hasActiveMetaboxes,
-          contentRef: paddingAppenderRef,
-          disableIframe: !shouldIframe
-          // We should auto-focus the canvas (title) on load.
-          // eslint-disable-next-line jsx-a11y/no-autofocus
-          ,
-          autoFocus: !isWelcomeGuideVisible,
-          onActionPerformed: onActionPerformed,
-          extraSidebarPanels: showMetaBoxes && /*#__PURE__*/(0, _jsxRuntime.jsx)(_metaBoxes.default, {
-            location: "side"
-          }),
-          extraContent: !isDistractionFree && showMetaBoxes && /*#__PURE__*/(0, _jsxRuntime.jsx)(MetaBoxesMain, {
-            isLegacy: !shouldIframe || isDevicePreview
-          }),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.PostLockedModal, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_editorInitialization.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(FullscreenMode, {
-            isActive: isFullscreenActive
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_browserUrl.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.UnsavedChangesWarning, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.AutosaveMonitor, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.LocalAutosaveMonitor, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_keyboardShortcuts.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.EditorKeyboardShortcutsRegister, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockKeyboardShortcuts, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_initPatternModal.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_plugins.PluginArea, {
-            onError: onPluginAreaError
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_moreMenu.default, {}), backButton, /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.EditorSnackbars, {})]
-        })
-      })]
-    })
-  });
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          Editor,
+          {
+            settings: editorSettings,
+            initialEdits,
+            postType: currentPostType,
+            postId: currentPostId,
+            templateId: editableResolvedTemplateId,
+            className,
+            styles,
+            forceIsDirty: hasActiveMetaboxes,
+            contentRef: paddingAppenderRef,
+            disableIframe: !shouldIframe,
+            autoFocus: !isWelcomeGuideVisible,
+            onActionPerformed,
+            extraSidebarPanels: showMetaBoxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_meta_boxes.default, { location: "side" }),
+            extraContent: !isDistractionFree && showMetaBoxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              MetaBoxesMain,
+              {
+                isLegacy: !shouldIframe || isDevicePreview
+              }
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.PostLockedModal, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor_initialization.default, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FullscreenMode, { isActive: isFullscreenActive }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_browser_url.default, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.UnsavedChangesWarning, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.AutosaveMonitor, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.LocalAutosaveMonitor, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_keyboard_shortcuts.default, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.EditorKeyboardShortcutsRegister, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BlockKeyboardShortcuts, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_init_pattern_modal.default, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugins.PluginArea, { onError: onPluginAreaError }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_more_menu.default, {}),
+              backButton,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.EditorSnackbars, {})
+            ]
+          }
+        )
+      }
+    )
+  ] }) });
 }
-var _default = exports.default = Layout;
-//# sourceMappingURL=index.js.map
+var layout_default = Layout;
+//# sourceMappingURL=index.js.map