diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/packages/edit-post/src/components/back-button/fullscreen-mode-close.js
similarity index 97%
rename from packages/edit-post/src/components/header/fullscreen-mode-close/index.js
rename to packages/edit-post/src/components/back-button/fullscreen-mode-close.js
index 839802f380e1f3..59694de16cb925 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js
+++ b/packages/edit-post/src/components/back-button/fullscreen-mode-close.js
@@ -22,7 +22,7 @@ import { useReducedMotion } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { store as editPostStore } from '../../../store';
+import { store as editPostStore } from '../../store';
 
 function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 	const { isActive, isRequestingSiteIcon, postType, siteIconUrl } = useSelect(
diff --git a/packages/edit-post/src/components/back-button/index.js b/packages/edit-post/src/components/back-button/index.js
new file mode 100644
index 00000000000000..ecce4623cea493
--- /dev/null
+++ b/packages/edit-post/src/components/back-button/index.js
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { __unstableMotion as motion } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FullscreenModeClose from './fullscreen-mode-close';
+import { unlock } from '../../lock-unlock';
+
+const { BackButton: BackButtonFill } = unlock( editorPrivateApis );
+
+const slideX = {
+	hidden: { x: '-100%' },
+	distractionFreeInactive: { x: 0 },
+	hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
+};
+
+function BackButton( { initialPost } ) {
+	return (
+		<BackButtonFill>
+			<motion.div
+				variants={ slideX }
+				transition={ { type: 'tween', delay: 0.8 } }
+			>
+				<FullscreenModeClose showTooltip initialPost={ initialPost } />
+			</motion.div>
+		</BackButtonFill>
+	);
+}
+
+export default BackButton;
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/back-button/style.scss
similarity index 88%
rename from packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
rename to packages/edit-post/src/components/back-button/style.scss
index 28a108c521bc44..d6455c707fb1d9 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
+++ b/packages/edit-post/src/components/back-button/style.scss
@@ -64,3 +64,18 @@
 		margin-top: -($border-width);
 	}
 }
