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

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

@@ -1,68 +1,74 @@
 "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 visual_editor_exports = {};
+__export(visual_editor_exports, {
+  default: () => visual_editor_default
 });
-exports.default = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _blockEditor = require("@wordpress/block-editor");
-var _element = require("@wordpress/element");
-var _data = require("@wordpress/data");
-var _blocks = require("@wordpress/blocks");
-var _coreData = require("@wordpress/core-data");
-var _compose = require("@wordpress/compose");
-var _postTitle = _interopRequireDefault(require("../post-title"));
-var _store = require("../../store");
-var _lockUnlock = require("../../lock-unlock");
-var _editTemplateBlocksNotification = _interopRequireDefault(require("./edit-template-blocks-notification"));
-var _resizableEditor = _interopRequireDefault(require("../resizable-editor"));
-var _useSelectNearestEditableBlock = _interopRequireDefault(require("./use-select-nearest-editable-block"));
-var _constants = require("../../store/constants");
-var _useZoomOutModeExit = require("./use-zoom-out-mode-exit");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(visual_editor_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_block_editor = require("@wordpress/block-editor");
+var import_element = require("@wordpress/element");
+var import_data = require("@wordpress/data");
+var import_blocks = require("@wordpress/blocks");
+var import_core_data = require("@wordpress/core-data");
+var import_compose = require("@wordpress/compose");
+var import_post_title = __toESM(require("../post-title"));
+var import_store = require("../../store");
+var import_lock_unlock = require("../../lock-unlock");
+var import_edit_template_blocks_notification = __toESM(require("./edit-template-blocks-notification"));
+var import_resizable_editor = __toESM(require("../resizable-editor"));
+var import_use_select_nearest_editable_block = __toESM(require("./use-select-nearest-editable-block"));
+var import_constants = require("../../store/constants");
+var import_use_zoom_out_mode_exit = require("./use-zoom-out-mode-exit");
 const {
   LayoutStyle,
   useLayoutClasses,
   useLayoutStyles,
   ExperimentalBlockCanvas: BlockCanvas,
   useFlashEditableBlocks
-} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
-
-/**
- * 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 = [_constants.PATTERN_POST_TYPE, _constants.TEMPLATE_POST_TYPE, _constants.NAVIGATION_POST_TYPE, _constants.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.
- */
+} = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+const DESIGN_POST_TYPES = [
+  import_constants.PATTERN_POST_TYPE,
+  import_constants.TEMPLATE_POST_TYPE,
+  import_constants.NAVIGATION_POST_TYPE,
+  import_constants.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;
       }
@@ -71,7 +77,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;
     }
   }
