@wordpress/edit-post 7.24.1 → 7.25.0

package/build/components/sidebar/settings-sidebar/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.sidebars = exports.default = void 0;
 var _react = require("react");
 var _blockEditor = require("@wordpress/block-editor");
 var _data = require("@wordpress/data");
@@ -13,6 +13,7 @@ var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
 var _interface = require("@wordpress/interface");
 var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
+var _editor = require("@wordpress/editor");
 var _settingsHeader = _interopRequireDefault(require("../settings-header"));
 var _postStatus = _interopRequireDefault(require("../post-status"));
 var _lastRevision = _interopRequireDefault(require("../last-revision"));
@@ -26,6 +27,8 @@ var _pluginDocumentSettingPanel = _interopRequireDefault(require("../plugin-docu
 var _pluginSidebar = _interopRequireDefault(require("../plugin-sidebar"));
 var _templateSummary = _interopRequireDefault(require("../template-summary"));
 var _store = require("../../../store");
+var _components = require("@wordpress/components");
+var _lockUnlock = require("../../../lock-unlock");
 /**
  * WordPress dependencies
  */
@@ -34,13 +37,60 @@ var _store = require("../../../store");
  * Internal dependencies
  */
 
+const {
+  Tabs
+} = (0, _lockUnlock.unlock)(_components.privateApis);
 const SIDEBAR_ACTIVE_BY_DEFAULT = _element.Platform.select({
   web: true,
   native: false
 });
+const sidebars = {
+  document: 'edit-post/document',
+  block: 'edit-post/block'
+};
+exports.sidebars = sidebars;
+const SidebarContent = ({
+  sidebarName,
+  keyboardShortcut,
+  isTemplateMode
+}) => {
+  // Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we
+  // need to forward the `Tabs` context so it can be passed through the
+  // underlying slot/fill.
+  const tabsContextValue = (0, _element.useContext)(Tabs.Context);
+  return (0, _react.createElement)(_pluginSidebar.default, {
+    identifier: sidebarName,
+    header: (0, _react.createElement)(Tabs.Context.Provider, {
+      value: tabsContextValue
+    }, (0, _react.createElement)(_settingsHeader.default, null)),
+    closeLabel: (0, _i18n.__)('Close Settings')
+    // This classname is added so we can apply a corrective negative
+    // margin to the panel.
+    // see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049
+    ,
+    className: "edit-post-sidebar__panel",
+    headerClassName: "edit-post-sidebar__panel-tabs"
+    /* translators: button label text should, if possible, be under 16 characters. */,
+    title: (0, _i18n.__)('Settings'),
+    toggleShortcut: keyboardShortcut,
+    icon: (0, _i18n.isRTL)() ? _icons.drawerLeft : _icons.drawerRight,
+    isActiveByDefault: SIDEBAR_ACTIVE_BY_DEFAULT
+  }, (0, _react.createElement)(Tabs.Context.Provider, {
+    value: tabsContextValue
+  }, (0, _react.createElement)(Tabs.TabPanel, {
+    tabId: sidebars.document,
+    focusable: false
+  }, !isTemplateMode && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_postStatus.default, null), (0, _react.createElement)(_pluginDocumentSettingPanel.default.Slot, null), (0, _react.createElement)(_lastRevision.default, null), (0, _react.createElement)(_postTaxonomies.default, null), (0, _react.createElement)(_featuredImage.default, null), (0, _react.createElement)(_postExcerpt.default, null), (0, _react.createElement)(_discussionPanel.default, null), (0, _react.createElement)(_pageAttributes.default, null), (0, _react.createElement)(_metaBoxes.default, {
+    location: "side"
+  })), isTemplateMode && (0, _react.createElement)(_templateSummary.default, null)), (0, _react.createElement)(Tabs.TabPanel, {
+    tabId: sidebars.block,
+    focusable: false
+  }, (0, _react.createElement)(_blockEditor.BlockInspector, null))));
+};
 const SettingsSidebar = () => {
   const {
     sidebarName,
+    isSettingsSidebarActive,
     keyboardShortcut,
     isTemplateMode
   } = (0, _data.useSelect)(select => {
@@ -52,34 +102,44 @@ const SettingsSidebar = () => {
     // should contain the sidebar that will be active when the toggle button is pressed. If a block
     // is selected, that should be edit-post/block otherwise it's edit-post/document.
     let sidebar = select(_interface.store).getActiveComplementaryArea(_store.store.name);
-    if (!['edit-post/document', 'edit-post/block'].includes(sidebar)) {
+    let isSettingsSidebar = true;
+    if (![sidebars.document, sidebars.block].includes(sidebar)) {
+      isSettingsSidebar = false;
       if (select(_blockEditor.store).getBlockSelectionStart()) {
-        sidebar = 'edit-post/block';
+        sidebar = sidebars.block;
       }
-      sidebar = 'edit-post/document';
+      sidebar = sidebars.document;
     }
     const shortcut = select(_keyboardShortcuts.store).getShortcutRepresentation('core/edit-post/toggle-sidebar');
     return {
       sidebarName: sidebar,
+      isSettingsSidebarActive: isSettingsSidebar,
       keyboardShortcut: shortcut,
-      isTemplateMode: select(_store.store).isEditingTemplate()
+      isTemplateMode: select(_editor.store).getRenderingMode() === 'template-only'
     };
   }, []);
-  return (0, _react.createElement)(_pluginSidebar.default, {
-    identifier: sidebarName,
-    header: (0, _react.createElement)(_settingsHeader.default, {
-      sidebarName: sidebarName
-    }),
-    closeLabel: (0, _i18n.__)('Close Settings'),
-    headerClassName: "edit-post-sidebar__panel-tabs"
-    /* translators: button label text should, if possible, be under 16 characters. */,
-    title: (0, _i18n.__)('Settings'),
-    toggleShortcut: keyboardShortcut,
-    icon: (0, _i18n.isRTL)() ? _icons.drawerLeft : _icons.drawerRight,
-    isActiveByDefault: SIDEBAR_ACTIVE_BY_DEFAULT
-  }, !isTemplateMode && sidebarName === 'edit-post/document' && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_postStatus.default, null), (0, _react.createElement)(_pluginDocumentSettingPanel.default.Slot, null), (0, _react.createElement)(_lastRevision.default, null), (0, _react.createElement)(_postTaxonomies.default, null), (0, _react.createElement)(_featuredImage.default, null), (0, _react.createElement)(_postExcerpt.default, null), (0, _react.createElement)(_discussionPanel.default, null), (0, _react.createElement)(_pageAttributes.default, null), (0, _react.createElement)(_metaBoxes.default, {
-    location: "side"
-  })), isTemplateMode && sidebarName === 'edit-post/document' && (0, _react.createElement)(_templateSummary.default, null), sidebarName === 'edit-post/block' && (0, _react.createElement)(_blockEditor.BlockInspector, null));
+  const {
+    openGeneralSidebar
+  } = (0, _data.useDispatch)(_store.store);
+  const onTabSelect = (0, _element.useCallback)(newSelectedTabId => {
+    if (!!newSelectedTabId) {
+      openGeneralSidebar(newSelectedTabId);
+    }
+  }, [openGeneralSidebar]);
+  return (0, _react.createElement)(Tabs
+  // Due to how this component is controlled (via a value from the
+  // `interfaceStore`), when the sidebar closes the currently selected
+  // tab can't be found. This causes the component to continuously reset
+  // the selection to `null` in an infinite loop.Proactively setting
+  // the selected tab to `null` avoids that.
+  , {
+    selectedTabId: isSettingsSidebarActive ? sidebarName : null,
+    onSelect: onTabSelect
+  }, (0, _react.createElement)(SidebarContent, {
+    sidebarName: sidebarName,
+    keyboardShortcut: keyboardShortcut,
+    isTemplateMode: isTemplateMode
+  }));
 };
 var _default = SettingsSidebar;
 exports.default = _default;