+
+/**
+ *  Show icon label overrides.
+ */
+.show-icon-labels .editor-header {
+	.edit-post-fullscreen-mode-close.has-icon {
+		width: $header-height;
+		svg {
+			display: block;
+		}
+		&::after {
+			content: none;
+		}
+	}
+}
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/back-button/test/__snapshots__/fullscreen-mode-close.js.snap
similarity index 100%
rename from packages/edit-post/src/components/header/fullscreen-mode-close/test/__snapshots__/index.js.snap
rename to packages/edit-post/src/components/back-button/test/__snapshots__/fullscreen-mode-close.js.snap
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js b/packages/edit-post/src/components/back-button/test/fullscreen-mode-close.js
similarity index 97%
rename from packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js
rename to packages/edit-post/src/components/back-button/test/fullscreen-mode-close.js
index b66d548045ad42..4a549370d0f056 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js
+++ b/packages/edit-post/src/components/back-button/test/fullscreen-mode-close.js
@@ -11,7 +11,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import FullscreenModeClose from '../';
+import FullscreenModeClose from '../fullscreen-mode-close';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
 	// This allows us to tweak the returned value on each test.
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
deleted file mode 100644
index 311279292d8f6a..00000000000000
--- a/packages/edit-post/src/components/header/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
-import { __unstableMotion as motion } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import FullscreenModeClose from './fullscreen-mode-close';
-import PostEditorMoreMenu from './more-menu';
-import MainDashboardButton from './main-dashboard-button';
-import { store as editPostStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const { Header: EditorHeader } = unlock( editorPrivateApis );
-
-const slideX = {
-	hidden: { x: '-100%' },
-	distractionFreeInactive: { x: 0 },
-	hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
-};
-
-function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
-	const { hasActiveMetaboxes } = useSelect( ( select ) => {
-		return {
-			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-		};
-	}, [] );
-
-	return (
-		<EditorHeader
-			forceIsDirty={ hasActiveMetaboxes }
-			setEntitiesSavedStatesCallback={ setEntitiesSavedStatesCallback }
-		>
-			<MainDashboardButton.Slot>
-				<motion.div
-					variants={ slideX }
-					transition={ { type: 'tween', delay: 0.8 } }
-				>
-					<FullscreenModeClose
-						showTooltip
-						initialPost={ initialPost }
-					/>
-				</motion.div>
-			</MainDashboardButton.Slot>
-			<PostEditorMoreMenu />
-		</EditorHeader>
-	);
-}
-
-export default Header;
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
deleted file mode 100644
index 53672eb09e701f..00000000000000
--- a/packages/edit-post/src/components/header/style.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- *  Show icon label overrides.
- */
-.show-icon-labels .editor-header {
-	.edit-post-fullscreen-mode-close.has-icon {
-		width: $header-height;
-		svg {
-			display: block;
-		}
-		&::after {
-			content: none;
-		}
-	}
-}
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 0444b7f7293784..b79cefa096625d 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -10,24 +10,19 @@ import {
 	AutosaveMonitor,
 	LocalAutosaveMonitor,
 	UnsavedChangesWarning,
-	EditorNotices,
 	EditorKeyboardShortcutsRegister,
-	EditorSnackbars,
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	BlockBreadcrumb,
-	BlockToolbar,
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { useState, useCallback, useMemo } from '@wordpress/element';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { __, sprintf } from '@wordpress/i18n';
+import { useCallback, useMemo } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { privateApis as commandsPrivateApis } from '@wordpress/commands';
@@ -38,55 +33,54 @@ import { addQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import VisualEditor from '../visual-editor';
+import BackButton from '../back-button';
 import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
 import InitPatternModal from '../init-pattern-modal';
 import BrowserURL from '../browser-url';
-import Header from '../header';
 import MetaBoxes from '../meta-boxes';
+import PostEditorMoreMenu from '../more-menu';
 import WelcomeGuide from '../welcome-guide';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import useEditPostCommands from '../../commands/use-commands';
+import { usePaddingAppender } from './use-padding-appender';
+import { useShouldIframe } from './use-should-iframe';
 
 const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
-const {
-	InserterSidebar,
-	ListViewSidebar,
-	ComplementaryArea,
-	FullscreenMode,
-	SavePublishPanels,
-	InterfaceSkeleton,
-	interfaceStore,
-	Sidebar,
-	TextEditor,
-} = unlock( editorPrivateApis );
+const { EditorInterface, FullscreenMode, Sidebar } =
+	unlock( editorPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
-
-const interfaceLabels = {
-	/* translators: accessibility text for the editor top bar landmark region. */
-	header: __( 'Editor top bar' ),
-	/* translators: accessibility text for the editor content landmark region. */
-	body: __( 'Editor content' ),
-	/* translators: accessibility text for the editor settings landmark region. */
-	sidebar: __( 'Editor settings' ),
-	/* translators: accessibility text for the editor publish landmark region. */
-	actions: __( 'Editor publish' ),
-	/* translators: accessibility text for the editor footer landmark region. */
-	footer: __( 'Editor footer' ),
-};
+const DESIGN_POST_TYPES = [
+	'wp_template',
+	'wp_template_part',
+	'wp_block',
+	'wp_navigation',
+];
 
 function useEditorStyles() {
-	const { hasThemeStyleSupport, editorSettings } = useSelect(
-		( select ) => ( {
+	const {
+		hasThemeStyleSupport,
+		editorSettings,
+		isZoomedOutView,
+		hasMetaBoxes,
+		renderingMode,
+		postType,
+	} = useSelect( ( select ) => {
+		const { __unstableGetEditorMode } = select( blockEditorStore );
+		const { getCurrentPostType, getRenderingMode } = select( editorStore );
+		const _postType = getCurrentPostType();
+		return {
 			hasThemeStyleSupport:
 				select( editPostStore ).isFeatureActive( 'themeStyles' ),
 			editorSettings: select( editorStore ).getEditorSettings(),
-		} ),
-		[]
-	);
+			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
+			hasMetaBoxes: select( editPostStore ).hasMetaBoxes(),
+			renderingMode: getRenderingMode(),
+			postType: _postType,
+		};
+	}, [] );
 
 	// Compute the default styles.
 	return useMemo( () => {
@@ -120,7 +114,24 @@ function useEditorStyles() {
 			} );
 		}
 
-		return hasThemeStyles ? editorSettings.styles : defaultEditorStyles;
+		const baseStyles = hasThemeStyles
+			? editorSettings.styles ?? []
+			: defaultEditorStyles;
+
+		// Add a constant padding for the typewritter effect. When typing at the
+		// bottom, there needs to be room to scroll up.
+		if (
+			! isZoomedOutView &&
+			! hasMetaBoxes &&
+			renderingMode === 'post-only' &&
+			! DESIGN_POST_TYPES.includes( postType )
+		) {
+			baseStyles.push( {
+				css: 'body{padding-bottom: 40vh}',
+			} );
+		}
+
+		return baseStyles;
 	}, [
 		editorSettings.defaultEditorStyles,
 		editorSettings.disableLayoutStyles,
@@ -132,71 +143,44 @@ function useEditorStyles() {
 function Layout( { initialPost } ) {
 	useCommands();
 	useEditPostCommands();
-
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isWideViewport = useViewportMatch( 'large' );
-	const isLargeViewport = useViewportMatch( 'medium' );
-
+	const paddingAppenderRef = usePaddingAppender();
+	const shouldIframe = useShouldIframe();
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const {
 		mode,
 		isFullscreenActive,
-		isRichEditingEnabled,
 		sidebarIsOpened,
 		hasActiveMetaboxes,
-		previousShortcut,
-		nextShortcut,
 		hasBlockSelected,
-		isInserterOpened,
-		isListViewOpened,
 		showIconLabels,
 		isDistractionFree,
 		showBlockBreadcrumbs,
 		showMetaBoxes,
-		documentLabel,
 		hasHistory,
-		hasBlockBreadcrumbs,
-		blockEditorMode,
 		isEditingTemplate,
+		isWelcomeGuideVisible,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
-		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
-		const editorSettings = getEditorSettings();
-		const postTypeLabel = getPostTypeLabel();
+		const { getEditorSettings } = select( editorStore );
+		const { isFeatureActive } = select( editPostStore );
 
 		return {
-			showMetaBoxes:
-				select( editorStore ).getRenderingMode() === 'post-only',
-			sidebarIsOpened: !! (
-				select( interfaceStore ).getActiveComplementaryArea( 'core' ) ||
-				select( editorStore ).isPublishSidebarOpened()
-			),
+			mode: select( editorStore ).getEditorMode(),
 			isFullscreenActive:
 				select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
-			isInserterOpened: select( editorStore ).isInserterOpened(),
-			isListViewOpened: select( editorStore ).isListViewOpened(),
-			mode: select( editorStore ).getEditorMode(),
-			isRichEditingEnabled: editorSettings.richEditingEnabled,
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			previousShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/editor/previous-region' ),
-			nextShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/editor/next-region' ),
+			hasBlockSelected:
+				!! select( blockEditorStore ).getBlockSelectionStart(),
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
-			// translators: Default label for the Document in the Block Breadcrumb.
-			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
-			hasBlockSelected:
-				!! select( blockEditorStore ).getBlockSelectionStart(),
+			showMetaBoxes:
+				select( editorStore ).getRenderingMode() === 'post-only',
 			hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord,
-			hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
-			blockEditorMode:
-				select( blockEditorStore ).__unstableGetEditorMode(),
 			isEditingTemplate:
 				select( editorStore ).getCurrentPostType() === 'wp_template',
+			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
 		};
 	}, [] );
 
@@ -208,21 +192,6 @@ function Layout( { initialPost } ) {
 
 	const styles = useEditorStyles();
 
-	// Local state for save panel.
-	// Note 'truthy' callback implies an open panel.
-	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
-		useState( false );
-
-	const closeEntitiesSavedStates = useCallback(
-		( arg ) => {
-			if ( typeof entitiesSavedStatesCallback === 'function' ) {
-				entitiesSavedStatesCallback( arg );
-			}
-			setEntitiesSavedStatesCallback( false );
-		},
-		[ entitiesSavedStatesCallback ]
-	);
-
 	// We need to add the show-icon-labels class to the body element so it is applied to modals.
 	if ( showIconLabels ) {
 		document.body.classList.add( 'show-icon-labels' );
@@ -234,15 +203,10 @@ function Layout( { initialPost } ) {
 		'is-sidebar-opened': sidebarIsOpened,
 		'has-metaboxes': hasActiveMetaboxes,
 		'is-distraction-free': isDistractionFree && isWideViewport,
-		'is-entity-save-view-open': !! entitiesSavedStatesCallback,
 		'has-block-breadcrumbs':
-			hasBlockBreadcrumbs && ! isDistractionFree && isWideViewport,
+			showBlockBreadcrumbs && ! isDistractionFree && isWideViewport,
 	} );
 
-	const secondarySidebarLabel = isListViewOpened
-		? __( 'Document Overview' )
-		: __( 'Block Library' );
-
 	function onPluginAreaError( name ) {
 		createErrorNotice(
 			sprintf(
@@ -317,83 +281,6 @@ function Layout( { initialPost } ) {
 			<EditPostKeyboardShortcuts />
 			<EditorKeyboardShortcutsRegister />
 			<BlockKeyboardShortcuts />
-
-			<InterfaceSkeleton
-				isDistractionFree={ isDistractionFree && isWideViewport }
-				className={ className }
-				labels={ {
-					...interfaceLabels,
-					secondarySidebar: secondarySidebarLabel,
-				} }
-				header={
-					<Header
-						setEntitiesSavedStatesCallback={
-							setEntitiesSavedStatesCallback
-						}
-						initialPost={ initialPost }
-					/>
-				}
-				editorNotices={ <EditorNotices /> }
-				secondarySidebar={
-					mode === 'visual' &&
-					( ( isInserterOpened && <InserterSidebar /> ) ||
-						( isListViewOpened && <ListViewSidebar /> ) )
-				}
-				sidebar={
-					! isDistractionFree && (
-						<ComplementaryArea.Slot scope="core" />
-					)
-				}
-				notices={ <EditorSnackbars /> }
-				content={
-					<>
-						{ ! isDistractionFree && <EditorNotices /> }
-						{ ( mode === 'text' || ! isRichEditingEnabled ) && (
-							<TextEditor />
-						) }
-						{ ! isLargeViewport && mode === 'visual' && (
-							<BlockToolbar hideDragHandle />
-						) }
-						{ isRichEditingEnabled && mode === 'visual' && (
-							<VisualEditor styles={ styles } />
-						) }
-						{ ! isDistractionFree && showMetaBoxes && (
-							<div className="edit-post-layout__metaboxes">
-								<MetaBoxes location="normal" />
-								<MetaBoxes location="advanced" />
-							</div>
-						) }
-					</>
-				}
-				footer={
-					! isDistractionFree &&
-					! isMobileViewport &&
-					showBlockBreadcrumbs &&
-					isRichEditingEnabled &&
-					blockEditorMode !== 'zoom-out' &&
-					mode === 'visual' && (
-						<div className="edit-post-layout__footer">
-							<BlockBreadcrumb rootLabelText={ documentLabel } />
-						</div>
-					)
-				}
-				actions={
-					<SavePublishPanels
-						closeEntitiesSavedStates={ closeEntitiesSavedStates }
-						isEntitiesSavedStatesOpen={
-							entitiesSavedStatesCallback
-						}
-						setEntitiesSavedStatesCallback={
-							setEntitiesSavedStatesCallback
-						}
-						forceIsDirtyPublishPanel={ hasActiveMetaboxes }
-					/>
-				}
-				shortcuts={ {
-					previous: previousShortcut,
-					next: nextShortcut,
-				} }
-			/>
 			<WelcomeGuide />
 			<InitPatternModal />
 			<PluginArea onError={ onPluginAreaError } />
@@ -405,6 +292,25 @@ function Layout( { initialPost } ) {
 					}
 				/>
 			) }
+			<PostEditorMoreMenu />
+			<BackButton initialPost={ initialPost } />
+			<EditorInterface
+				className={ className }
+				styles={ styles }
+				forceIsDirty={ hasActiveMetaboxes }
+				contentRef={ paddingAppenderRef }
+				disableIframe={ ! shouldIframe }
+				// We should auto-focus the canvas (title) on load.
+				// eslint-disable-next-line jsx-a11y/no-autofocus
+				autoFocus={ ! isWelcomeGuideVisible }
+			>
+				{ ! isDistractionFree && showMetaBoxes && (
+					<div className="edit-post-layout__metaboxes">
+						<MetaBoxes location="normal" />
+						<MetaBoxes location="advanced" />
+					</div>
+				) }
+			</EditorInterface>
 		</>
 	);
 }
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index bb0ce2e38732ea..e1b4ff07bf30bf 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -1,4 +1,4 @@
-.edit-post-visual-editor {
+.editor-visual-editor {
 	flex: 1 0 auto;
 	height: auto;
 }
diff --git a/packages/edit-post/src/components/visual-editor/use-padding-appender.js b/packages/edit-post/src/components/layout/use-padding-appender.js
similarity index 100%
rename from packages/edit-post/src/components/visual-editor/use-padding-appender.js
rename to packages/edit-post/src/components/layout/use-padding-appender.js
diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js
new file mode 100644
index 00000000000000..03efae92c72f7d
--- /dev/null
+++ b/packages/edit-post/src/components/layout/use-should-iframe.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { store as editorStore } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../store';
+
+const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false;
+
+export function useShouldIframe() {
+	const {
+		isBlockBasedTheme,
+		hasV3BlocksOnly,
+		isEditingTemplate,
+		hasMetaBoxes,
+	} = useSelect( ( select ) => {
+		const { getEditorSettings, getCurrentPostType } = select( editorStore );
+		const { getBlockTypes } = select( blocksStore );
+		const editorSettings = getEditorSettings();
+		return {
+			isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
+			hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
+				return type.apiVersion >= 3;
+			} ),
+			isEditingTemplate: getCurrentPostType() === 'wp_template',
+			hasMetaBoxes: select( editPostStore ).hasMetaBoxes(),
+		};
+	}, [] );
+
+	return (
+		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
+			! hasMetaBoxes ) ||
+		isEditingTemplate
+	);
+}
diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/more-menu/index.js
similarity index 92%
rename from packages/edit-post/src/components/header/more-menu/index.js
rename to packages/edit-post/src/components/more-menu/index.js
index c9f1c50251ca21..136742a19dddd4 100644
--- a/packages/edit-post/src/components/header/more-menu/index.js
+++ b/packages/edit-post/src/components/more-menu/index.js
@@ -10,10 +10,10 @@ import { displayShortcut } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../../lock-unlock';
+import { unlock } from '../../lock-unlock';
 import ManagePatternsMenuItem from './manage-patterns-menu-item';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
-import EditPostPreferencesModal from '../../preferences-modal';
+import EditPostPreferencesModal from '../preferences-modal';
 
 const { ToolsMoreMenuGroup, ViewMoreMenuGroup } = unlock( editorPrivateApis );
 
diff --git a/packages/edit-post/src/components/header/more-menu/manage-patterns-menu-item.js b/packages/edit-post/src/components/more-menu/manage-patterns-menu-item.js
similarity index 100%
rename from packages/edit-post/src/components/header/more-menu/manage-patterns-menu-item.js
rename to packages/edit-post/src/components/more-menu/manage-patterns-menu-item.js
diff --git a/packages/edit-post/src/components/header/more-menu/welcome-guide-menu-item.js b/packages/edit-post/src/components/more-menu/welcome-guide-menu-item.js
similarity index 100%
rename from packages/edit-post/src/components/header/more-menu/welcome-guide-menu-item.js
rename to packages/edit-post/src/components/more-menu/welcome-guide-menu-item.js
diff --git a/packages/edit-post/src/components/visual-editor/block-inspector-button.js b/packages/edit-post/src/components/visual-editor/block-inspector-button.js
deleted file mode 100644
index 87b55d4eb3fdca..00000000000000
--- a/packages/edit-post/src/components/visual-editor/block-inspector-button.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { MenuItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { speak } from '@wordpress/a11y';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-const noop = () => {};
-
-export function BlockInspectorButton( { onClick = noop, small = false } ) {
-	const { shortcut, areAdvancedSettingsOpened } = useSelect(
-		( select ) => ( {
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/editor/toggle-sidebar' ),
-			areAdvancedSettingsOpened:
-				select( editPostStore ).getActiveGeneralSidebarName() ===
-				'edit-post/block',
-		} ),
-		[]
-	);
-	const { openGeneralSidebar, closeGeneralSidebar } =
-		useDispatch( editPostStore );
-
-	const label = areAdvancedSettingsOpened
-		? __( 'Hide more settings' )
-		: __( 'Show more settings' );
-
-	return (
-		<MenuItem
-			onClick={ () => {
-				if ( areAdvancedSettingsOpened ) {
-					closeGeneralSidebar();
-					speak( __( 'Block settings closed' ) );
-				} else {
-					openGeneralSidebar( 'edit-post/block' );
-					speak(
-						__(
-							'Additional settings are now available in the Editor block settings sidebar'
-						)
-					);
-				}
-				onClick();
-			} }
-			shortcut={ shortcut }
-		>
-			{ ! small && label }
-		</MenuItem>
-	);
-}
-
-export default BlockInspectorButton;
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
deleted file mode 100644
index 24a50cb7ba69a3..00000000000000
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { useMemo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-import { usePaddingAppender } from './use-padding-appender';
-
-const { VisualEditor: VisualEditorRoot } = unlock( editorPrivateApis );
-
-const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false;
-const DESIGN_POST_TYPES = [
-	'wp_template',
-	'wp_template_part',
-	'wp_block',
-	'wp_navigation',
-];
-
-export default function VisualEditor( { styles } ) {
-	const {
-		isWelcomeGuideVisible,
-		renderingMode,
-		isBlockBasedTheme,
-		hasV3BlocksOnly,
-		isEditingTemplate,
-		isZoomedOutView,
-		postType,
-	} = useSelect( ( select ) => {
-		const { isFeatureActive } = select( editPostStore );
-		const { getEditorSettings, getRenderingMode, getCurrentPostType } =
-			select( editorStore );
-		const { getBlockTypes } = select( blocksStore );
-		const { __unstableGetEditorMode } = select( blockEditorStore );
-		const editorSettings = getEditorSettings();
-		const _postType = getCurrentPostType();
-		return {
-			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
-			renderingMode: getRenderingMode(),
-			isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
-			hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
-				return type.apiVersion >= 3;
-			} ),
-			isEditingTemplate: _postType === 'wp_template',
-			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
-			postType: _postType,
-		};
-	}, [] );
-	const hasMetaBoxes = useSelect(
-		( select ) => select( editPostStore ).hasMetaBoxes(),
-		[]
-	);
-
-	const paddingAppenderRef = usePaddingAppender();
-
-	let paddingBottom;
-
-	// Add a constant padding for the typewritter effect. When typing at the
-	// bottom, there needs to be room to scroll up.
-	if (
-		! isZoomedOutView &&
-		! hasMetaBoxes &&
-		renderingMode === 'post-only' &&
-		! DESIGN_POST_TYPES.includes( postType )
-	) {
-		paddingBottom = '40vh';
-	}
-
-	styles = useMemo(
-		() => [
-			...styles,
-			{
-				// We should move this in to future to the body.
-				css: paddingBottom
-					? `body{padding-bottom:${ paddingBottom }}`
-					: '',
-			},
-		],
-		[ styles, paddingBottom ]
-	);
-
-	const isToBeIframed =
-		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
-			! hasMetaBoxes ) ||
-		isEditingTemplate;
-
-	return (
-		<VisualEditorRoot
-			className="edit-post-visual-editor"
-			disableIframe={ ! isToBeIframed }
-			styles={ styles }
-			// We should auto-focus the canvas (title) on load.
-			// eslint-disable-next-line jsx-a11y/no-autofocus
-			autoFocus={ ! isWelcomeGuideVisible }
-			contentRef={ paddingAppenderRef }
-		/>
-	);
-}
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
index f19248fa0d51c2..0ec4388a9af70e 100644
--- a/packages/edit-post/src/index.js
+++ b/packages/edit-post/src/index.js
@@ -14,12 +14,19 @@ import {
 	registerLegacyWidgetBlock,
 	registerWidgetGroupBlock,
 } from '@wordpress/widgets';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import Editor from './editor';
+import { unlock } from './lock-unlock';
+
+const { BackButton: __experimentalMainDashboardButton } =
+	unlock( editorPrivateApis );
 
 /**
  * Initializes and returns an instance of Editor.
@@ -151,8 +158,7 @@ export function reinitializeEditor() {
 	} );
 }
 
-export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
-export { default as __experimentalMainDashboardButton } from './components/header/main-dashboard-button';
-
+export { default as __experimentalFullscreenModeClose } from './components/back-button/fullscreen-mode-close';
+export { __experimentalMainDashboardButton };
 export { store } from './store';
 export * from './deprecated';
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index 7a935f198660a8..a95c02242644b5 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -1,5 +1,4 @@
-@import "./components/header/style.scss";
-@import "./components/header/fullscreen-mode-close/style.scss";
+@import "./components/back-button/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/meta-boxes/meta-boxes-area/style.scss";
 @import "./components/welcome-guide/style.scss";
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
index fcd4ea1b388028..3f4176fc198de0 100644
--- a/packages/edit-site/src/components/header-edit-mode/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -31,20 +31,23 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 	}, [] );
 
 	return (
-		<EditorHeader
-			setEntitiesSavedStatesCallback={ setEntitiesSavedStatesCallback }
-			customSaveButton={
-				_isPreviewingTheme && <SaveButton size="compact" />
-			}
-			forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
-			title={
-				! hasDefaultEditorCanvasView
-					? getEditorCanvasContainerTitle( editorCanvasView )
-					: undefined
-			}
-		>
+		<>
+			<EditorHeader
+				setEntitiesSavedStatesCallback={
+					setEntitiesSavedStatesCallback
+				}
+				customSaveButton={
+					_isPreviewingTheme && <SaveButton size="compact" />
+				}
+				forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
+				title={
+					! hasDefaultEditorCanvasView
+						? getEditorCanvasContainerTitle( editorCanvasView )
+						: undefined
+				}
+			/>
 			<SiteEditorMoreMenu />
-		</EditorHeader>
+		</>
 	);
 }
 
diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js
new file mode 100644
index 00000000000000..60ee3043e073bb
--- /dev/null
+++ b/packages/editor/src/components/editor-interface/index.js
@@ -0,0 +1,195 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface';
+import { useSelect } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+import {
+	store as blockEditorStore,
+	BlockBreadcrumb,
+	BlockToolbar,
+} from '@wordpress/block-editor';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useViewportMatch } from '@wordpress/compose';
+import { useState, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import EditorNotices from '../editor-notices';
+import EditorSnackbars from '../editor-snackbars';
+import Header from '../header';
+import InserterSidebar from '../inserter-sidebar';
+import ListViewSidebar from '../list-view-sidebar';
+import SavePublishPanels from '../save-publish-panels';
+import TextEditor from '../text-editor';
+import VisualEditor from '../visual-editor';
+
+const interfaceLabels = {
+	/* translators: accessibility text for the editor top bar landmark region. */
+	header: __( 'Editor top bar' ),
+	/* translators: accessibility text for the editor content landmark region. */
+	body: __( 'Editor content' ),
+	/* translators: accessibility text for the editor settings landmark region. */
+	sidebar: __( 'Editor settings' ),
+	/* translators: accessibility text for the editor publish landmark region. */
+	actions: __( 'Editor publish' ),
+	/* translators: accessibility text for the editor footer landmark region. */
+	footer: __( 'Editor footer' ),
+};
+
+export default function EditorInterface( {
+	className,
+	styles,
+	children,
+	forceIsDirty,
+	contentRef,
+	disableIframe,
+	autoFocus,
+} ) {
+	const {
+		mode,
+		isRichEditingEnabled,
+		isInserterOpened,
+		isListViewOpened,
+		isDistractionFree,
+		previousShortcut,
+		nextShortcut,
+		showBlockBreadcrumbs,
+		documentLabel,
+		blockEditorMode,
+	} = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
+		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
+		const editorSettings = getEditorSettings();
+		const postTypeLabel = getPostTypeLabel();
+
+		return {
+			mode: select( editorStore ).getEditorMode(),
+			isRichEditingEnabled: editorSettings.richEditingEnabled,
+			isInserterOpened: select( editorStore ).isInserterOpened(),
+			isListViewOpened: select( editorStore ).isListViewOpened(),
+			isDistractionFree: get( 'core', 'distractionFree' ),
+			previousShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/editor/previous-region' ),
+			nextShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/editor/next-region' ),
+			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
+			// translators: Default label for the Document in the Block Breadcrumb.
+			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
+			blockEditorMode:
+				select( blockEditorStore ).__unstableGetEditorMode(),
+		};
+	}, [] );
+	const isWideViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const secondarySidebarLabel = isListViewOpened
+		? __( 'Document Overview' )
+		: __( 'Block Library' );
+
+	// Local state for save panel.
+	// Note 'truthy' callback implies an open panel.
+	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
+		useState( false );
+	const closeEntitiesSavedStates = useCallback(
+		( arg ) => {
+			if ( typeof entitiesSavedStatesCallback === 'function' ) {
+				entitiesSavedStatesCallback( arg );
+			}
+			setEntitiesSavedStatesCallback( false );
+		},
+		[ entitiesSavedStatesCallback ]
+	);
+
+	return (
+		<InterfaceSkeleton
+			isDistractionFree={ isDistractionFree && isWideViewport }
+			className={ clsx( className, {
+				'is-entity-save-view-open': !! entitiesSavedStatesCallback,
+			} ) }
+			labels={ {
+				...interfaceLabels,
+				secondarySidebar: secondarySidebarLabel,
+			} }
+			header={
+				<Header
+					forceIsDirty={ forceIsDirty }
+					setEntitiesSavedStatesCallback={
+						setEntitiesSavedStatesCallback
+					}
+				/>
+			}
+			editorNotices={ <EditorNotices /> }
+			secondarySidebar={
+				mode === 'visual' &&
+				( ( isInserterOpened && <InserterSidebar /> ) ||
+					( isListViewOpened && <ListViewSidebar /> ) )
+			}
+			sidebar={
+				! isDistractionFree && <ComplementaryArea.Slot scope="core" />
+			}
+			notices={ <EditorSnackbars /> }
+			content={
+				<>
+					{ ! isDistractionFree && <EditorNotices /> }
+					{ ( mode === 'text' || ! isRichEditingEnabled ) && (
+						<TextEditor
+							// We should auto-focus the (title) on load.
+							// eslint-disable-next-line jsx-a11y/no-autofocus
+							autoFocus={ autoFocus }
+						/>
+					) }
+					{ ! isLargeViewport && mode === 'visual' && (
+						<BlockToolbar hideDragHandle />
+					) }
+					{ isRichEditingEnabled && mode === 'visual' && (
+						<VisualEditor
+							styles={ styles }
+							contentRef={ contentRef }
+							disableIframe={ disableIframe }
+							// We should auto-focus the (title) on load.
+							// eslint-disable-next-line jsx-a11y/no-autofocus
+							autoFocus={ autoFocus }
+						/>
+					) }
+					{ children }
+				</>
+			}
+			footer={
+				! isDistractionFree &&
+				isLargeViewport &&
+				showBlockBreadcrumbs &&
+				isRichEditingEnabled &&
+				blockEditorMode !== 'zoom-out' &&
+				mode === 'visual' && (
+					<div className="edit-post-layout__footer">
+						<BlockBreadcrumb rootLabelText={ documentLabel } />
+					</div>
+				)
+			}
+			actions={
+				<SavePublishPanels
+					closeEntitiesSavedStates={ closeEntitiesSavedStates }
+					isEntitiesSavedStatesOpen={ entitiesSavedStatesCallback }
+					setEntitiesSavedStatesCallback={
+						setEntitiesSavedStatesCallback
+					}
+					forceIsDirtyPublishPanel={ forceIsDirty }
+				/>
+			}
+			shortcuts={ {
+				previous: previousShortcut,
+				next: nextShortcut,
+			} }
+		/>
+	);
+}
diff --git a/packages/edit-post/src/components/header/main-dashboard-button/index.js b/packages/editor/src/components/header/back-button.js
similarity index 55%
rename from packages/edit-post/src/components/header/main-dashboard-button/index.js
rename to packages/editor/src/components/header/back-button.js
index 0878a7cce49012..7b775d11cd7a83 100644
--- a/packages/edit-post/src/components/header/main-dashboard-button/index.js
+++ b/packages/editor/src/components/header/back-button.js
@@ -6,13 +6,13 @@ import {
 	createSlotFill,
 } from '@wordpress/components';
 
