@wordpress/edit-post 8.9.0 → 8.10.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.10.0 (2024-10-16)
+
 ## 8.9.0 (2024-10-03)
 
 ## 8.8.0 (2024-09-19)

package/build/components/init-pattern-modal/index.js

@@ -33,7 +33,7 @@ function InitPatternModal() {
       isNewPost: isCleanNewPost()
     };
   }, []);
-  const [isModalOpen, setIsModalOpen] = (0, _element.useState)(() => isNewPost && postType === 'wp_block' ? true : false);
+  const [isModalOpen, setIsModalOpen] = (0, _element.useState)(() => isNewPost && postType === 'wp_block');
   if (postType !== 'wp_block' || !isNewPost) {
     return null;
   }

package/build/components/init-pattern-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_data","require","_i18n","_components","_element","_editor","_jsxRuntime","InitPatternModal","editPost","useDispatch","editorStore","syncType","setSyncType","useState","undefined","title","setTitle","postType","isNewPost","useSelect","select","getEditedPostAttribute","isCleanNewPost","isModalOpen","setIsModalOpen","jsx","Fragment","children","Modal","__","onRequestClose","overlayClassName","onSubmit","event","preventDefault","meta","wp_pattern_sync_status","jsxs","__experimentalVStack","spacing","TextControl","label","value","onChange","placeholder","className","__nextHasNoMarginBottom","__next40pxDefaultSize","ToggleControl","_x","help","checked","__experimentalHStack","justify","Button","variant","type","disabled","accessibleWhenDisabled"],"sources":["@wordpress/edit-post/src/components/init-pattern-modal/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tModal,\n\tButton,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tToggleControl,\n\tTextControl,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { store as editorStore } from '@wordpress/editor';\n\nexport default function InitPatternModal() {\n\tconst { editPost } = useDispatch( editorStore );\n\tconst [ syncType, setSyncType ] = useState( undefined );\n\tconst [ title, setTitle ] = useState( '' );\n\n\tconst { postType, isNewPost } = useSelect( ( select ) => {\n\t\tconst { getEditedPostAttribute, isCleanNewPost } =\n\t\t\tselect( editorStore );\n\t\treturn {\n\t\t\tpostType: getEditedPostAttribute( 'type' ),\n\t\t\tisNewPost: isCleanNewPost(),\n\t\t};\n\t}, [] );\n\tconst [ isModalOpen, setIsModalOpen ] = useState( () =>\n\t\tisNewPost && postType === 'wp_block' ? true : false\n\t);\n\n\tif ( postType !== 'wp_block' || ! isNewPost ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ isModalOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\ttitle={ __( 'Create pattern' ) }\n\t\t\t\t\tonRequestClose={ () => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t} }\n\t\t\t\t\toverlayClassName=\"reusable-blocks-menu-items__convert-modal\"\n\t\t\t\t>\n\t\t\t\t\t<form\n\t\t\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\t\teditPost( {\n\t\t\t\t\t\t\t\ttitle,\n\t\t\t\t\t\t\t\tmeta: {\n\t\t\t\t\t\t\t\t\twp_pattern_sync_status: syncType,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<VStack spacing=\"5\">\n\t\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\t\t\t\tvalue={ title }\n\t\t\t\t\t\t\t\tonChange={ setTitle }\n\t\t\t\t\t\t\t\tplaceholder={ __( 'My pattern' ) }\n\t\t\t\t\t\t\t\tclassName=\"patterns-create-modal__name-input\"\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\tlabel={ _x( 'Synced', 'pattern (singular)' ) }\n\t\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t\t'Sync this pattern across multiple locations.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tchecked={ ! syncType }\n\t\t\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\t\t\tsetSyncType(\n\t\t\t\t\t\t\t\t\t\t! syncType ? 'unsynced' : undefined\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<HStack justify=\"right\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\tdisabled={ ! title }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Create' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</form>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_data","require","_i18n","_components","_element","_editor","_jsxRuntime","InitPatternModal","editPost","useDispatch","editorStore","syncType","setSyncType","useState","undefined","title","setTitle","postType","isNewPost","useSelect","select","getEditedPostAttribute","isCleanNewPost","isModalOpen","setIsModalOpen","jsx","Fragment","children","Modal","__","onRequestClose","overlayClassName","onSubmit","event","preventDefault","meta","wp_pattern_sync_status","jsxs","__experimentalVStack","spacing","TextControl","label","value","onChange","placeholder","className","__nextHasNoMarginBottom","__next40pxDefaultSize","ToggleControl","_x","help","checked","__experimentalHStack","justify","Button","variant","type","disabled","accessibleWhenDisabled"],"sources":["@wordpress/edit-post/src/components/init-pattern-modal/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tModal,\n\tButton,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tToggleControl,\n\tTextControl,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { store as editorStore } from '@wordpress/editor';\n\nexport default function InitPatternModal() {\n\tconst { editPost } = useDispatch( editorStore );\n\tconst [ syncType, setSyncType ] = useState( undefined );\n\tconst [ title, setTitle ] = useState( '' );\n\n\tconst { postType, isNewPost } = useSelect( ( select ) => {\n\t\tconst { getEditedPostAttribute, isCleanNewPost } =\n\t\t\tselect( editorStore );\n\t\treturn {\n\t\t\tpostType: getEditedPostAttribute( 'type' ),\n\t\t\tisNewPost: isCleanNewPost(),\n\t\t};\n\t}, [] );\n\tconst [ isModalOpen, setIsModalOpen ] = useState(\n\t\t() => isNewPost && postType === 'wp_block'\n\t);\n\n\tif ( postType !== 'wp_block' || ! isNewPost ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ isModalOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\ttitle={ __( 'Create pattern' ) }\n\t\t\t\t\tonRequestClose={ () => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t} }\n\t\t\t\t\toverlayClassName=\"reusable-blocks-menu-items__convert-modal\"\n\t\t\t\t>\n\t\t\t\t\t<form\n\t\t\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\t\teditPost( {\n\t\t\t\t\t\t\t\ttitle,\n\t\t\t\t\t\t\t\tmeta: {\n\t\t\t\t\t\t\t\t\twp_pattern_sync_status: syncType,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<VStack spacing=\"5\">\n\t\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\t\t\t\tvalue={ title }\n\t\t\t\t\t\t\t\tonChange={ setTitle }\n\t\t\t\t\t\t\t\tplaceholder={ __( 'My pattern' ) }\n\t\t\t\t\t\t\t\tclassName=\"patterns-create-modal__name-input\"\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\tlabel={ _x( 'Synced', 'pattern (singular)' ) }\n\t\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t\t'Sync this pattern across multiple locations.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tchecked={ ! syncType }\n\t\t\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\t\t\tsetSyncType(\n\t\t\t\t\t\t\t\t\t\t! syncType ? 'unsynced' : undefined\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<HStack justify=\"right\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\tdisabled={ ! title }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Create' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</form>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/components/layout/index.js

@@ -12,6 +12,7 @@ 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");
@@ -60,36 +61,24 @@ const {
 } = (0, _lockUnlock.unlock)(_commands.privateApis);
 const {
   Editor,
-  FullscreenMode
+  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'];
-function useEditorStyles() {
+function useEditorStyles(...additionalStyles) {
   const {
     hasThemeStyleSupport,
-    editorSettings,
-    isZoomedOutView,
-    renderingMode,
-    postType
+    editorSettings
   } = (0, _data.useSelect)(select => {
-    const {
-      __unstableGetEditorMode
-    } = select(_blockEditor.store);
-    const {
-      getCurrentPostType,
-      getRenderingMode
-    } = select(_editor.store);
-    const _postType = getCurrentPostType();
     return {
       hasThemeStyleSupport: select(_store.store).isFeatureActive('themeStyles'),
-      editorSettings: select(_editor.store).getEditorSettings(),
-      isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
-      renderingMode: getRenderingMode(),
-      postType: _postType
+      editorSettings: select(_editor.store).getEditorSettings()
     };
   }, []);
+  const addedStyles = additionalStyles.join('\n');
 
   // Compute the default styles.
   return (0, _element.useMemo)(() => {
@@ -114,16 +103,13 @@ function useEditorStyles() {
       });
     }
     const baseStyles = hasThemeStyles ? (_editorSettings$style3 = editorSettings.styles) !== null && _editorSettings$style3 !== void 0 ? _editorSettings$style3 : [] : defaultEditorStyles;
-
-    // Add a space for the typewriter effect. When typing in the last block,
-    // there needs to be room to scroll up.
-    if (!isZoomedOutView && renderingMode === 'post-only' && !DESIGN_POST_TYPES.includes(postType)) {
+    if (addedStyles) {
       return [...baseStyles, {
-        css: ':root :where(.editor-styles-wrapper)::after {content: ""; display: block; height: 40vh;}'
+        css: addedStyles
       }];
     }
     return baseStyles;
-  }, [editorSettings.defaultEditorStyles, editorSettings.disableLayoutStyles, editorSettings.styles, hasThemeStyleSupport, postType]);
+  }, [editorSettings.defaultEditorStyles, editorSettings.disableLayoutStyles, editorSettings.styles, hasThemeStyleSupport, addedStyles]);
 }
 
 /**
@@ -145,7 +131,7 @@ function MetaBoxesMain({
   const {
     set: setPreference
   } = (0, _data.useDispatch)(_preferences.store);
-  const resizableBoxRef = (0, _element.useRef)();
+  const metaBoxesMainRef = (0, _element.useRef)();
   const isShort = (0, _compose.useMediaQuery)('(max-height: 549px)');
   const [{
     min,
@@ -157,8 +143,8 @@ function MetaBoxesMain({
   const effectSizeConstraints = (0, _compose.useRefEffect)(node => {
     const container = node.closest('.interface-interface-skeleton__content');
     const noticeLists = container.querySelectorAll(':scope > .components-notice-list');
-    const resizeHandle = container.querySelector('.edit-post-meta-boxes-main__resize-handle');
-    const actualize = () => {
+    const resizeHandle = container.querySelector('.edit-post-meta-boxes-main__presenter');
+    const deriveConstraints = () => {
       const fullHeight = container.offsetHeight;
       let nextMax = fullHeight;
       for (const element of noticeLists) {
@@ -170,7 +156,7 @@ function MetaBoxesMain({
         max: nextMax
       });
     };
-    const observer = new window.ResizeObserver(actualize);
+    const observer = new window.ResizeObserver(deriveConstraints);
     observer.observe(container);
     for (const element of noticeLists) {
       observer.observe(element);
@@ -180,14 +166,32 @@ function MetaBoxesMain({
   const separatorRef = (0, _element.useRef)();
   const separatorHelpId = (0, _element.useId)();
   const [isUntouched, setIsUntouched] = (0, _element.useState)(true);
+  const applyHeight = (candidateHeight, isPersistent, isInstant) => {
+    const nextHeight = Math.min(max, Math.max(min, candidateHeight));
+    if (isPersistent) {
+      setPreference('core/edit-post', 'metaBoxesMainOpenHeight', nextHeight);
+    } else {
+      separatorRef.current.ariaValueNow = getAriaValueNow(nextHeight);
+    }
+    if (isInstant) {
+      metaBoxesMainRef.current.updateSize({
+        height: nextHeight,
+        // Oddly, when the event that triggered this was not from the mouse (e.g. keydown),
+        // 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'
+      });
+    }
+  };
   if (!hasAnyVisible) {
     return;
   }
-  const className = 'edit-post-meta-boxes-main';
   const contents = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _clsx.default)(
     // The class name 'edit-post-layout__metaboxes' is retained because some plugins use it.
     'edit-post-layout__metaboxes', !isLegacy && 'edit-post-meta-boxes-main__liner'),
+    hidden: !isLegacy && isShort && !isOpen,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_metaBoxes.default, {
       location: "normal"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_metaBoxes.default, {
@@ -205,20 +209,7 @@ function MetaBoxesMain({
   }
   const getAriaValueNow = height => Math.round((height - min) / (max - min) * 100);
   const usedAriaValueNow = max === undefined || isAutoHeight ? 50 : getAriaValueNow(openHeight);
-  if (isShort) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
-      className: className,
-      open: isOpen,
-      onToggle: ({
-        target
-      }) => {
-        setPreference('core/edit-post', 'metaBoxesMainIsOpen', target.open);
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("summary", {
-        children: (0, _i18n.__)('Meta Boxes')
-      }), contents]
-    });
-  }
+  const toggle = () => setPreference('core/edit-post', 'metaBoxesMainIsOpen', !isOpen);
 
   // TODO: Support more/all keyboard interactions from the window splitter pattern:
   // https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
@@ -228,99 +219,97 @@ function MetaBoxesMain({
       ArrowDown: -20
     }[event.key];
     if (delta) {
-      const {
-        resizable
-      } = resizableBoxRef.current;
-      const fromHeight = isAutoHeight ? resizable.offsetHeight : openHeight;
-      const nextHeight = Math.min(max, Math.max(min, delta + fromHeight));
-      resizableBoxRef.current.updateSize({
-        height: nextHeight,
-        // Oddly, if left unspecified a subsequent drag gesture applies a fixed
-        // width and the pane fails to shrink/grow with parent width changes from
-        // sidebars opening/closing or window resizes.
-        width: 'auto'
-      });
-      setPreference('core/edit-post', 'metaBoxesMainOpenHeight', nextHeight);
+      const pane = metaBoxesMainRef.current.resizable;
+      const fromHeight = isAutoHeight ? pane.offsetHeight : openHeight;
+      const nextHeight = delta + fromHeight;
+      applyHeight(nextHeight, true, true);
+      event.preventDefault();
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ResizableBox, {
-    className: className,
-    defaultSize: {
-      height: openHeight
-    },
-    ref: resizableBoxRef,
-    enable: {
-      top: true,
-      right: false,
-      bottom: false,
-      left: false,
-      topLeft: false,
-      topRight: false,
-      bottomRight: false,
-      bottomLeft: false
-    },
-    minHeight: min,
-    maxHeight: usedMax,
-    bounds: "parent",
-    boundsByDirection: true
-    // 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
-    }) => {
-      target.setPointerCapture(pointerId);
-    },
-    onResizeStart: (event, direction, elementRef) => {
-      if (isAutoHeight) {
-        const heightNow = elementRef.offsetHeight;
-        // Sets the starting height to avoid visual jumps in height and
-        // aria-valuenow being `NaN` for the first (few) resize events.
-        resizableBoxRef.current.updateSize({
-          height: heightNow
-        });
-        // Causes `maxHeight` to update to full `max` value instead of half.
-        setIsUntouched(false);
-      }
-    },
-    onResize: () => {
-      const {
-        height
-      } = resizableBoxRef.current.state;
-      const separator = separatorRef.current;
-      separator.ariaValueNow = getAriaValueNow(height);
-    },
-    onResizeStop: () => {
-      const nextHeight = resizableBoxRef.current.state.height;
-      setPreference('core/edit-post', 'metaBoxesMainOpenHeight', nextHeight);
-    },
-    handleClasses: {
-      top: 'edit-post-meta-boxes-main__resize-handle'
-    },
-    handleComponent: {
-      top: /*#__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", {
-            ref: separatorRef,
-            "aria-label": (0, _i18n.__)('Drag to resize'),
-            "aria-describedby": separatorHelpId,
-            onKeyDown: onSeparatorKeyDown
-            // Disable reason: buttons are allowed to be separator role.
-            // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
-            ,
-            role: "separator",
-            "aria-valuenow": usedAriaValueNow
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
-          id: separatorHelpId,
-          children: (0, _i18n.__)('Use up and down arrow keys to resize the metabox panel.')
-        })]
-      })
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("meta", {
+  const className = 'edit-post-meta-boxes-main';
+  const paneLabel = (0, _i18n.__)('Meta Boxes');
+  let Pane, paneProps;
+  if (isShort) {
+    Pane = NavigableRegion;
+    paneProps = {
+      className: (0, _clsx.default)(className, 'is-toggle-only')
+    };
+  } else {
+    Pane = _components.ResizableBox;
+    paneProps = /** @type {Parameters<typeof ResizableBox>[0]} */{
+      as: NavigableRegion,
+      ref: metaBoxesMainRef,
+      className: (0, _clsx.default)(className, 'is-resizable'),
+      defaultSize: {
+        height: openHeight
+      },
+      minHeight: min,
+      maxHeight: usedMax,
+      enable: {
+        top: true,
+        right: false,
+        bottom: false,
+        left: false,
+        topLeft: false,
+        topRight: false,
+        bottomRight: false,
+        bottomLeft: false
+      },
+      handleClasses: {
+        top: 'edit-post-meta-boxes-main__presenter'
+      },
+      handleComponent: {
+        top: /*#__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
+              ref: separatorRef,
+              role: "separator" // eslint-disable-line jsx-a11y/no-interactive-element-to-noninteractive-role
+              ,
+              "aria-valuenow": usedAriaValueNow,
+              "aria-label": (0, _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 metabox pane.')
+          })]
+        })
+      },
+      // 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
+      }) => {
+        target.setPointerCapture(pointerId);
+      },
+      onResizeStart: (event, 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);
+          setIsUntouched(false);
+        }
+      },
+      onResize: () => applyHeight(metaBoxesMainRef.current.state.height),
+      onResizeStop: () => applyHeight(metaBoxesMainRef.current.state.height, true)
+    };
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Pane, {
+    "aria-label": paneLabel,
+    ...paneProps,
+    children: [isShort ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      "aria-expanded": isOpen,
+      className: "edit-post-meta-boxes-main__presenter",
+      onClick: toggle,
+      children: [paneLabel, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
+        icon: isOpen ? _icons.chevronUp : _icons.chevronDown
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("meta", {
       ref: effectSizeConstraints
     }), contents]
   });
@@ -333,7 +322,6 @@ function Layout({
 }) {
   useCommands();
   (0, _useCommands.default)();
-  const paddingAppenderRef = (0, _usePaddingAppender.usePaddingAppender)();
   const shouldIframe = (0, _useShouldIframe.useShouldIframe)();
   const {
     createErrorNotice
@@ -357,7 +345,8 @@ function Layout({
     showMetaBoxes,
     hasHistory,
     isWelcomeGuideVisible,
-    templateId
+    templateId,
+    enablePaddingAppender
   } = (0, _data.useSelect)(select => {
     var _getPostType$viewable;
     const {
@@ -377,18 +366,28 @@ function Layout({
       kind: 'postType',
       name: 'wp_template'
     });
+    const {
+      __unstableGetEditorMode
+    } = select(_blockEditor.store);
+    const {
+      getEditorMode,
+      getRenderingMode
+    } = select(_editor.store);
+    const isRenderingPostOnly = getRenderingMode() === 'post-only';
     return {
-      mode: select(_editor.store).getEditorMode(),
+      mode: getEditorMode(),
       isFullscreenActive: select(_store.store).isFeatureActive('fullscreenMode'),
       hasActiveMetaboxes: select(_store.store).hasMetaBoxes(),
       hasBlockSelected: !!select(_blockEditor.store).getBlockSelectionStart(),
       showIconLabels: get('core', 'showIconLabels'),
       isDistractionFree: get('core', 'distractionFree'),
-      showMetaBoxes: !DESIGN_POST_TYPES.includes(currentPostType) && select(_editor.store).getRenderingMode() === 'post-only',
+      showMetaBoxes: !DESIGN_POST_TYPES.includes(currentPostType) && isRenderingPostOnly,
       isWelcomeGuideVisible: isFeatureActive('welcomeGuide'),
-      templateId: supportsTemplateMode && isViewable && canViewTemplate && !isEditingTemplate ? getEditedPostTemplateId() : null
+      templateId: supportsTemplateMode && isViewable && canViewTemplate && !isEditingTemplate ? getEditedPostTemplateId() : null,
+      enablePaddingAppender: __unstableGetEditorMode() !== 'zoom-out' && isRenderingPostOnly && !DESIGN_POST_TYPES.includes(currentPostType)
     };
   }, [currentPostType, isEditingTemplate, settings.supportsTemplateMode]);
+  const [paddingAppenderRef, paddingStyle] = (0, _usePaddingAppender.usePaddingAppender)(enablePaddingAppender);
 
   // Set the right context for the command palette
   const commandContext = hasBlockSelected ? 'block-selection-edit' : 'entity-edit';
@@ -399,7 +398,7 @@ function Layout({
     onNavigateToPreviousEntityRecord,
     defaultRenderingMode: 'post-only'
   }), [settings, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord]);
-  const styles = useEditorStyles();
+  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) {
@@ -407,11 +406,12 @@ function Layout({
   } else {
     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
   });
   function onPluginAreaError(name) {
-    createErrorNotice((0, _i18n.sprintf)( /* translators: %s: plugin name */
+    createErrorNotice((0, _i18n.sprintf)(/* translators: %s: plugin name */
     (0, _i18n.__)('The "%s" plugin has encountered an error and cannot be rendered.'), name));
   }
   const {
@@ -465,35 +465,40 @@ function Layout({
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_editor.ErrorBoundary, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_commands.CommandMenu, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_welcomeGuide.default, {
         postType: currentPostType
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Editor, {
-        settings: editorSettings,
-        initialEdits: initialEdits,
-        postType: currentPostType,
-        postId: currentPostId,
-        templateId: templateId,
-        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
-        }),
-        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, {
-          hasHistory: hasHistory
-        }), /*#__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, {})]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: navigateRegionsProps.className,
+        ...navigateRegionsProps,
+        ref: navigateRegionsProps.ref,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Editor, {
+          settings: editorSettings,
+          initialEdits: initialEdits,
+          postType: currentPostType,
+          postId: currentPostId,
+          templateId: templateId,
+          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
+          }),
+          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, {
+            hasHistory: hasHistory
+          }), /*#__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, {})]
+        })
       })]
     })
   });