@wordpress/edit-post 8.9.0 → 8.11.0

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

@@ -12,6 +12,7 @@ import { privateApis as blockEditorPrivateApis, store as blockEditorStore } from
 import { PluginArea } from '@wordpress/plugins';
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useMemo, useId, useRef, useState } from '@wordpress/element';
+import { chevronDown, chevronUp } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { CommandMenu, privateApis as commandsPrivateApis } from '@wordpress/commands';
@@ -20,7 +21,7 @@ import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library
 import { addQueryArgs } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
-import { ResizableBox, SlotFillProvider, Tooltip, VisuallyHidden } from '@wordpress/components';
+import { Icon, ResizableBox, SlotFillProvider, Tooltip, VisuallyHidden, __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
 import { useMediaQuery, useRefEffect, useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -40,9 +41,7 @@ import useEditPostCommands from '../../commands/use-commands';
 import { usePaddingAppender } from './use-padding-appender';
 import { useShouldIframe } from './use-should-iframe';
 import useNavigateToEntityRecord from '../../hooks/use-navigate-to-entity-record';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const {
   getLayoutStyles
 } = unlock(blockEditorPrivateApis);
@@ -54,36 +53,24 @@ const {
 } = unlock(commandsPrivateApis);
 const {
   Editor,
-  FullscreenMode
+  FullscreenMode,
+  NavigableRegion
 } = unlock(editorPrivateApis);
 const {
   BlockKeyboardShortcuts
 } = unlock(blockLibraryPrivateApis);
 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
   } = useSelect(select => {
-    const {
-      __unstableGetEditorMode
-    } = select(blockEditorStore);
-    const {
-      getCurrentPostType,
-      getRenderingMode
-    } = select(editorStore);
-    const _postType = getCurrentPostType();
     return {
       hasThemeStyleSupport: select(editPostStore).isFeatureActive('themeStyles'),
-      editorSettings: select(editorStore).getEditorSettings(),
-      isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
-      renderingMode: getRenderingMode(),
-      postType: _postType
+      editorSettings: select(editorStore).getEditorSettings()
     };
   }, []);
+  const addedStyles = additionalStyles.join('\n');
 
   // Compute the default styles.
   return useMemo(() => {
@@ -108,16 +95,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]);
 }
 
 /**
@@ -139,7 +123,7 @@ function MetaBoxesMain({
   const {
     set: setPreference
   } = useDispatch(preferencesStore);
-  const resizableBoxRef = useRef();
+  const metaBoxesMainRef = useRef();
   const isShort = useMediaQuery('(max-height: 549px)');
   const [{
     min,
@@ -151,8 +135,8 @@ function MetaBoxesMain({
   const effectSizeConstraints = 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) {
@@ -164,7 +148,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);
@@ -174,14 +158,32 @@ function MetaBoxesMain({
   const separatorRef = useRef();
   const separatorHelpId = useId();
   const [isUntouched, setIsUntouched] = 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__*/_jsxs("div", {
     className: clsx(
     // 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__*/_jsx(MetaBoxes, {
       location: "normal"
     }), /*#__PURE__*/_jsx(MetaBoxes, {
@@ -199,20 +201,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__*/_jsxs("details", {
-      className: className,
-      open: isOpen,
-      onToggle: ({
-        target
-      }) => {
-        setPreference('core/edit-post', 'metaBoxesMainIsOpen', target.open);
-      },
-      children: [/*#__PURE__*/_jsx("summary", {
-        children: __('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/
@@ -222,99 +211,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__*/_jsxs(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__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Tooltip, {
-          text: __('Drag to resize'),
-          children: /*#__PURE__*/_jsx("button", {
-            ref: separatorRef,
-            "aria-label": __('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__*/_jsx(VisuallyHidden, {
-          id: separatorHelpId,
-          children: __('Use up and down arrow keys to resize the metabox panel.')
-        })]
-      })
-    },
-    children: [/*#__PURE__*/_jsx("meta", {
+  const className = 'edit-post-meta-boxes-main';
+  const paneLabel = __('Meta Boxes');
+  let Pane, paneProps;
+  if (isShort) {
+    Pane = NavigableRegion;
+    paneProps = {
+      className: clsx(className, 'is-toggle-only')
+    };
+  } else {
+    Pane = ResizableBox;
+    paneProps = /** @type {Parameters<typeof ResizableBox>[0]} */{
+      as: NavigableRegion,
+      ref: metaBoxesMainRef,
+      className: clsx(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__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Tooltip, {
+            text: __('Drag to resize'),
+            children: /*#__PURE__*/_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": __('Drag to resize'),
+              "aria-describedby": separatorHelpId,
+              onKeyDown: onSeparatorKeyDown
+            })
+          }), /*#__PURE__*/_jsx(VisuallyHidden, {
+            id: separatorHelpId,
+            children: __('Use up and down arrow keys to resize the meta box panel.')
+          })]
+        })
+      },
+      // 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__*/_jsxs(Pane, {
+    "aria-label": paneLabel,
+    ...paneProps,
+    children: [isShort ? /*#__PURE__*/_jsxs("button", {
+      "aria-expanded": isOpen,
+      className: "edit-post-meta-boxes-main__presenter",
+      onClick: toggle,
+      children: [paneLabel, /*#__PURE__*/_jsx(Icon, {
+        icon: isOpen ? chevronUp : chevronDown
+      })]
+    }) : /*#__PURE__*/_jsx("meta", {
       ref: effectSizeConstraints
     }), contents]
   });
@@ -327,7 +314,6 @@ function Layout({
 }) {
   useCommands();
   useEditPostCommands();
-  const paddingAppenderRef = usePaddingAppender();
   const shouldIframe = useShouldIframe();
   const {
     createErrorNotice
@@ -351,7 +337,8 @@ function Layout({
     showMetaBoxes,
     hasHistory,
     isWelcomeGuideVisible,
-    templateId
+    templateId,
+    enablePaddingAppender
   } = useSelect(select => {
     var _getPostType$viewable;
     const {
@@ -371,18 +358,28 @@ function Layout({
       kind: 'postType',
       name: 'wp_template'
     });
+    const {
+      isZoomOut
+    } = unlock(select(blockEditorStore));
+    const {
+      getEditorMode,
+      getRenderingMode
+    } = select(editorStore);
+    const isRenderingPostOnly = getRenderingMode() === 'post-only';
     return {
-      mode: select(editorStore).getEditorMode(),
+      mode: getEditorMode(),
       isFullscreenActive: select(editPostStore).isFeatureActive('fullscreenMode'),
       hasActiveMetaboxes: select(editPostStore).hasMetaBoxes(),
       hasBlockSelected: !!select(blockEditorStore).getBlockSelectionStart(),
       showIconLabels: get('core', 'showIconLabels'),
       isDistractionFree: get('core', 'distractionFree'),
-      showMetaBoxes: !DESIGN_POST_TYPES.includes(currentPostType) && select(editorStore).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: !isZoomOut() && isRenderingPostOnly && !DESIGN_POST_TYPES.includes(currentPostType)
     };
   }, [currentPostType, isEditingTemplate, settings.supportsTemplateMode]);
+  const [paddingAppenderRef, paddingStyle] = usePaddingAppender(enablePaddingAppender);
 
   // Set the right context for the command palette
   const commandContext = hasBlockSelected ? 'block-selection-edit' : 'entity-edit';
@@ -393,7 +390,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) {
@@ -401,11 +398,12 @@ function Layout({
   } else {
     document.body.classList.remove('show-icon-labels');
   }
+  const navigateRegionsProps = useNavigateRegions();
   const className = clsx('edit-post-layout', 'is-mode-' + mode, {
     'has-metaboxes': hasActiveMetaboxes
   });
   function onPluginAreaError(name) {
-    createErrorNotice(sprintf( /* translators: %s: plugin name */
+    createErrorNotice(sprintf(/* translators: %s: plugin name */
     __('The "%s" plugin has encountered an error and cannot be rendered.'), name));
   }
   const {
@@ -427,7 +425,7 @@ function Layout({
           const newItem = items[0];
           const title = typeof newItem.title === 'string' ? newItem.title : newItem.title?.rendered;
           createSuccessNotice(sprintf(
-          // translators: %s: Title of the created post e.g: "Post 1".
+          // translators: %s: Title of the created post or template, e.g: "Hello world".
           __('"%s" successfully created.'), decodeEntities(title)), {
             type: 'snackbar',
             id: 'duplicate-post-action',
@@ -459,35 +457,40 @@ function Layout({
     children: /*#__PURE__*/_jsxs(ErrorBoundary, {
       children: [/*#__PURE__*/_jsx(CommandMenu, {}), /*#__PURE__*/_jsx(WelcomeGuide, {
         postType: currentPostType
-      }), /*#__PURE__*/_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__*/_jsx(MetaBoxes, {
-          location: "side"
-        }),
-        extraContent: !isDistractionFree && showMetaBoxes && /*#__PURE__*/_jsx(MetaBoxesMain, {
-          isLegacy: !shouldIframe
-        }),
-        children: [/*#__PURE__*/_jsx(PostLockedModal, {}), /*#__PURE__*/_jsx(EditorInitialization, {}), /*#__PURE__*/_jsx(FullscreenMode, {
-          isActive: isFullscreenActive
-        }), /*#__PURE__*/_jsx(BrowserURL, {
-          hasHistory: hasHistory
-        }), /*#__PURE__*/_jsx(UnsavedChangesWarning, {}), /*#__PURE__*/_jsx(AutosaveMonitor, {}), /*#__PURE__*/_jsx(LocalAutosaveMonitor, {}), /*#__PURE__*/_jsx(EditPostKeyboardShortcuts, {}), /*#__PURE__*/_jsx(EditorKeyboardShortcutsRegister, {}), /*#__PURE__*/_jsx(BlockKeyboardShortcuts, {}), /*#__PURE__*/_jsx(InitPatternModal, {}), /*#__PURE__*/_jsx(PluginArea, {
-          onError: onPluginAreaError
-        }), /*#__PURE__*/_jsx(PostEditorMoreMenu, {}), backButton, /*#__PURE__*/_jsx(EditorSnackbars, {})]
+      }), /*#__PURE__*/_jsx("div", {
+        className: navigateRegionsProps.className,
+        ...navigateRegionsProps,
+        ref: navigateRegionsProps.ref,
+        children: /*#__PURE__*/_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__*/_jsx(MetaBoxes, {
+            location: "side"
+          }),
+          extraContent: !isDistractionFree && showMetaBoxes && /*#__PURE__*/_jsx(MetaBoxesMain, {
+            isLegacy: !shouldIframe
+          }),
+          children: [/*#__PURE__*/_jsx(PostLockedModal, {}), /*#__PURE__*/_jsx(EditorInitialization, {}), /*#__PURE__*/_jsx(FullscreenMode, {
+            isActive: isFullscreenActive
+          }), /*#__PURE__*/_jsx(BrowserURL, {
+            hasHistory: hasHistory
+          }), /*#__PURE__*/_jsx(UnsavedChangesWarning, {}), /*#__PURE__*/_jsx(AutosaveMonitor, {}), /*#__PURE__*/_jsx(LocalAutosaveMonitor, {}), /*#__PURE__*/_jsx(EditPostKeyboardShortcuts, {}), /*#__PURE__*/_jsx(EditorKeyboardShortcutsRegister, {}), /*#__PURE__*/_jsx(BlockKeyboardShortcuts, {}), /*#__PURE__*/_jsx(InitPatternModal, {}), /*#__PURE__*/_jsx(PluginArea, {
+            onError: onPluginAreaError
+          }), /*#__PURE__*/_jsx(PostEditorMoreMenu, {}), backButton, /*#__PURE__*/_jsx(EditorSnackbars, {})]
+        })
       })]
     })
   });