@@ -86,11 +92,7 @@ function VisualEditor({
   contentRef,
   className
 }) {
-  const [contentHeight, setContentHeight] = (0, _element.useState)('');
-  const effectContentHeight = (0, _compose.useResizeObserver)(([entry]) => {
-    setContentHeight(entry.borderBoxSize[0].blockSize);
-  });
-  const isMobileViewport = (0, _compose.useViewportMatch)('small', '<');
+  const isMobileViewport = (0, import_compose.useViewportMatch)("small", "<");
   const {
     renderingMode,
     postContentAttributes,
@@ -102,7 +104,7 @@ function VisualEditor({
     isDesignPostType,
     postType,
     isPreview
-  } = (0, _data.useSelect)(select => {
+  } = (0, import_data.useSelect)((select) => {
     const {
       getCurrentPostId,
       getCurrentPostType,
@@ -110,31 +112,32 @@ function VisualEditor({
       getEditorSettings,
       getRenderingMode,
       getDeviceType
-    } = select(_store.store);
-    const {
-      getPostType,
-      getEditedEntityRecord
-    } = select(_coreData.store);
+    } = select(import_store.store);
+    const { getPostType, getEditedEntityRecord } = select(import_core_data.store);
     const postTypeSlug = getCurrentPostType();
     const _renderingMode = getRenderingMode();
     let _wrapperBlockName;
-    if (postTypeSlug === _constants.PATTERN_POST_TYPE) {
-      _wrapperBlockName = 'core/block';
-    } else if (_renderingMode === 'post-only') {
-      _wrapperBlockName = 'core/post-content';
+    if (postTypeSlug === import_constants.PATTERN_POST_TYPE) {
+      _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', _constants.TEMPLATE_POST_TYPE, currentTemplateId) : undefined;
+    const template = currentTemplateId ? getEditedEntityRecord(
+      "postType",
+      import_constants.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(),
@@ -143,19 +146,16 @@ function VisualEditor({
       isPreview: editorSettings.isPreviewMode
     };
   }, []);
-  const {
-    isCleanNewPost
-  } = (0, _data.useSelect)(_store.store);
+  const { isCleanNewPost } = (0, import_data.useSelect)(import_store.store);
   const {
     hasRootPaddingAwareAlignments,
     themeHasDisabledLayoutStyles,
     themeSupportsLayout,
     isZoomedOut
-  } = (0, _data.useSelect)(select => {
-    const {
-      getSettings,
-      isZoomOut: _isZoomOut
-    } = (0, _lockUnlock.unlock)(select(_blockEditor.store));
+  } = (0, import_data.useSelect)((select) => {
+    const { getSettings, isZoomOut: _isZoomOut } = (0, import_lock_unlock.unlock)(
+      select(import_block_editor.store)
+    );
     const _settings = getSettings();
     return {
       themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
@@ -164,203 +164,242 @@ function VisualEditor({
       isZoomedOut: _isZoomOut()
     };
   }, []);
-  const deviceStyles = (0, _blockEditor.__experimentalUseResizeCanvas)(deviceType);
-  const [globalLayoutSettings] = (0, _blockEditor.useSettings)('layout');
-
-  // fallbackLayout is used if there is no Post Content,
-  // and for Post Title.
-  const fallbackLayout = (0, _element.useMemo)(() => {
-    if (renderingMode !== 'post-only' || isDesignPostType) {
-      return {
-        type: 'default'
-      };
+  const deviceStyles = (0, import_block_editor.__experimentalUseResizeCanvas)(deviceType);
+  const [globalLayoutSettings] = (0, import_block_editor.useSettings)("layout");
+  const fallbackLayout = (0, import_element.useMemo)(() => {
+    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]);
-  const newestPostContentAttributes = (0, _element.useMemo)(() => {
+    return { type: "default" };
+  }, [
+    renderingMode,
+    themeSupportsLayout,
+    globalLayoutSettings,
+    isDesignPostType
+  ]);
+  const newestPostContentAttributes = (0, import_element.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 : '';
-    return getPostContentAttributes((0, _blocks.parse)(parseableContent)) || {};
-  }, [editedPostTemplate?.content, editedPostTemplate?.blocks, postContentAttributes]);
-  const hasPostContentAtRootLevel = (0, _element.useMemo)(() => {
+    const parseableContent = typeof editedPostTemplate?.content === "string" ? editedPostTemplate?.content : "";
+    return getPostContentAttributes((0, import_blocks.parse)(parseableContent)) || {};
+  }, [
+    editedPostTemplate?.content,
+    editedPostTemplate?.blocks,
+    postContentAttributes
+  ]);
+  const hasPostContentAtRootLevel = (0, import_element.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 : '';
-    return checkForPostContentAtRootLevel((0, _blocks.parse)(parseableContent)) || false;
+    const parseableContent = typeof editedPostTemplate?.content === "string" ? editedPostTemplate?.content : "";
+    return checkForPostContentAtRootLevel((0, import_blocks.parse)(parseableContent)) || false;
   }, [editedPostTemplate?.content, editedPostTemplate?.blocks]);
-  const {
-    layout = {},
-    align = ''
-  } = newestPostContentAttributes || {};
-  const postContentLayoutClasses = useLayoutClasses(newestPostContentAttributes, 'core/post-content');
-  const blockListLayoutClass = (0, _clsx.default)({
-    '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 postContentLayout = (0, _element.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.
+  const { layout = {}, align = "" } = newestPostContentAttributes || {};
+  const postContentLayoutClasses = useLayoutClasses(
+    newestPostContentAttributes,
+    "core/post-content"
+  );
+  const blockListLayoutClass = (0, import_clsx.default)(
+    {
+      "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 = (0, import_element.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
+  ]);
   const blockListLayout = postContentAttributes ? postContentLayout : fallbackLayout;
-  const postEditorLayout = blockListLayout?.type === 'default' && !hasPostContentAtRootLevel ? fallbackLayout : blockListLayout;
-  const observeTypingRef = (0, _blockEditor.__unstableUseTypingObserver)();
-  const titleRef = (0, _element.useRef)();
-  (0, _element.useEffect)(() => {
+  const postEditorLayout = blockListLayout?.type === "default" && !hasPostContentAtRootLevel ? fallbackLayout : blockListLayout;
+  const observeTypingRef = (0, import_block_editor.__unstableUseTypingObserver)();
+  const titleRef = (0, import_element.useRef)();
+  (0, import_element.useEffect)(() => {
     if (!autoFocus || !isCleanNewPost()) {
       return;
     }
     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 === _constants.NAVIGATION_POST_TYPE;
-  const enableResizing = [_constants.NAVIGATION_POST_TYPE, _constants.TEMPLATE_PART_POST_TYPE, _constants.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 = [
+    import_constants.NAVIGATION_POST_TYPE,
+    import_constants.TEMPLATE_PART_POST_TYPE,
+    import_constants.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 = (0, _element.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;' : ''}}`
-    }];
+  const iframeStyles = (0, import_element.useMemo)(() => {
+    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 = (0, _element.useRef)();
-  const typewriterRef = (0, _blockEditor.__unstableUseTypewriter)();
-  contentRef = (0, _compose.useMergeRefs)([localRef, contentRef, renderingMode === 'post-only' ? typewriterRef : null, useFlashEditableBlocks({
-    isEnabled: renderingMode === 'template-locked'
-  }), (0, _useSelectNearestEditableBlock.default)({
-    isEnabled: renderingMode === 'template-locked'
-  }), (0, _useZoomOutModeExit.useZoomOutModeExit)(),
-  // Avoid resize listeners when not needed, these will trigger
-  // unnecessary re-renders when animating the iframe width.
-  enableResizing ? effectContentHeight : null]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _clsx.default)('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
+  const localRef = (0, import_element.useRef)();
+  const typewriterRef = (0, import_block_editor.__unstableUseTypewriter)();
+  contentRef = (0, import_compose.useMergeRefs)([
+    localRef,
+    contentRef,
+    renderingMode === "post-only" ? typewriterRef : null,
+    useFlashEditableBlocks({
+      isEnabled: renderingMode === "template-locked"
+    }),
+    (0, import_use_select_nearest_editable_block.default)({
+      isEnabled: renderingMode === "template-locked"
     }),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_resizableEditor.default, {
-      enableResizing: enableResizing,
-      height: contentHeight && !forceFullHeight ? contentHeight : '100%',
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BlockCanvas, {
-        shouldIframe: !disableIframe,
-        contentRef: contentRef,
-        styles: iframeStyles,
-        height: "100%",
-        iframeProps: {
-          ...iframeProps,
-          style: {
-            ...iframeProps?.style,
-            ...deviceStyles
-          }
-        },
-        children: [themeSupportsLayout && !themeHasDisabledLayoutStyles && renderingMode === 'post-only' && !isDesignPostType && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LayoutStyle, {
-            selector: ".editor-visual-editor__post-title-wrapper",
-            layout: fallbackLayout
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LayoutStyle, {
-            selector: ".block-editor-block-list__layout.is-root-container",
-            layout: postEditorLayout
-          }), align && /*#__PURE__*/(0, _jsxRuntime.jsx)(LayoutStyle, {
-            css: alignCSS
-          }), postContentLayoutStyles && /*#__PURE__*/(0, _jsxRuntime.jsx)(LayoutStyle, {
-            layout: postContentLayout,
-            css: postContentLayoutStyles
-          })]
-        }), renderingMode === 'post-only' && !isDesignPostType && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _clsx.default)('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'
+    (0, import_use_zoom_out_mode_exit.useZoomOutModeExit)()
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_clsx.default)(
+        "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__ */ (0, import_jsx_runtime.jsx)(import_resizable_editor.default, { enableResizing, height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        BlockCanvas,
+        {
+          shouldIframe: !disableIframe,
+          contentRef,
+          styles: iframeStyles,
+          height: "100%",
+          iframeProps: {
+            ...iframeProps,
+            style: {
+              ...iframeProps?.style,
+              ...deviceStyles
+            }
           },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_postTitle.default, {
-            ref: titleRef
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.RecursionProvider, {
-          blockName: wrapperBlockName,
-          uniqueId: wrapperUniqueId,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockList, {
-            className: (0, _clsx.default)('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__*/(0, _jsxRuntime.jsx)(_editTemplateBlocksNotification.default, {
-            contentRef: localRef
-          })]
-        })]
-      })
-    })
-  });
+          children: [
+            themeSupportsLayout && !themeHasDisabledLayoutStyles && renderingMode === "post-only" && !isDesignPostType && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                LayoutStyle,
+                {
+                  selector: ".editor-visual-editor__post-title-wrapper",
+                  layout: fallbackLayout
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                LayoutStyle,
+                {
+                  selector: ".block-editor-block-list__layout.is-root-container",
+                  layout: postEditorLayout
+                }
+              ),
+              align && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LayoutStyle, { css: alignCSS }),
+              postContentLayoutStyles && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                LayoutStyle,
+                {
+                  layout: postContentLayout,
+                  css: postContentLayoutStyles
+                }
+              )
+            ] }),
+            renderingMode === "post-only" && !isDesignPostType && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: (0, import_clsx.default)(
+                  "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__ */ (0, import_jsx_runtime.jsx)(import_post_title.default, { ref: titleRef })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_block_editor.RecursionProvider,
+              {
+                blockName: wrapperBlockName,
+                uniqueId: wrapperUniqueId,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_block_editor.BlockList,
+                    {
+                      className: (0, import_clsx.default)(
+                        "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__ */ (0, import_jsx_runtime.jsx)(
+                    import_edit_template_blocks_notification.default,
+                    {
+                      contentRef: localRef
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
 }
-var _default = exports.default = VisualEditor;
-//# sourceMappingURL=index.js.map
+var visual_editor_default = VisualEditor;
+//# sourceMappingURL=index.js.map