+// Keeping an old name for backward compatibility.
 const slotName = '__experimentalMainDashboardButton';
 
-const { Fill, Slot: MainDashboardButtonSlot } = createSlotFill( slotName );
+const { Fill, Slot } = createSlotFill( slotName );
 
-const MainDashboardButton = Fill;
-
-const Slot = ( { children } ) => {
+const BackButton = Fill;
+const BackButtonSlot = ( { children } ) => {
 	const fills = useSlotFills( slotName );
 	const hasFills = Boolean( fills && fills.length );
 
@@ -20,9 +20,8 @@ const Slot = ( { children } ) => {
 		return children;
 	}
 
-	return <MainDashboardButtonSlot bubblesVirtually />;
+	return <Slot bubblesVirtually />;
 };
+BackButton.Slot = BackButtonSlot;
 
-MainDashboardButton.Slot = Slot;
-
-export default MainDashboardButton;
+export default BackButton;
diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
index 98501386434b69..477ce41c968a6a 100644
--- a/packages/editor/src/components/header/index.js
+++ b/packages/editor/src/components/header/index.js
@@ -17,6 +17,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
+import BackButton from './back-button';
 import CollapsableBlockToolbar from '../collapsible-block-toolbar';
 import DocumentBar from '../document-bar';
 import DocumentTools from '../document-tools';
@@ -41,7 +42,6 @@ function Header( {
 	forceDisableBlockTools,
 	setEntitiesSavedStatesCallback,
 	title,
-	children,
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -81,7 +81,7 @@ function Header( {
 	// as some plugins might be relying on its presence.
 	return (
 		<div className="editor-header edit-post-header">
-			{ children }
+			<BackButton.Slot />
 			<motion.div
 				variants={ slideY }
 				transition={ { type: 'tween', delay: 0.8 } }
diff --git a/packages/editor/src/components/text-editor/index.js b/packages/editor/src/components/text-editor/index.js
index 5bfb53c574aa30..b65a958249b6f8 100644
--- a/packages/editor/src/components/text-editor/index.js
+++ b/packages/editor/src/components/text-editor/index.js
@@ -5,6 +5,7 @@ import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,7 +14,7 @@ import { store as editorStore } from '../../store';
 import PostTextEditor from '../post-text-editor';
 import PostTitleRaw from '../post-title/post-title-raw';
 
-export default function TextEditor() {
+export default function TextEditor( { autoFocus = false } ) {
 	const { switchEditorMode } = useDispatch( editorStore );
 	const { shortcut, isRichEditingEnabled } = useSelect( ( select ) => {
 		const { getEditorSettings } = select( editorStore );
@@ -25,6 +26,14 @@ export default function TextEditor() {
 		};
 	}, [] );
 
+	const titleRef = useRef();
+	useEffect( () => {
+		if ( autoFocus ) {
+			return;
+		}
+		titleRef?.current?.focus();
+	}, [ autoFocus ] );
+
 	return (
 		<div className="editor-text-editor">
 			{ isRichEditingEnabled && (
@@ -40,7 +49,7 @@ export default function TextEditor() {
 				</div>
 			) }
 			<div className="editor-text-editor__body">
-				<PostTitleRaw />
+				<PostTitleRaw ref={ titleRef } />
 				<PostTextEditor />
 			</div>
 		</div>
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js
index 52bc953eff3290..f47743d6c15f42 100644
--- a/packages/editor/src/components/visual-editor/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -376,11 +376,17 @@ function VisualEditor( {
 
 	return (
 		<div
-			className={ clsx( 'editor-visual-editor', className, {
-				'has-padding': isFocusedEntity || enableResizing,
-				'is-resizable': enableResizing,
-				'is-iframed': shouldIframe,
-			} ) }
+			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': shouldIframe,
+				}
+			) }
 		>
 			<ResizableEditor
 				enableResizing={ enableResizing }
diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js
index 02cf58e1f4c83b..3f4c24b4b1e071 100644
--- a/packages/editor/src/private-apis.js
+++ b/packages/editor/src/private-apis.js
@@ -11,6 +11,8 @@ import { lock } from './lock-unlock';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
 import useAutoSwitchEditorSidebars from './components/provider/use-auto-switch-editor-sidebars';
 import useBlockEditorSettings from './components/provider/use-block-editor-settings';
+import BackButton from './components/header/back-button';
+import EditorInterface from './components/editor-interface';
 import Header from './components/header';
 import CreateTemplatePartModal from './components/create-template-part-modal';
 import InserterSidebar from './components/inserter-sidebar';
@@ -43,9 +45,11 @@ const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 export const privateApis = {};
 lock( privateApis, {
 	CreateTemplatePartModal,
+	BackButton,
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
 	GlobalStylesProvider,
+	EditorInterface,
 	Header,
 	InserterSidebar,
 	ListViewSidebar,