package/build/components/sidebar/settings-sidebar/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_blockEditor","require","_data","_element","_i18n","_icons","_interface","_keyboardShortcuts","_settingsHeader","_interopRequireDefault","_postStatus","_lastRevision","_postTaxonomies","_featuredImage","_postExcerpt","_discussionPanel","_pageAttributes","_metaBoxes","_pluginDocumentSettingPanel","_pluginSidebar","_templateSummary","_store","SIDEBAR_ACTIVE_BY_DEFAULT","Platform","select","web","native","SettingsSidebar","sidebarName","keyboardShortcut","isTemplateMode","useSelect","sidebar","interfaceStore","getActiveComplementaryArea","editPostStore","name","includes","blockEditorStore","getBlockSelectionStart","shortcut","keyboardShortcutsStore","getShortcutRepresentation","isEditingTemplate","_react","createElement","default","identifier","header","closeLabel","__","headerClassName","title","toggleShortcut","icon","isRTL","drawerLeft","drawerRight","isActiveByDefault","Fragment","Slot","location","BlockInspector","_default","exports"],"sources":["@wordpress/edit-post/src/components/sidebar/settings-sidebar/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tBlockInspector,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { Platform } from '@wordpress/element';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { drawerLeft, drawerRight } from '@wordpress/icons';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n\n/**\n * Internal dependencies\n */\nimport SettingsHeader from '../settings-header';\nimport PostStatus from '../post-status';\nimport LastRevision from '../last-revision';\nimport PostTaxonomies from '../post-taxonomies';\nimport FeaturedImage from '../featured-image';\nimport PostExcerpt from '../post-excerpt';\nimport DiscussionPanel from '../discussion-panel';\nimport PageAttributes from '../page-attributes';\nimport MetaBoxes from '../../meta-boxes';\nimport PluginDocumentSettingPanel from '../plugin-document-setting-panel';\nimport PluginSidebarEditPost from '../plugin-sidebar';\nimport TemplateSummary from '../template-summary';\nimport { store as editPostStore } from '../../../store';\n\nconst SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {\n\tweb: true,\n\tnative: false,\n} );\n\nconst SettingsSidebar = () => {\n\tconst { sidebarName, keyboardShortcut, isTemplateMode } = useSelect(\n\t\t( select ) => {\n\t\t\t// The settings sidebar is used by the edit-post/document and edit-post/block sidebars.\n\t\t\t// sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.\n\t\t\t// If one of the two sidebars is active the component will contain the content of that sidebar.\n\t\t\t// When neither of the two sidebars is active we can not simply return null, because the PluginSidebarEditPost\n\t\t\t// component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName\n\t\t\t// should contain the sidebar that will be active when the toggle button is pressed. If a block\n\t\t\t// is selected, that should be edit-post/block otherwise it's edit-post/document.\n\t\t\tlet sidebar = select( interfaceStore ).getActiveComplementaryArea(\n\t\t\t\teditPostStore.name\n\t\t\t);\n\t\t\tif (\n\t\t\t\t! [ 'edit-post/document', 'edit-post/block' ].includes(\n\t\t\t\t\tsidebar\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tif ( select( blockEditorStore ).getBlockSelectionStart() ) {\n\t\t\t\t\tsidebar = 'edit-post/block';\n\t\t\t\t}\n\t\t\t\tsidebar = 'edit-post/document';\n\t\t\t}\n\t\t\tconst shortcut = select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );\n\t\t\treturn {\n\t\t\t\tsidebarName: sidebar,\n\t\t\t\tkeyboardShortcut: shortcut,\n\t\t\t\tisTemplateMode: select( editPostStore ).isEditingTemplate(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\treturn (\n\t\t<PluginSidebarEditPost\n\t\t\tidentifier={ sidebarName }\n\t\t\theader={ <SettingsHeader sidebarName={ sidebarName } /> }\n\t\t\tcloseLabel={ __( 'Close Settings' ) }\n\t\t\theaderClassName=\"edit-post-sidebar__panel-tabs\"\n\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\ttitle={ __( 'Settings' ) }\n\t\t\ttoggleShortcut={ keyboardShortcut }\n\t\t\ticon={ isRTL() ? drawerLeft : drawerRight }\n\t\t\tisActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }\n\t\t>\n\t\t\t{ ! isTemplateMode && sidebarName === 'edit-post/document' && (\n\t\t\t\t<>\n\t\t\t\t\t<PostStatus />\n\t\t\t\t\t<PluginDocumentSettingPanel.Slot />\n\t\t\t\t\t<LastRevision />\n\t\t\t\t\t<PostTaxonomies />\n\t\t\t\t\t<FeaturedImage />\n\t\t\t\t\t<PostExcerpt />\n\t\t\t\t\t<DiscussionPanel />\n\t\t\t\t\t<PageAttributes />\n\t\t\t\t\t<MetaBoxes location=\"side\" />\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ isTemplateMode && sidebarName === 'edit-post/document' && (\n\t\t\t\t<TemplateSummary />\n\t\t\t) }\n\t\t\t{ sidebarName === 'edit-post/block' && <BlockInspector /> }\n\t\t</PluginSidebarEditPost>\n\t);\n};\n\nexport default SettingsSidebar;\n"],"mappings":"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"}
+{"version":3,"names":["_blockEditor","require","_data","_element","_i18n","_icons","_interface","_keyboardShortcuts","_editor","_settingsHeader","_interopRequireDefault","_postStatus","_lastRevision","_postTaxonomies","_featuredImage","_postExcerpt","_discussionPanel","_pageAttributes","_metaBoxes","_pluginDocumentSettingPanel","_pluginSidebar","_templateSummary","_store","_components","_lockUnlock","Tabs","unlock","componentsPrivateApis","SIDEBAR_ACTIVE_BY_DEFAULT","Platform","select","web","native","sidebars","document","block","exports","SidebarContent","sidebarName","keyboardShortcut","isTemplateMode","tabsContextValue","useContext","Context","_react","createElement","default","identifier","header","Provider","value","closeLabel","__","className","headerClassName","title","toggleShortcut","icon","isRTL","drawerLeft","drawerRight","isActiveByDefault","TabPanel","tabId","focusable","Fragment","Slot","location","BlockInspector","SettingsSidebar","isSettingsSidebarActive","useSelect","sidebar","interfaceStore","getActiveComplementaryArea","editPostStore","name","isSettingsSidebar","includes","blockEditorStore","getBlockSelectionStart","shortcut","keyboardShortcutsStore","getShortcutRepresentation","editorStore","getRenderingMode","openGeneralSidebar","useDispatch","onTabSelect","useCallback","newSelectedTabId","selectedTabId","onSelect","_default"],"sources":["@wordpress/edit-post/src/components/sidebar/settings-sidebar/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tBlockInspector,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { Platform, useCallback, useContext } from '@wordpress/element';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { drawerLeft, drawerRight } from '@wordpress/icons';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport { store as editorStore } from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport SettingsHeader from '../settings-header';\nimport PostStatus from '../post-status';\nimport LastRevision from '../last-revision';\nimport PostTaxonomies from '../post-taxonomies';\nimport FeaturedImage from '../featured-image';\nimport PostExcerpt from '../post-excerpt';\nimport DiscussionPanel from '../discussion-panel';\nimport PageAttributes from '../page-attributes';\nimport MetaBoxes from '../../meta-boxes';\nimport PluginDocumentSettingPanel from '../plugin-document-setting-panel';\nimport PluginSidebarEditPost from '../plugin-sidebar';\nimport TemplateSummary from '../template-summary';\nimport { store as editPostStore } from '../../../store';\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\nimport { unlock } from '../../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nconst SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {\n\tweb: true,\n\tnative: false,\n} );\nexport const sidebars = {\n\tdocument: 'edit-post/document',\n\tblock: 'edit-post/block',\n};\n\nconst SidebarContent = ( {\n\tsidebarName,\n\tkeyboardShortcut,\n\tisTemplateMode,\n} ) => {\n\t// Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we\n\t// need to forward the `Tabs` context so it can be passed through the\n\t// underlying slot/fill.\n\tconst tabsContextValue = useContext( Tabs.Context );\n\n\treturn (\n\t\t<PluginSidebarEditPost\n\t\t\tidentifier={ sidebarName }\n\t\t\theader={\n\t\t\t\t<Tabs.Context.Provider value={ tabsContextValue }>\n\t\t\t\t\t<SettingsHeader />\n\t\t\t\t</Tabs.Context.Provider>\n\t\t\t}\n\t\t\tcloseLabel={ __( 'Close Settings' ) }\n\t\t\t// This classname is added so we can apply a corrective negative\n\t\t\t// margin to the panel.\n\t\t\t// see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049\n\t\t\tclassName=\"edit-post-sidebar__panel\"\n\t\t\theaderClassName=\"edit-post-sidebar__panel-tabs\"\n\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\ttitle={ __( 'Settings' ) }\n\t\t\ttoggleShortcut={ keyboardShortcut }\n\t\t\ticon={ isRTL() ? drawerLeft : drawerRight }\n\t\t\tisActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }\n\t\t>\n\t\t\t<Tabs.Context.Provider value={ tabsContextValue }>\n\t\t\t\t<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>\n\t\t\t\t\t{ ! isTemplateMode && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<PostStatus />\n\t\t\t\t\t\t\t<PluginDocumentSettingPanel.Slot />\n\t\t\t\t\t\t\t<LastRevision />\n\t\t\t\t\t\t\t<PostTaxonomies />\n\t\t\t\t\t\t\t<FeaturedImage />\n\t\t\t\t\t\t\t<PostExcerpt />\n\t\t\t\t\t\t\t<DiscussionPanel />\n\t\t\t\t\t\t\t<PageAttributes />\n\t\t\t\t\t\t\t<MetaBoxes location=\"side\" />\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isTemplateMode && <TemplateSummary /> }\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>\n\t\t\t\t\t<BlockInspector />\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t</Tabs.Context.Provider>\n\t\t</PluginSidebarEditPost>\n\t);\n};\n\nconst SettingsSidebar = () => {\n\tconst {\n\t\tsidebarName,\n\t\tisSettingsSidebarActive,\n\t\tkeyboardShortcut,\n\t\tisTemplateMode,\n\t} = useSelect( ( select ) => {\n\t\t// The settings sidebar is used by the edit-post/document and edit-post/block sidebars.\n\t\t// sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.\n\t\t// If one of the two sidebars is active the component will contain the content of that sidebar.\n\t\t// When neither of the two sidebars is active we can not simply return null, because the PluginSidebarEditPost\n\t\t// component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName\n\t\t// should contain the sidebar that will be active when the toggle button is pressed. If a block\n\t\t// is selected, that should be edit-post/block otherwise it's edit-post/document.\n\t\tlet sidebar = select( interfaceStore ).getActiveComplementaryArea(\n\t\t\teditPostStore.name\n\t\t);\n\t\tlet isSettingsSidebar = true;\n\t\tif ( ! [ sidebars.document, sidebars.block ].includes( sidebar ) ) {\n\t\t\tisSettingsSidebar = false;\n\t\t\tif ( select( blockEditorStore ).getBlockSelectionStart() ) {\n\t\t\t\tsidebar = sidebars.block;\n\t\t\t}\n\t\t\tsidebar = sidebars.document;\n\t\t}\n\t\tconst shortcut = select(\n\t\t\tkeyboardShortcutsStore\n\t\t).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );\n\t\treturn {\n\t\t\tsidebarName: sidebar,\n\t\t\tisSettingsSidebarActive: isSettingsSidebar,\n\t\t\tkeyboardShortcut: shortcut,\n\t\t\tisTemplateMode:\n\t\t\t\tselect( editorStore ).getRenderingMode() === 'template-only',\n\t\t};\n\t}, [] );\n\n\tconst { openGeneralSidebar } = useDispatch( editPostStore );\n\n\tconst onTabSelect = useCallback(\n\t\t( newSelectedTabId ) => {\n\t\t\tif ( !! newSelectedTabId ) {\n\t\t\t\topenGeneralSidebar( newSelectedTabId );\n\t\t\t}\n\t\t},\n\t\t[ openGeneralSidebar ]\n\t);\n\n\treturn (\n\t\t<Tabs\n\t\t\t// Due to how this component is controlled (via a value from the\n\t\t\t// `interfaceStore`), when the sidebar closes the currently selected\n\t\t\t// tab can't be found. This causes the component to continuously reset\n\t\t\t// the selection to `null` in an infinite loop.Proactively setting\n\t\t\t// the selected tab to `null` avoids that.\n\t\t\tselectedTabId={ isSettingsSidebarActive ? sidebarName : null }\n\t\t\tonSelect={ onTabSelect }\n\t\t>\n\t\t\t<SidebarContent\n\t\t\t\tsidebarName={ sidebarName }\n\t\t\t\tkeyboardShortcut={ keyboardShortcut }\n\t\t\t\tisTemplateMode={ isTemplateMode }\n\t\t\t/>\n\t\t</Tabs>\n\t);\n};\n\nexport default SettingsSidebar;\n"],"mappings":"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"}

package/build/components/start-page-options/index.js

@@ -89,13 +89,13 @@ function StartPageOptions() {
   const [isClosed, setIsClosed] = (0, _element.useState)(false);
   const shouldEnableModal = (0, _data.useSelect)(select => {
     const {
-      isCleanNewPost
+      isCleanNewPost,
+      getRenderingMode
     } = select(_editor.store);
     const {
-      isEditingTemplate,
       isFeatureActive
     } = select(_store.store);
-    return !isEditingTemplate() && !isFeatureActive('welcomeGuide') && isCleanNewPost();
+    return getRenderingMode() === 'post-only' && !isFeatureActive('welcomeGuide') && isCleanNewPost();
   }, []);
   if (!shouldEnableModal || isClosed) {
     return null;

package/build/components/start-page-options/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_i18n","_element","_blockEditor","_data","_compose","_editor","_store","useStartPatterns","blockPatternsWithPostContentBlockType","postType","useSelect","select","getPatternsByBlockTypes","blockEditorStore","getCurrentPostType","editorStore","useMemo","filter","pattern","postTypes","Array","isArray","includes","PatternSelection","blockPatterns","onChoosePattern","shownBlockPatterns","useAsyncList","resetEditorBlocks","useDispatch","_react","createElement","__experimentalBlockPatternsList","shownPatterns","onClickPattern","_pattern","blocks","StartPageOptionsModal","onClose","startPatterns","hasStartPattern","length","Modal","className","title","__","isFullScreen","onRequestClose","StartPageOptions","isClosed","setIsClosed","useState","shouldEnableModal","isCleanNewPost","isEditingTemplate","isFeatureActive","editPostStore"],"sources":["@wordpress/edit-post/src/components/start-page-options/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Modal } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState, useMemo } from '@wordpress/element';\nimport {\n\tstore as blockEditorStore,\n\t__experimentalBlockPatternsList as BlockPatternsList,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useAsyncList } from '@wordpress/compose';\nimport { store as editorStore } from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport { store as editPostStore } from '../../store';\n\nfunction useStartPatterns() {\n\t// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,\n\t// and it has no postTypes declared and the current post type is page or if\n\t// the current post type is part of the postTypes declared.\n\tconst { blockPatternsWithPostContentBlockType, postType } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getPatternsByBlockTypes } = select( blockEditorStore );\n\t\t\tconst { getCurrentPostType } = select( editorStore );\n\t\t\treturn {\n\t\t\t\tblockPatternsWithPostContentBlockType:\n\t\t\t\t\tgetPatternsByBlockTypes( 'core/post-content' ),\n\t\t\t\tpostType: getCurrentPostType(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\treturn useMemo( () => {\n\t\t// filter patterns without postTypes declared if the current postType is page\n\t\t// or patterns that declare the current postType in its post type array.\n\t\treturn blockPatternsWithPostContentBlockType.filter( ( pattern ) => {\n\t\t\treturn (\n\t\t\t\t( postType === 'page' && ! pattern.postTypes ) ||\n\t\t\t\t( Array.isArray( pattern.postTypes ) &&\n\t\t\t\t\tpattern.postTypes.includes( postType ) )\n\t\t\t);\n\t\t} );\n\t}, [ postType, blockPatternsWithPostContentBlockType ] );\n}\n\nfunction PatternSelection( { blockPatterns, onChoosePattern } ) {\n\tconst shownBlockPatterns = useAsyncList( blockPatterns );\n\tconst { resetEditorBlocks } = useDispatch( editorStore );\n\treturn (\n\t\t<BlockPatternsList\n\t\t\tblockPatterns={ blockPatterns }\n\t\t\tshownPatterns={ shownBlockPatterns }\n\t\t\tonClickPattern={ ( _pattern, blocks ) => {\n\t\t\t\tresetEditorBlocks( blocks );\n\t\t\t\tonChoosePattern();\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction StartPageOptionsModal( { onClose } ) {\n\tconst startPatterns = useStartPatterns();\n\tconst hasStartPattern = startPatterns.length > 0;\n\n\tif ( ! hasStartPattern ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"edit-post-start-page-options__modal\"\n\t\t\ttitle={ __( 'Choose a pattern' ) }\n\t\t\tisFullScreen\n\t\t\tonRequestClose={ onClose }\n\t\t>\n\t\t\t<div className=\"edit-post-start-page-options__modal-content\">\n\t\t\t\t<PatternSelection\n\t\t\t\t\tblockPatterns={ startPatterns }\n\t\t\t\t\tonChoosePattern={ onClose }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default function StartPageOptions() {\n\tconst [ isClosed, setIsClosed ] = useState( false );\n\tconst shouldEnableModal = useSelect( ( select ) => {\n\t\tconst { isCleanNewPost } = select( editorStore );\n\t\tconst { isEditingTemplate, isFeatureActive } = select( editPostStore );\n\n\t\treturn (\n\t\t\t! isEditingTemplate() &&\n\t\t\t! isFeatureActive( 'welcomeGuide' ) &&\n\t\t\tisCleanNewPost()\n\t\t);\n\t}, [] );\n\n\tif ( ! shouldEnableModal || isClosed ) {\n\t\treturn null;\n\t}\n\n\treturn <StartPageOptionsModal onClose={ () => setIsClosed( true ) } />;\n}\n"],"mappings":"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"}
+{"version":3,"names":["_components","require","_i18n","_element","_blockEditor","_data","_compose","_editor","_store","useStartPatterns","blockPatternsWithPostContentBlockType","postType","useSelect","select","getPatternsByBlockTypes","blockEditorStore","getCurrentPostType","editorStore","useMemo","filter","pattern","postTypes","Array","isArray","includes","PatternSelection","blockPatterns","onChoosePattern","shownBlockPatterns","useAsyncList","resetEditorBlocks","useDispatch","_react","createElement","__experimentalBlockPatternsList","shownPatterns","onClickPattern","_pattern","blocks","StartPageOptionsModal","onClose","startPatterns","hasStartPattern","length","Modal","className","title","__","isFullScreen","onRequestClose","StartPageOptions","isClosed","setIsClosed","useState","shouldEnableModal","isCleanNewPost","getRenderingMode","isFeatureActive","editPostStore"],"sources":["@wordpress/edit-post/src/components/start-page-options/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Modal } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState, useMemo } from '@wordpress/element';\nimport {\n\tstore as blockEditorStore,\n\t__experimentalBlockPatternsList as BlockPatternsList,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useAsyncList } from '@wordpress/compose';\nimport { store as editorStore } from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport { store as editPostStore } from '../../store';\n\nfunction useStartPatterns() {\n\t// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,\n\t// and it has no postTypes declared and the current post type is page or if\n\t// the current post type is part of the postTypes declared.\n\tconst { blockPatternsWithPostContentBlockType, postType } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getPatternsByBlockTypes } = select( blockEditorStore );\n\t\t\tconst { getCurrentPostType } = select( editorStore );\n\t\t\treturn {\n\t\t\t\tblockPatternsWithPostContentBlockType:\n\t\t\t\t\tgetPatternsByBlockTypes( 'core/post-content' ),\n\t\t\t\tpostType: getCurrentPostType(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\treturn useMemo( () => {\n\t\t// filter patterns without postTypes declared if the current postType is page\n\t\t// or patterns that declare the current postType in its post type array.\n\t\treturn blockPatternsWithPostContentBlockType.filter( ( pattern ) => {\n\t\t\treturn (\n\t\t\t\t( postType === 'page' && ! pattern.postTypes ) ||\n\t\t\t\t( Array.isArray( pattern.postTypes ) &&\n\t\t\t\t\tpattern.postTypes.includes( postType ) )\n\t\t\t);\n\t\t} );\n\t}, [ postType, blockPatternsWithPostContentBlockType ] );\n}\n\nfunction PatternSelection( { blockPatterns, onChoosePattern } ) {\n\tconst shownBlockPatterns = useAsyncList( blockPatterns );\n\tconst { resetEditorBlocks } = useDispatch( editorStore );\n\treturn (\n\t\t<BlockPatternsList\n\t\t\tblockPatterns={ blockPatterns }\n\t\t\tshownPatterns={ shownBlockPatterns }\n\t\t\tonClickPattern={ ( _pattern, blocks ) => {\n\t\t\t\tresetEditorBlocks( blocks );\n\t\t\t\tonChoosePattern();\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction StartPageOptionsModal( { onClose } ) {\n\tconst startPatterns = useStartPatterns();\n\tconst hasStartPattern = startPatterns.length > 0;\n\n\tif ( ! hasStartPattern ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"edit-post-start-page-options__modal\"\n\t\t\ttitle={ __( 'Choose a pattern' ) }\n\t\t\tisFullScreen\n\t\t\tonRequestClose={ onClose }\n\t\t>\n\t\t\t<div className=\"edit-post-start-page-options__modal-content\">\n\t\t\t\t<PatternSelection\n\t\t\t\t\tblockPatterns={ startPatterns }\n\t\t\t\t\tonChoosePattern={ onClose }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n\nexport default function StartPageOptions() {\n\tconst [ isClosed, setIsClosed ] = useState( false );\n\tconst shouldEnableModal = useSelect( ( select ) => {\n\t\tconst { isCleanNewPost, getRenderingMode } = select( editorStore );\n\t\tconst { isFeatureActive } = select( editPostStore );\n\n\t\treturn (\n\t\t\tgetRenderingMode() === 'post-only' &&\n\t\t\t! isFeatureActive( 'welcomeGuide' ) &&\n\t\t\tisCleanNewPost()\n\t\t);\n\t}, [] );\n\n\tif ( ! shouldEnableModal || isClosed ) {\n\t\treturn null;\n\t}\n\n\treturn <StartPageOptionsModal onClose={ () => setIsClosed( true ) } />;\n}\n"],"mappings":"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"}

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

@@ -8,13 +8,9 @@ exports.default = VisualEditor;
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _editor = require("@wordpress/editor");
-var _blockEditor = require("@wordpress/block-editor");
 var _element = require("@wordpress/element");
-var _components = require("@wordpress/components");
 var _data = require("@wordpress/data");
-var _compose = require("@wordpress/compose");
 var _blocks = require("@wordpress/blocks");
-var _coreData = require("@wordpress/core-data");
 var _store = require("../../store");
 var _lockUnlock = require("../../lock-unlock");
 /**
@@ -30,296 +26,63 @@ var _lockUnlock = require("../../lock-unlock");
  */
 
 const {
-  LayoutStyle,
-  useLayoutClasses,
-  useLayoutStyles,
-  ExperimentalBlockCanvas: BlockCanvas
-} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
+  EditorCanvas
+} = (0, _lockUnlock.unlock)(_editor.privateApis);
 const isGutenbergPlugin = process.env.IS_GUTENBERG_PLUGIN ? true : false;
-
-/**
- * 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.
- */
-function getPostContentAttributes(blocks) {
-  for (let i = 0; i < blocks.length; i++) {
-    if (blocks[i].name === 'core/post-content') {
-      return blocks[i].attributes;
-    }
-    if (blocks[i].innerBlocks.length) {
-      const nestedPostContent = getPostContentAttributes(blocks[i].innerBlocks);
-      if (nestedPostContent) {
-        return nestedPostContent;
-      }
-    }
-  }
-}
-function checkForPostContentAtRootLevel(blocks) {
-  for (let i = 0; i < blocks.length; i++) {
-    if (blocks[i].name === 'core/post-content') {
-      return true;
-    }
-  }
-  return false;
-}
 function VisualEditor({
   styles
 }) {
   const {
-    deviceType,
     isWelcomeGuideVisible,
-    isTemplateMode,
-    postContentAttributes,
-    editedPostTemplate = {},
-    wrapperBlockName,
-    wrapperUniqueId,
+    renderingMode,
     isBlockBasedTheme,
     hasV3BlocksOnly
   } = (0, _data.useSelect)(select => {
     const {
-      isFeatureActive,
-      isEditingTemplate,
-      getEditedPostTemplate,
-      __experimentalGetPreviewDeviceType
+      isFeatureActive
     } = select(_store.store);
     const {
-      getCurrentPostId,
-      getCurrentPostType,
-      getEditorSettings
+      getEditorSettings,
+      getRenderingMode
     } = select(_editor.store);
     const {
       getBlockTypes
     } = select(_blocks.store);
-    const _isTemplateMode = isEditingTemplate();
-    const postTypeSlug = getCurrentPostType();
-    let _wrapperBlockName;
-    if (postTypeSlug === 'wp_block') {
-      _wrapperBlockName = 'core/block';
-    } else if (!_isTemplateMode) {
-      _wrapperBlockName = 'core/post-content';
-    }
     const editorSettings = getEditorSettings();
-    const supportsTemplateMode = editorSettings.supportsTemplateMode;
-    const postType = select(_coreData.store).getPostType(postTypeSlug);
-    const canEditTemplate = select(_coreData.store).canUser('create', 'templates');
     return {
-      deviceType: __experimentalGetPreviewDeviceType(),
       isWelcomeGuideVisible: isFeatureActive('welcomeGuide'),
-      isTemplateMode: _isTemplateMode,
-      postContentAttributes: getEditorSettings().postContentAttributes,
-      // Post template fetch returns a 404 on classic themes, which
-      // messes with e2e tests, so check it's a block theme first.
-      editedPostTemplate: postType?.viewable && supportsTemplateMode && canEditTemplate ? getEditedPostTemplate() : undefined,
-      wrapperBlockName: _wrapperBlockName,
-      wrapperUniqueId: getCurrentPostId(),
+      renderingMode: getRenderingMode(),
       isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
       hasV3BlocksOnly: getBlockTypes().every(type => {
         return type.apiVersion >= 3;
       })
     };
   }, []);
-  const {
-    isCleanNewPost
-  } = (0, _data.useSelect)(_editor.store);
   const hasMetaBoxes = (0, _data.useSelect)(select => select(_store.store).hasMetaBoxes(), []);
-  const {
-    hasRootPaddingAwareAlignments,
-    isFocusMode,
-    themeHasDisabledLayoutStyles,
-    themeSupportsLayout
-  } = (0, _data.useSelect)(select => {
-    const _settings = select(_blockEditor.store).getSettings();
-    return {
-      themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
-      themeSupportsLayout: _settings.supportsLayout,
-      isFocusMode: _settings.focusMode,
-      hasRootPaddingAwareAlignments: _settings.__experimentalFeatures?.useRootPaddingAwareAlignments
-    };
-  }, []);
-  const desktopCanvasStyles = {
-    height: '100%',
-    width: '100%',
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    display: 'flex',
-    flexFlow: 'column',
-    // Default background color so that grey
-    // .edit-post-editor-regions__content color doesn't show through.
-    background: 'white'
-  };
-  const templateModeStyles = {
-    ...desktopCanvasStyles,
-    borderRadius: '2px 2px 0 0',
-    border: '1px solid #ddd',
-    borderBottom: 0
-  };
-  const resizedCanvasStyles = (0, _blockEditor.__experimentalUseResizeCanvas)(deviceType, isTemplateMode);
-  const [globalLayoutSettings] = (0, _blockEditor.useSettings)('layout');
-  const previewMode = 'is-' + deviceType.toLowerCase() + '-preview';
-  let animatedStyles = isTemplateMode ? templateModeStyles : desktopCanvasStyles;
-  if (resizedCanvasStyles) {
-    animatedStyles = resizedCanvasStyles;
-  }
   let paddingBottom;
 
   // Add a constant padding for the typewritter effect. When typing at the
   // bottom, there needs to be room to scroll up.
-  if (!hasMetaBoxes && !resizedCanvasStyles && !isTemplateMode) {
+  if (!hasMetaBoxes && renderingMode === 'post-only') {
     paddingBottom = '40vh';
   }
-  const ref = (0, _element.useRef)();
-  const contentRef = (0, _compose.useMergeRefs)([ref, (0, _blockEditor.__unstableUseTypewriter)()]);
-
-  // fallbackLayout is used if there is no Post Content,
-  // and for Post Title.
-  const fallbackLayout = (0, _element.useMemo)(() => {
-    if (isTemplateMode) {
-      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'
-      };
-    }
-    // Set default layout for classic themes so all alignments are supported.
-    return {
-      type: 'default'
-    };
-  }, [isTemplateMode, themeSupportsLayout, globalLayoutSettings]);
-  const newestPostContentAttributes = (0, _element.useMemo)(() => {
-    if (!editedPostTemplate?.content && !editedPostTemplate?.blocks) {
-      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)(() => {
-    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;
-  }, [editedPostTemplate?.content, editedPostTemplate?.blocks]);
-  const {
-    layout = {},
-    align = ''
-  } = newestPostContentAttributes || {};
-  const postContentLayoutClasses = useLayoutClasses(newestPostContentAttributes, 'core/post-content');
-  const blockListLayoutClass = (0, _classnames.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 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)(() => {
-    if (isWelcomeGuideVisible || !isCleanNewPost()) {
-      return;
-    }
-    titleRef?.current?.focus();
-  }, [isWelcomeGuideVisible, isCleanNewPost]);
   styles = (0, _element.useMemo)(() => [...styles, {
     // We should move this in to future to the body.
-    css: `.edit-post-visual-editor__post-title-wrapper{margin-top:4rem}` + (paddingBottom ? `body{padding-bottom:${paddingBottom}}` : '')
-  }], [styles]);
-
-  // 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 isToBeIframed = (hasV3BlocksOnly || isGutenbergPlugin && isBlockBasedTheme) && !hasMetaBoxes || isTemplateMode || deviceType === 'Tablet' || deviceType === 'Mobile';
-  return (0, _react.createElement)(_blockEditor.BlockTools, {
-    __unstableContentRef: ref,
+    css: paddingBottom ? `body{padding-bottom:${paddingBottom}}` : ''
+  }], [styles, paddingBottom]);
+  const isToBeIframed = (hasV3BlocksOnly || isGutenbergPlugin && isBlockBasedTheme) && !hasMetaBoxes || renderingMode === 'template-only';
+  return (0, _react.createElement)("div", {
     className: (0, _classnames.default)('edit-post-visual-editor', {
-      'is-template-mode': isTemplateMode,
+      'is-template-mode': renderingMode === 'template-only',
       'has-inline-canvas': !isToBeIframed
     })
-  }, (0, _react.createElement)(_components.__unstableMotion.div, {
-    className: "edit-post-visual-editor__content-area",
-    animate: {
-      padding: isTemplateMode ? '48px 48px 0' : 0
-    }
-  }, (0, _react.createElement)(_components.__unstableMotion.div, {
-    animate: animatedStyles,
-    initial: desktopCanvasStyles,
-    className: previewMode
-  }, (0, _react.createElement)(BlockCanvas, {
-    shouldIframe: isToBeIframed,
-    contentRef: contentRef,
-    styles: styles,
-    height: "100%"
-  }, themeSupportsLayout && !themeHasDisabledLayoutStyles && !isTemplateMode && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(LayoutStyle, {
-    selector: ".edit-post-visual-editor__post-title-wrapper",
-    layout: fallbackLayout
-  }), (0, _react.createElement)(LayoutStyle, {
-    selector: ".block-editor-block-list__layout.is-root-container",
-    layout: postEditorLayout
-  }), align && (0, _react.createElement)(LayoutStyle, {
-    css: alignCSS
-  }), postContentLayoutStyles && (0, _react.createElement)(LayoutStyle, {
-    layout: postContentLayout,
-    css: postContentLayoutStyles
-  })), !isTemplateMode && (0, _react.createElement)("div", {
-    className: (0, _classnames.default)('edit-post-visual-editor__post-title-wrapper', {
-      'is-focus-mode': isFocusMode,
-      'has-global-padding': hasRootPaddingAwareAlignments
-    }),
-    contentEditable: false,
-    ref: observeTypingRef
-  }, (0, _react.createElement)(_editor.PostTitle, {
-    ref: titleRef
-  })), (0, _react.createElement)(_blockEditor.__experimentalRecursionProvider, {
-    blockName: wrapperBlockName,
-    uniqueId: wrapperUniqueId
-  }, (0, _react.createElement)(_blockEditor.BlockList, {
-    className: isTemplateMode ? 'wp-site-blocks' : `${blockListLayoutClass} wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
+  }, (0, _react.createElement)(EditorCanvas, {
+    disableIframe: !isToBeIframed,
+    styles: styles
+    // We should auto-focus the canvas (title) on load.
+    // eslint-disable-next-line jsx-a11y/no-autofocus
     ,
-
-    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.
-    isToBeIframed ? ref.current?.parentNode : ref.current
-  }))))));
+    autoFocus: !isWelcomeGuideVisible
+  }));
 }
 //# sourceMappingURL=index.js.map