@wordpress/editor 14.32.0 → 14.32.1-next.ff1cebbba.0

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

@@ -1,30 +1,33 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { BlockList, store as blockEditorStore, __unstableUseTypewriter as useTypewriter, __unstableUseTypingObserver as useTypingObserver, useSettings, RecursionProvider, privateApis as blockEditorPrivateApis, __experimentalUseResizeCanvas as useResizeCanvas } from '@wordpress/block-editor';
-import { useEffect, useRef, useMemo, useState } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { parse } from '@wordpress/blocks';
-import { store as coreStore } from '@wordpress/core-data';
-import { useMergeRefs, useViewportMatch, useResizeObserver } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import PostTitle from '../post-title';
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-import EditTemplateBlocksNotification from './edit-template-blocks-notification';
-import ResizableEditor from '../resizable-editor';
-import useSelectNearestEditableBlock from './use-select-nearest-editable-block';
-import { NAVIGATION_POST_TYPE, PATTERN_POST_TYPE, TEMPLATE_PART_POST_TYPE, TEMPLATE_POST_TYPE } from '../../store/constants';
-import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import {
+  BlockList,
+  store as blockEditorStore,
+  __unstableUseTypewriter as useTypewriter,
+  __unstableUseTypingObserver as useTypingObserver,
+  useSettings,
+  RecursionProvider,
+  privateApis as blockEditorPrivateApis,
+  __experimentalUseResizeCanvas as useResizeCanvas
+} from "@wordpress/block-editor";
+import { useEffect, useRef, useMemo } from "@wordpress/element";
+import { useSelect } from "@wordpress/data";
+import { parse } from "@wordpress/blocks";
+import { store as coreStore } from "@wordpress/core-data";
+import { useMergeRefs, useViewportMatch } from "@wordpress/compose";
+import PostTitle from "../post-title";
+import { store as editorStore } from "../../store";
+import { unlock } from "../../lock-unlock";
+import EditTemplateBlocksNotification from "./edit-template-blocks-notification";
+import ResizableEditor from "../resizable-editor";
+import useSelectNearestEditableBlock from "./use-select-nearest-editable-block";
+import {
+  NAVIGATION_POST_TYPE,
+  PATTERN_POST_TYPE,
+  TEMPLATE_PART_POST_TYPE,
+  TEMPLATE_POST_TYPE
+} from "../../store/constants";
+import { useZoomOutModeExit } from "./use-zoom-out-mode-exit";
 const {
   LayoutStyle,
   useLayoutClasses,
@@ -32,29 +35,21 @@ const {
   ExperimentalBlockCanvas: BlockCanvas,
   useFlashEditableBlocks
 } = unlock(blockEditorPrivateApis);
-
-/**
- * These post types have a special editor where they don't allow you to fill the title
- * and they don't apply the layout styles.
- */
-const DESIGN_POST_TYPES = [PATTERN_POST_TYPE, TEMPLATE_POST_TYPE, NAVIGATION_POST_TYPE, TEMPLATE_PART_POST_TYPE];
-
-/**
- * Given an array of nested blocks, find the first Post Content
- * block inside it, recursing through any nesting levels,
- * and return its attributes.
- *
- * @param {Array} blocks A list of blocks.
- *
- * @return {Object | undefined} The Post Content block.
- */
+const DESIGN_POST_TYPES = [
+  PATTERN_POST_TYPE,
+  TEMPLATE_POST_TYPE,
+  NAVIGATION_POST_TYPE,
+  TEMPLATE_PART_POST_TYPE
+];
 function getPostContentAttributes(blocks) {
   for (let i = 0; i < blocks.length; i++) {
-    if (blocks[i].name === 'core/post-content') {
+    if (blocks[i].name === "core/post-content") {
       return blocks[i].attributes;
     }
     if (blocks[i].innerBlocks.length) {
-      const nestedPostContent = getPostContentAttributes(blocks[i].innerBlocks);
+      const nestedPostContent = getPostContentAttributes(
+        blocks[i].innerBlocks
+      );
       if (nestedPostContent) {
         return nestedPostContent;
       }
@@ -63,7 +58,7 @@ function getPostContentAttributes(blocks) {
 }
 function checkForPostContentAtRootLevel(blocks) {
   for (let i = 0; i < blocks.length; i++) {
-    if (blocks[i].name === 'core/post-content') {
+    if (blocks[i].name === "core/post-content") {
       return true;
     }
   }
@@ -78,11 +73,7 @@ function VisualEditor({
   contentRef,
   className
 }) {
-  const [contentHeight, setContentHeight] = useState('');
-  const effectContentHeight = useResizeObserver(([entry]) => {
-    setContentHeight(entry.borderBoxSize[0].blockSize);
-  });
-  const isMobileViewport = useViewportMatch('small', '<');
+  const isMobileViewport = useViewportMatch("small", "<");
   const {
     renderingMode,
     postContentAttributes,
@@ -94,7 +85,7 @@ function VisualEditor({
     isDesignPostType,
     postType,
     isPreview
-  } = useSelect(select => {
+  } = useSelect((select) => {
     const {
       getCurrentPostId,
       getCurrentPostType,
@@ -103,30 +94,31 @@ function VisualEditor({
       getRenderingMode,
       getDeviceType
     } = select(editorStore);
-    const {
-      getPostType,
-      getEditedEntityRecord
-    } = select(coreStore);
+    const { getPostType, getEditedEntityRecord } = select(coreStore);
     const postTypeSlug = getCurrentPostType();
     const _renderingMode = getRenderingMode();
     let _wrapperBlockName;
     if (postTypeSlug === PATTERN_POST_TYPE) {
-      _wrapperBlockName = 'core/block';
-    } else if (_renderingMode === 'post-only') {
-      _wrapperBlockName = 'core/post-content';
+      _wrapperBlockName = "core/block";
+    } else if (_renderingMode === "post-only") {
+      _wrapperBlockName = "core/post-content";
     }
     const editorSettings = getEditorSettings();
     const supportsTemplateMode = editorSettings.supportsTemplateMode;
     const postTypeObject = getPostType(postTypeSlug);
     const currentTemplateId = getCurrentTemplateId();
-    const template = currentTemplateId ? getEditedEntityRecord('postType', TEMPLATE_POST_TYPE, currentTemplateId) : undefined;
+    const template = currentTemplateId ? getEditedEntityRecord(
+      "postType",
+      TEMPLATE_POST_TYPE,
+      currentTemplateId
+    ) : void 0;
     return {
       renderingMode: _renderingMode,
       postContentAttributes: editorSettings.postContentAttributes,
       isDesignPostType: DESIGN_POST_TYPES.includes(postTypeSlug),
       // Post template fetch returns a 404 on classic themes, which
       // messes with e2e tests, so check it's a block theme first.
-      editedPostTemplate: postTypeObject?.viewable && supportsTemplateMode ? template : undefined,
+      editedPostTemplate: postTypeObject?.viewable && supportsTemplateMode ? template : void 0,
       wrapperBlockName: _wrapperBlockName,
       wrapperUniqueId: getCurrentPostId(),
       deviceType: getDeviceType(),
@@ -135,19 +127,16 @@ function VisualEditor({
       isPreview: editorSettings.isPreviewMode
     };
   }, []);
-  const {
-    isCleanNewPost
-  } = useSelect(editorStore);
+  const { isCleanNewPost } = useSelect(editorStore);
   const {
     hasRootPaddingAwareAlignments,
     themeHasDisabledLayoutStyles,
     themeSupportsLayout,
     isZoomedOut
-  } = useSelect(select => {
-    const {
-      getSettings,
-      isZoomOut: _isZoomOut
-    } = unlock(select(blockEditorStore));
+  } = useSelect((select) => {
+    const { getSettings, isZoomOut: _isZoomOut } = unlock(
+      select(blockEditorStore)
+    );
     const _settings = getSettings();
     return {
       themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
@@ -157,82 +146,73 @@ function VisualEditor({
     };
   }, []);
   const deviceStyles = useResizeCanvas(deviceType);
-  const [globalLayoutSettings] = useSettings('layout');
-
-  // fallbackLayout is used if there is no Post Content,
-  // and for Post Title.
+  const [globalLayoutSettings] = useSettings("layout");
   const fallbackLayout = useMemo(() => {
-    if (renderingMode !== 'post-only' || isDesignPostType) {
-      return {
-        type: 'default'
-      };
+    if (renderingMode !== "post-only" || isDesignPostType) {
+      return { type: "default" };
     }
     if (themeSupportsLayout) {
-      // We need to ensure support for wide and full alignments,
-      // so we add the constrained type.
-      return {
-        ...globalLayoutSettings,
-        type: 'constrained'
-      };
+      return { ...globalLayoutSettings, type: "constrained" };
     }
-    // Set default layout for classic themes so all alignments are supported.
-    return {
-      type: 'default'
-    };
-  }, [renderingMode, themeSupportsLayout, globalLayoutSettings, isDesignPostType]);
+    return { type: "default" };
+  }, [
+    renderingMode,
+    themeSupportsLayout,
+    globalLayoutSettings,
+    isDesignPostType
+  ]);
   const newestPostContentAttributes = useMemo(() => {
     if (!editedPostTemplate?.content && !editedPostTemplate?.blocks && postContentAttributes) {
       return postContentAttributes;
     }
-    // When in template editing mode, we can access the blocks directly.
     if (editedPostTemplate?.blocks) {
       return getPostContentAttributes(editedPostTemplate?.blocks);
     }
-    // If there are no blocks, we have to parse the content string.
-    // Best double-check it's a string otherwise the parse function gets unhappy.
-    const parseableContent = typeof editedPostTemplate?.content === 'string' ? editedPostTemplate?.content : '';
+    const parseableContent = typeof editedPostTemplate?.content === "string" ? editedPostTemplate?.content : "";
     return getPostContentAttributes(parse(parseableContent)) || {};
-  }, [editedPostTemplate?.content, editedPostTemplate?.blocks, postContentAttributes]);
+  }, [
+    editedPostTemplate?.content,
+    editedPostTemplate?.blocks,
+    postContentAttributes
+  ]);
   const hasPostContentAtRootLevel = useMemo(() => {
     if (!editedPostTemplate?.content && !editedPostTemplate?.blocks) {
       return false;
     }
-    // When in template editing mode, we can access the blocks directly.
     if (editedPostTemplate?.blocks) {
       return checkForPostContentAtRootLevel(editedPostTemplate?.blocks);
     }
-    // If there are no blocks, we have to parse the content string.
-    // Best double-check it's a string otherwise the parse function gets unhappy.
-    const parseableContent = typeof editedPostTemplate?.content === 'string' ? editedPostTemplate?.content : '';
+    const parseableContent = typeof editedPostTemplate?.content === "string" ? editedPostTemplate?.content : "";
     return checkForPostContentAtRootLevel(parse(parseableContent)) || false;
   }, [editedPostTemplate?.content, editedPostTemplate?.blocks]);
-  const {
-    layout = {},
-    align = ''
-  } = newestPostContentAttributes || {};
-  const postContentLayoutClasses = useLayoutClasses(newestPostContentAttributes, 'core/post-content');
-  const blockListLayoutClass = clsx({
-    'is-layout-flow': !themeSupportsLayout
-  }, themeSupportsLayout && postContentLayoutClasses, align && `align${align}`);
-  const postContentLayoutStyles = useLayoutStyles(newestPostContentAttributes, 'core/post-content', '.block-editor-block-list__layout.is-root-container');
-
-  // Update type for blocks using legacy layouts.
+  const { layout = {}, align = "" } = newestPostContentAttributes || {};
+  const postContentLayoutClasses = useLayoutClasses(
+    newestPostContentAttributes,
+    "core/post-content"
+  );
+  const blockListLayoutClass = clsx(
+    {
+      "is-layout-flow": !themeSupportsLayout
+    },
+    themeSupportsLayout && postContentLayoutClasses,
+    align && `align${align}`
+  );
+  const postContentLayoutStyles = useLayoutStyles(
+    newestPostContentAttributes,
+    "core/post-content",
+    ".block-editor-block-list__layout.is-root-container"
+  );
   const postContentLayout = useMemo(() => {
-    return layout && (layout?.type === 'constrained' || layout?.inherit || layout?.contentSize || layout?.wideSize) ? {
-      ...globalLayoutSettings,
-      ...layout,
-      type: 'constrained'
-    } : {
-      ...globalLayoutSettings,
-      ...layout,
-      type: 'default'
-    };
-  }, [layout?.type, layout?.inherit, layout?.contentSize, layout?.wideSize, globalLayoutSettings]);
-
-  // If there is a Post Content block we use its layout for the block list;
-  // if not, this must be a classic theme, in which case we use the fallback layout.
+    return layout && (layout?.type === "constrained" || layout?.inherit || layout?.contentSize || layout?.wideSize) ? { ...globalLayoutSettings, ...layout, type: "constrained" } : { ...globalLayoutSettings, ...layout, type: "default" };
+  }, [
+    layout?.type,
+    layout?.inherit,
+    layout?.contentSize,
+    layout?.wideSize,
+    globalLayoutSettings
+  ]);
   const blockListLayout = postContentAttributes ? postContentLayout : fallbackLayout;
-  const postEditorLayout = blockListLayout?.type === 'default' && !hasPostContentAtRootLevel ? fallbackLayout : blockListLayout;
+  const postEditorLayout = blockListLayout?.type === "default" && !hasPostContentAtRootLevel ? fallbackLayout : blockListLayout;
   const observeTypingRef = useTypingObserver();
   const titleRef = useRef();
   useEffect(() => {
@@ -241,118 +221,169 @@ function VisualEditor({
     }
     titleRef?.current?.focus();
   }, [autoFocus, isCleanNewPost]);
-
-  // Add some styles for alignwide/alignfull Post Content and its children.
   const alignCSS = `.is-root-container.alignwide { max-width: var(--wp--style--global--wide-size); margin-left: auto; margin-right: auto;}
 		.is-root-container.alignwide:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: var(--wp--style--global--wide-size);}
 		.is-root-container.alignfull { max-width: none; margin-left: auto; margin-right: auto;}
 		.is-root-container.alignfull:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: none;}`;
-  const forceFullHeight = postType === NAVIGATION_POST_TYPE;
-  const enableResizing = [NAVIGATION_POST_TYPE, TEMPLATE_PART_POST_TYPE, PATTERN_POST_TYPE].includes(postType) &&
-  // Disable in previews / view mode.
-  !isPreview &&
-  // Disable resizing in mobile viewport.
-  !isMobileViewport &&
-  // Disable resizing in zoomed-out mode.
+  const enableResizing = [
+    NAVIGATION_POST_TYPE,
+    TEMPLATE_PART_POST_TYPE,
+    PATTERN_POST_TYPE
+  ].includes(postType) && // Disable in previews / view mode.
+  !isPreview && // Disable resizing in mobile viewport.
+  !isMobileViewport && // Disable resizing in zoomed-out mode.
   !isZoomedOut;
   const iframeStyles = useMemo(() => {
-    return [...(styles !== null && styles !== void 0 ? styles : []), {
-      // Ensures margins of children are contained so that the body background paints behind them.
-      // Otherwise, the background of html (when zoomed out) would show there and appear broken. It’s
-      // important mostly for post-only views yet conceivably an issue in templated views too.
-      css: `:where(.block-editor-iframe__body){display:flow-root;}.is-root-container{display:flow-root;${
-      // Some themes will have `min-height: 100vh` for the root container,
-      // which isn't a requirement in auto resize mode.
-      enableResizing ? 'min-height:0!important;' : ''}}`
-    }];
+    return [
+      ...styles ?? [],
+      {
+        // Ensures margins of children are contained so that the body background paints behind them.
+        // Otherwise, the background of html (when zoomed out) would show there and appear broken. It’s
+        // important mostly for post-only views yet conceivably an issue in templated views too.
+        css: `:where(.block-editor-iframe__body){display:flow-root;}.is-root-container{display:flow-root;${// Some themes will have `min-height: 100vh` for the root container,
+        // which isn't a requirement in auto resize mode.
+        enableResizing ? "min-height:0!important;" : ""}}
+				${enableResizing ? ".block-editor-iframe__html{background:var(--wp-editor-canvas-background);display:flex;align-items:center;justify-content:center;min-height:100vh;}.block-editor-iframe__body{width:100%;}" : ""}`
+        // The CSS above centers the body content vertically when resizing is enabled and applies a background
+        // color to the iframe HTML element to match the background color of the editor canvas.
+      }
+    ];
   }, [styles, enableResizing]);
   const localRef = useRef();
   const typewriterRef = useTypewriter();
-  contentRef = useMergeRefs([localRef, contentRef, renderingMode === 'post-only' ? typewriterRef : null, useFlashEditableBlocks({
-    isEnabled: renderingMode === 'template-locked'
-  }), useSelectNearestEditableBlock({
-    isEnabled: renderingMode === 'template-locked'
-  }), useZoomOutModeExit(),
-  // Avoid resize listeners when not needed, these will trigger
-  // unnecessary re-renders when animating the iframe width.
-  enableResizing ? effectContentHeight : null]);
-  return /*#__PURE__*/_jsx("div", {
-    className: clsx('editor-visual-editor',
-    // this class is here for backward compatibility reasons.
-    'edit-post-visual-editor', className, {
-      'has-padding': isFocusedEntity || enableResizing,
-      'is-resizable': enableResizing,
-      'is-iframed': !disableIframe
+  contentRef = useMergeRefs([
+    localRef,
+    contentRef,
+    renderingMode === "post-only" ? typewriterRef : null,
+    useFlashEditableBlocks({
+      isEnabled: renderingMode === "template-locked"
+    }),
+    useSelectNearestEditableBlock({
+      isEnabled: renderingMode === "template-locked"
     }),
-    children: /*#__PURE__*/_jsx(ResizableEditor, {
-      enableResizing: enableResizing,
-      height: contentHeight && !forceFullHeight ? contentHeight : '100%',
-      children: /*#__PURE__*/_jsxs(BlockCanvas, {
-        shouldIframe: !disableIframe,
-        contentRef: contentRef,
-        styles: iframeStyles,
-        height: "100%",
-        iframeProps: {
-          ...iframeProps,
-          style: {
-            ...iframeProps?.style,
-            ...deviceStyles
-          }
-        },
-        children: [themeSupportsLayout && !themeHasDisabledLayoutStyles && renderingMode === 'post-only' && !isDesignPostType && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(LayoutStyle, {
-            selector: ".editor-visual-editor__post-title-wrapper",
-            layout: fallbackLayout
-          }), /*#__PURE__*/_jsx(LayoutStyle, {
-            selector: ".block-editor-block-list__layout.is-root-container",
-            layout: postEditorLayout
-          }), align && /*#__PURE__*/_jsx(LayoutStyle, {
-            css: alignCSS
-          }), postContentLayoutStyles && /*#__PURE__*/_jsx(LayoutStyle, {
-            layout: postContentLayout,
-            css: postContentLayoutStyles
-          })]
-        }), renderingMode === 'post-only' && !isDesignPostType && /*#__PURE__*/_jsx("div", {
-          className: clsx('editor-visual-editor__post-title-wrapper',
-          // The following class is only here for backward compatibility
-          // some themes might be using it to style the post title.
-          'edit-post-visual-editor__post-title-wrapper', {
-            'has-global-padding': hasRootPaddingAwareAlignments
-          }),
-          contentEditable: false,
-          ref: observeTypingRef,
-          style: {
-            // This is using inline styles
-            // so it's applied for both iframed and non iframed editors.
-            marginTop: '4rem'
+    useZoomOutModeExit()
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "editor-visual-editor",
+        // this class is here for backward compatibility reasons.
+        "edit-post-visual-editor",
+        className,
+        {
+          "has-padding": isFocusedEntity || enableResizing,
+          "is-resizable": enableResizing,
+          "is-iframed": !disableIframe
+        }
+      ),
+      children: /* @__PURE__ */ jsx(ResizableEditor, { enableResizing, height: "100%", children: /* @__PURE__ */ jsxs(
+        BlockCanvas,
+        {
+          shouldIframe: !disableIframe,
+          contentRef,
+          styles: iframeStyles,
+          height: "100%",
+          iframeProps: {
+            ...iframeProps,
+            style: {
+              ...iframeProps?.style,
+              ...deviceStyles
+            }
           },
-          children: /*#__PURE__*/_jsx(PostTitle, {
-            ref: titleRef
-          })
-        }), /*#__PURE__*/_jsxs(RecursionProvider, {
-          blockName: wrapperBlockName,
-          uniqueId: wrapperUniqueId,
-          children: [/*#__PURE__*/_jsx(BlockList, {
-            className: clsx('is-' + deviceType.toLowerCase() + '-preview', renderingMode !== 'post-only' || isDesignPostType ? 'wp-site-blocks' : `${blockListLayoutClass} wp-block-post-content`,
-            // Ensure root level blocks receive default/flow blockGap styling rules.
-            {
-              'has-global-padding': renderingMode === 'post-only' && !isDesignPostType && hasRootPaddingAwareAlignments
-            }),
-            layout: blockListLayout,
-            dropZoneElement:
-            // When iframed, pass in the html element of the iframe to
-            // ensure the drop zone extends to the edges of the iframe.
-            disableIframe ? localRef.current : localRef.current?.parentNode,
-            __unstableDisableDropZone:
-            // In template preview mode, disable drop zones at the root of the template.
-            renderingMode === 'template-locked' ? true : false
-          }), renderingMode === 'template-locked' && /*#__PURE__*/_jsx(EditTemplateBlocksNotification, {
-            contentRef: localRef
-          })]
-        })]
-      })
-    })
-  });
+          children: [
+            themeSupportsLayout && !themeHasDisabledLayoutStyles && renderingMode === "post-only" && !isDesignPostType && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                LayoutStyle,
+                {
+                  selector: ".editor-visual-editor__post-title-wrapper",
+                  layout: fallbackLayout
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                LayoutStyle,
+                {
+                  selector: ".block-editor-block-list__layout.is-root-container",
+                  layout: postEditorLayout
+                }
+              ),
+              align && /* @__PURE__ */ jsx(LayoutStyle, { css: alignCSS }),
+              postContentLayoutStyles && /* @__PURE__ */ jsx(
+                LayoutStyle,
+                {
+                  layout: postContentLayout,
+                  css: postContentLayoutStyles
+                }
+              )
+            ] }),
+            renderingMode === "post-only" && !isDesignPostType && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  "editor-visual-editor__post-title-wrapper",
+                  // The following class is only here for backward compatibility
+                  // some themes might be using it to style the post title.
+                  "edit-post-visual-editor__post-title-wrapper",
+                  {
+                    "has-global-padding": hasRootPaddingAwareAlignments
+                  }
+                ),
+                contentEditable: false,
+                ref: observeTypingRef,
+                style: {
+                  // This is using inline styles
+                  // so it's applied for both iframed and non iframed editors.
+                  marginTop: "4rem"
+                },
+                children: /* @__PURE__ */ jsx(PostTitle, { ref: titleRef })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              RecursionProvider,
+              {
+                blockName: wrapperBlockName,
+                uniqueId: wrapperUniqueId,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    BlockList,
+                    {
+                      className: clsx(
+                        "is-" + deviceType.toLowerCase() + "-preview",
+                        renderingMode !== "post-only" || isDesignPostType ? "wp-site-blocks" : `${blockListLayoutClass} wp-block-post-content`,
+                        // Ensure root level blocks receive default/flow blockGap styling rules.
+                        {
+                          "has-global-padding": renderingMode === "post-only" && !isDesignPostType && hasRootPaddingAwareAlignments
+                        }
+                      ),
+                      layout: blockListLayout,
+                      dropZoneElement: (
+                        // When iframed, pass in the html element of the iframe to
+                        // ensure the drop zone extends to the edges of the iframe.
+                        disableIframe ? localRef.current : localRef.current?.parentNode
+                      ),
+                      __unstableDisableDropZone: (
+                        // In template preview mode, disable drop zones at the root of the template.
+                        renderingMode === "template-locked" ? true : false
+                      )
+                    }
+                  ),
+                  renderingMode === "template-locked" && /* @__PURE__ */ jsx(
+                    EditTemplateBlocksNotification,
+                    {
+                      contentRef: localRef
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
 }
-export default VisualEditor;
-//# sourceMappingURL=index.js.map
+var visual_editor_default = VisualEditor;
+export {
+  visual_editor_default as default
+};
+//# sourceMappingURL=index.js.map