diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md
index 9ee5fea71801b..6577ae72575ff 100644
--- a/docs/reference-guides/data/data-core-edit-site.md
+++ b/docs/reference-guides/data/data-core-edit-site.md
@@ -20,16 +20,7 @@ _Returns_
 
 ### getCurrentTemplateNavigationPanelSubMenu
 
-Returns the current template or template part's corresponding
-navigation panel's sub menu, to be used with `openNavigationPanelToMenu`.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
-
--   `string`: The current template or template part's sub menu.
+> **Deprecated**
 
 ### getCurrentTemplateTemplateParts
 
@@ -93,15 +84,7 @@ _Returns_
 
 ### getNavigationPanelActiveMenu
 
-Returns the active menu in the navigation panel.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
-
--   `string`: Active menu.
+> **Deprecated**
 
 ### getPage
 
@@ -179,15 +162,7 @@ _Returns_
 
 ### isNavigationOpened
 
-Returns the current opened/closed state of the navigation panel.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
-
--   `boolean`: True if the navigation panel should be open; false if closed.
+> **Deprecated**
 
 ### isSaveViewOpened
 
@@ -233,11 +208,9 @@ _Parameters_
 
 ### openNavigationPanelToMenu
 
-Opens the navigation panel and sets its active menu at the same time.
-
-_Parameters_
+> **Deprecated**
 
--   _menu_ `string`: Identifies the menu to open.
+Opens the navigation panel and sets its active menu at the same time.
 
 ### removeTemplate
 
@@ -290,11 +263,9 @@ _Parameters_
 
 ### setIsNavigationPanelOpened
 
-Sets whether the navigation panel should be open.
-
-_Parameters_
+> **Deprecated**
 
--   _isOpen_ `boolean`: If true, opens the nav panel. If false, closes it. It does not toggle the state, but sets it directly.
+Sets whether the navigation panel should be open.
 
 ### setIsSaveViewOpened
 
@@ -306,11 +277,9 @@ _Parameters_
 
 ### setNavigationPanelActiveMenu
 
-Action that sets the active navigation panel menu.
-
-_Parameters_
+> **Deprecated**
 
--   _menu_ `string`: Menu prop of active menu.
+Action that sets the active navigation panel menu.
 
 _Returns_
 
diff --git a/lib/compat/wordpress-6.0/site-editor.php b/lib/compat/wordpress-6.0/site-editor.php
index 081657d0061fe..60dc9f2a1ee6b 100644
--- a/lib/compat/wordpress-6.0/site-editor.php
+++ b/lib/compat/wordpress-6.0/site-editor.php
@@ -73,23 +73,3 @@ function gutenberg_site_editor_maybe_redirect() {
 	}
 }
 add_action( 'load-site-editor.php', 'gutenberg_site_editor_maybe_redirect' );
-
-/**
- * Add home template settings for WP 5.9.
- *
- * @param array                   $settings Existing block editor settings.
- * @param WP_Block_Editor_Context $context The current block editor context.
- * @return array
- */
-function gutenberg_site_editor_homepage_setting( $settings, $context ) {
-	if ( isset( $context->post ) ) {
-		return $settings;
-	}
-
-	if ( ! isset( $settings['__unstableHomeTemplate'] ) ) {
-		$settings['__unstableHomeTemplate'] = gutenberg_resolve_home_template();
-	}
-
-	return $settings;
-}
-add_filter( 'block_editor_settings_all', 'gutenberg_site_editor_homepage_setting', 10, 2 );
diff --git a/lib/compat/wordpress-6.1/template-parts-screen.php b/lib/compat/wordpress-6.1/template-parts-screen.php
index b76f12c610b66..1555b6ab1e250 100644
--- a/lib/compat/wordpress-6.1/template-parts-screen.php
+++ b/lib/compat/wordpress-6.1/template-parts-screen.php
@@ -118,17 +118,8 @@ static function( $classes ) {
 		'defaultTemplatePartAreas'  => get_allowed_block_template_part_areas(),
 		'supportsLayout'            => wp_theme_has_theme_json(),
 		'supportsTemplatePartsMode' => ! wp_is_block_theme() && current_theme_supports( 'block-template-parts' ),
-		'__unstableHomeTemplate'    => gutenberg_resolve_home_template(),
 	);
 
-	/**
-	 * We don't need home template resolution when block template parts are supported.
-	 * Set the value to true to satisfy the editor initialization guard clause.
-	 */
-	if ( $custom_settings['supportsTemplatePartsMode'] ) {
-		$custom_settings['__unstableHomeTemplate'] = true;
-	}
-
 	// Add additional back-compat patterns registered by `current_screen` et al.
 	$custom_settings['__experimentalAdditionalBlockPatterns']          = WP_Block_Patterns_Registry::get_instance()->get_all_registered( true );
 	$custom_settings['__experimentalAdditionalBlockPatternCategories'] = WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered( true );
diff --git a/lib/compat/wordpress-6.2/site-editor.php b/lib/compat/wordpress-6.2/site-editor.php
new file mode 100644
index 0000000000000..b6246e49c6d11
--- /dev/null
+++ b/lib/compat/wordpress-6.2/site-editor.php
@@ -0,0 +1,24 @@
+<?php
+/**
+ * Updates the site-editor.php file
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Remove home template setting for WP 6.2.
+ *
+ * @param array                   $settings Existing block editor settings.
+ * @param WP_Block_Editor_Context $context The current block editor context.
+ * @return array
+ */
+function gutenberg_site_editor_unset_homepage_setting( $settings, $context ) {
+	if ( isset( $context->post ) ) {
+		return $settings;
+	}
+
+	unset( $settings['__unstableHomeTemplate'] );
+
+	return $settings;
+}
+add_filter( 'block_editor_settings_all', 'gutenberg_site_editor_unset_homepage_setting', 10, 2 );
diff --git a/lib/load.php b/lib/load.php
index 0439c5d2abff5..caa7692ab6e35 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -108,6 +108,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php';
 require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-6-2.php';
 require __DIR__ . '/compat/wordpress-6.2/edit-form-blocks.php';
+require __DIR__ . '/compat/wordpress-6.2/site-editor.php';
 
 // Experimental features.
 remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API.
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index cc922ba5a035a..b5703fe09b0dd 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -57,6 +57,7 @@ $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
 $modal-min-width: 360px;
 $spinner-size: 16px;
+$canvas-padding: $grid-unit-30;
 
 
 /**
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 9c7b55e78a69c..95156a967d30c 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -108,14 +108,6 @@ $z-layers: (
 	// Show interface skeleton footer above interface skeleton drawer
 	".interface-interface-skeleton__footer": 90,
 
-	// Show the navigation toggle above the skeleton header
-	".edit-site-navigation-toggle": 31,
-	// Show the navigation link above the skeleton header
-	".edit-site-navigation-link": 31,
-
-	// Show the FSE template previews above the editor and any open block toolbars
-	".edit-site-navigation-panel__preview": 32,
-
 	// Above the block list and the header.
 	".block-editor-block-popover": 31,
 
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 14f85840887be..3d59beb463fc9 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -434,18 +434,4 @@
 .block-editor-iframe__body {
 	transition: all 0.3s;
 	transform-origin: top center;
-
-	&.is-zoomed-out {
-		margin: 100px 0;
-		transform: scale(0.45);
-
-		// Add a bit more space between the top level blocks.
-		.wp-site-blocks > * + * {
-			margin-block-start: 2.5rem;
-		}
-
-		> .block-list-appender {
-			display: none;
-		}
-	}
 }
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 25e36037ebac5..b7413b54a2e44 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -188,7 +188,17 @@ async function loadScript( head, { id, src } ) {
 }
 
 function Iframe(
-	{ contentRef, children, head, tabIndex = 0, assets, isZoomedOut, ...props },
+	{
+		contentRef,
+		children,
+		head,
+		tabIndex = 0,
+		assets,
+		scale = 1,
+		frameSize = 0,
+		readonly,
+		...props
+	},
 	ref
 ) {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
@@ -322,7 +332,7 @@ function Iframe(
 								{ head }
 								<style>
 									{ `html { transition: background 5s; ${
-										isZoomedOut
+										frameSize
 											? 'background: #2f2f2f; transition: background 0s;'
 											: ''
 									} }` }
@@ -333,23 +343,20 @@ function Iframe(
 								className={ classnames(
 									'block-editor-iframe__body',
 									BODY_CLASS_NAME,
-									...bodyClasses,
-									{
-										'is-zoomed-out': isZoomedOut,
-									}
+									...bodyClasses
 								) }
-								style={
-									isZoomedOut
-										? {
-												// This is the remaining percentage from the scaling down
-												// of the iframe body(`scale(0.45)`). We also need to subtract
-												// the body's bottom margin.
-												marginBottom: `-${
-													contentHeight * 0.55 - 100
-												}px`,
-										  }
-										: {}
-								}
+								style={ {
+									// This is the remaining percentage from the scaling down
+									// of the iframe body(`scale(0.45)`). We also need to subtract
+									// the body's bottom margin.
+									marginBottom: `-${
+										contentHeight * ( 1 - scale ) -
+										frameSize
+									}px`,
+									marginTop: frameSize,
+									transform: `scale( ${ scale } )`,
+								} }
+								inert={ readonly ? 'true' : undefined }
 							>
 								{ contentResizeListener }
 								{ /*
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 9c30798830dae..142325b5a39d5 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -112,7 +112,6 @@
 		height: auto;
 		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
 		text-align: left;
-		color: $gray-900;
 		border-radius: $radius-block-ui;
 		position: relative;
 		white-space: nowrap;
diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
index 86f089b68ba3d..807dd0e5dcae5 100644
--- a/packages/components/src/higher-order/navigate-regions/style.scss
+++ b/packages/components/src/higher-order/navigate-regions/style.scss
@@ -56,29 +56,9 @@
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;
 	}
-
-	// Edit site Navigation Drawer.
-	.interface-interface-skeleton__drawer {
-		z-index: z-index(".edit-site-navigation-toggle");
-
-		.interface-navigable-region__stacker,
-		.edit-site-navigation-toggle {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-
-		.edit-site-navigation-toggle.is-open {
-			outline: none;
-		}
-
-		.edit-site-navigation-toggle__button {
-			z-index: -1;
-		}
-	}
 }
 
-// Fixes for edge cases.
-// Edit site Drawer.
-.interface-interface-skeleton__drawer .interface-navigable-region__stacker {
+.interface-navigable-region__stacker {
 	height: 100%;
+	width: 100%;
 }
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 114884690e482..6a55f90cc95de 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -17,7 +17,7 @@ export {
 	default as Animate,
 	getAnimateClassName as __unstableGetAnimateClassName,
 } from './animate';
-export { __unstableMotion } from './animation';
+export { __unstableMotion, __unstableAnimatePresence } from './animation';
 export { default as AnglePickerControl } from './angle-picker-control';
 export {
 	default as Autocomplete,
diff --git a/packages/e2e-test-utils-playwright/src/index.ts b/packages/e2e-test-utils-playwright/src/index.ts
index 9f283017f1016..eb87d3b798751 100644
--- a/packages/e2e-test-utils-playwright/src/index.ts
+++ b/packages/e2e-test-utils-playwright/src/index.ts
@@ -3,4 +3,5 @@ export { Admin } from './admin';
 export { Editor } from './editor';
 export { PageUtils } from './page-utils';
 export { RequestUtils } from './request-utils';
+export { SiteEditor } from './site-editor';
 export { test, expect } from './test';
diff --git a/packages/e2e-test-utils-playwright/src/site-editor/index.ts b/packages/e2e-test-utils-playwright/src/site-editor/index.ts
new file mode 100644
index 0000000000000..740dc56d31496
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/site-editor/index.ts
@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import type { Page } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import { enterEditMode } from './toggle-canvas-mode';
+
+type AdminConstructorProps = {
+	page: Page;
+};
+
+export class SiteEditor {
+	page: Page;
+
+	constructor( { page }: AdminConstructorProps ) {
+		this.page = page;
+	}
+
+	enterEditMode = enterEditMode.bind( this );
+}
diff --git a/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js b/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js
new file mode 100644
index 0000000000000..c30a7b09ded99
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js
@@ -0,0 +1,8 @@
+/**
+ * Enters the site editor edit mode.
+ *
+ * @this {import('.').SiteEditor}
+ */
+export async function enterEditMode() {
+	await this.page.click( '.edit-site-layout__edit-button' );
+}
diff --git a/packages/e2e-test-utils-playwright/src/test.ts b/packages/e2e-test-utils-playwright/src/test.ts
index ac68ae7630e31..3872ce5b9fafb 100644
--- a/packages/e2e-test-utils-playwright/src/test.ts
+++ b/packages/e2e-test-utils-playwright/src/test.ts
@@ -8,7 +8,7 @@ import type { ConsoleMessage } from '@playwright/test';
 /**
  * Internal dependencies
  */
-import { Admin, Editor, PageUtils, RequestUtils } from './index';
+import { Admin, Editor, PageUtils, RequestUtils, SiteEditor } from './index';
 
 const STORAGE_STATE_PATH =
 	process.env.STORAGE_STATE_PATH ||
@@ -102,6 +102,7 @@ const test = base.extend<
 		editor: Editor;
 		pageUtils: PageUtils;
 		snapshotConfig: void;
+		siteEditor: SiteEditor;
 	},
 	{
 		requestUtils: RequestUtils;
@@ -113,6 +114,9 @@ const test = base.extend<
 	editor: async ( { page }, use ) => {
 		await use( new Editor( { page } ) );
 	},
+	siteEditor: async ( { page }, use ) => {
+		await use( new SiteEditor( { page } ) );
+	},
 	page: async ( { page }, use ) => {
 		page.on( 'console', observeConsoleLogging );
 
diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md
index 99b59e330ec3c..542a0d0a99529 100644
--- a/packages/e2e-test-utils/CHANGELOG.md
+++ b/packages/e2e-test-utils/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking changes
+
+-   Remove all the site editor navigation panel related utils: getSiteEditorMenuItem, isSiteEditorRoot, navigateSiteEditorBack, navigateSiteEditorBackToRoot, openSiteEditorNavigationPanel, siteEditorNavigateSequence, clickSiteEditorMenuItem, closeSiteEditorNavigationPanel.
+
 ## 8.6.0 (2022-11-16)
 
 ## 8.5.0 (2022-11-02)
diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md
index 5d62602743afe..8d1ae7c47b1df 100644
--- a/packages/e2e-test-utils/README.md
+++ b/packages/e2e-test-utils/README.md
@@ -109,14 +109,6 @@ _Parameters_
 
 -   _buttonLabel_ `string`: The label to search the button for.
 
-### clickSiteEditorMenuItem
-
-Searches for an item in the navigation panel with the label provided and clicks it.
-
-_Parameters_
-
--   _label_ `string`: The label to search the menu item for.
-
 ### closeGlobalBlockInserter
 
 Undocumented declaration.
@@ -125,10 +117,6 @@ Undocumented declaration.
 
 Closes list view
 
-### closeSiteEditorNavigationPanel
-
-Closes the site editor navigation panel if open
-
 ### createEmbeddingMatcher
 
 Creates a function to determine if a request is embedding a certain URL.
@@ -328,6 +316,10 @@ _Returns_
 
 -   `Promise`: Promise resolving once the sidebar is opened.
 
+### enterEditMode
+
+Enters edit mode.
+
 ### findSidebarPanelToggleButtonWithTitle
 
 Finds a sidebar panel with the provided title.
@@ -453,18 +445,6 @@ _Returns_
 
 -   `Promise<?string>`: Promise resolving to a string or null, depending whether a page error is present.
 
-### getSiteEditorMenuItem
-
-Searches for an item in the site editor navigation menu with the provided label.
-
-_Parameters_
-
--   _label_ `string`: The label to search the menu item for.
-
-_Returns_
-
--   `Promise<?ElementHandle>`: The menu item handle or `null`
-
 ### hasBlockSwitcher
 
 Returns a boolean indicating if the current selected block has a block switcher or not.
@@ -555,17 +535,6 @@ _Returns_
 
 Undocumented declaration.
 
-### isSiteEditorRoot
-
-Returns `true` if in the site editor navigation root
-
-Checks whether the “Back to dashboard” button is visible. If
-not in the root, a “Back” button would be visible instead.
-
-_Returns_
-
--   `Promise<boolean>`: Whether it currently is the navigation root or not
-
 ### isThemeInstalled
 
 Checks whether a theme exists on the site.
@@ -602,14 +571,6 @@ _Returns_
 
 -   `Promise`: Promise that uses `mockCheck` to see if a request should be mocked with `mock`, and optionally transforms the response with `responseObjectTransform`.
 
-### navigateSiteEditorBack
-
-Navigates the site editor back
-
-### navigateSiteEditorBackToRoot
-
-Goes back until it gets to the root
-
 ### openDocumentSettingsSidebar
 
 Clicks on the button in the header which opens Document Settings sidebar when it is closed.
@@ -650,10 +611,6 @@ Opens the previous global styles panel.
 
 Opens the publish panel.
 
-### openSiteEditorNavigationPanel
-
-Opens the site editor navigation panel if closed
-
 ### openTypographyToolsPanelMenu
 
 Opens the Typography tools panel menu provided via block supports.
@@ -820,14 +777,6 @@ _Parameters_
 The block toolbar is not always visible while typing.
 Call this function to reveal it.
 
-### siteEditorNavigateSequence
-
-Navigates through a sequence of links in the site editor navigation panel
-
-_Parameters_
-
--   _labels_ `string[] | string`: Labels to navigate through
-
 ### switchEditorModeTo
 
 Switches editor mode.
diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js
index 5efee6abcc480..fda35292174b0 100644
--- a/packages/e2e-test-utils/src/index.js
+++ b/packages/e2e-test-utils/src/index.js
@@ -103,18 +103,11 @@ export {
 } from './rest-api';
 export { openListView, closeListView } from './list-view';
 export {
-	clickSiteEditorMenuItem,
-	closeSiteEditorNavigationPanel,
 	disableSiteEditorWelcomeGuide,
 	getCurrentSiteEditorContent,
-	getSiteEditorMenuItem,
-	isSiteEditorRoot,
-	navigateSiteEditorBack,
-	navigateSiteEditorBackToRoot,
-	openSiteEditorNavigationPanel,
-	siteEditorNavigateSequence,
 	visitSiteEditor,
 	toggleGlobalStyles,
+	enterEditMode,
 	openGlobalStylesPanel,
 	openPreviousGlobalStylesPanel,
 } from './site-editor';
diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js
index fbaa99f192663..674152746fa9b 100644
--- a/packages/e2e-test-utils/src/site-editor.js
+++ b/packages/e2e-test-utils/src/site-editor.js
@@ -9,52 +9,9 @@ import { addQueryArgs } from '@wordpress/url';
  */
 
 const SELECTORS = {
-	navigationPanel: {
-		backToDashboard:
-			'.edit-site-navigation-panel .edit-site-navigation-panel__back-to-dashboard',
-		goBack: '.components-navigation__back-button',
-		isOpenState: '.edit-site-navigation-toggle.is-open',
-		menuItem: ( label ) =>
-			`//div[contains(@class, "edit-site-navigation-panel")]//button[.//*[text()="${ label }"]]`,
-		open: '.edit-site-navigation-toggle__button',
-		panelContainer: '.edit-site-navigation-panel',
-	},
 	visualEditor: '.edit-site-visual-editor iframe',
 };
 
-/**
- * Searches for an item in the navigation panel with the label provided and clicks it.
- *
- * @param {string} label The label to search the menu item for.
- */
-export async function clickSiteEditorMenuItem( label ) {
-	const item = await getSiteEditorMenuItem( label );
-
-	if ( item ) {
-		await item.click();
-	} else {
-		throw new Error(
-			`Navigation item with label ${ label } was not found.`
-		);
-	}
-}
-
-/**
- * Closes the site editor navigation panel if open
- */
-export async function closeSiteEditorNavigationPanel() {
-	const { navigationPanel } = SELECTORS;
-
-	const isOpen = !! ( await page.$( navigationPanel.isOpenState ) );
-
-	if ( isOpen ) {
-		await page.click( navigationPanel.open );
-		await page.waitForSelector( navigationPanel.panelContainer, {
-			hidden: true,
-		} );
-	}
-}
-
 /**
  * Skips the welcome guide popping up to first time users of the site editor
  */
@@ -154,88 +111,6 @@ export function getCurrentSiteEditorContent() {
 	} );
 }
 
-/**
- * Searches for an item in the site editor navigation menu with the provided label.
- *
- * @param {string} label The label to search the menu item for.
- *
- * @return {Promise<?ElementHandle>} The menu item handle or `null`
- */
-export async function getSiteEditorMenuItem( label ) {
-	const { navigationPanel } = SELECTORS;
-
-	const item = await page.waitForXPath( navigationPanel.menuItem( label ), {
-		visible: true,
-	} );
-
-	return item;
-}
-
-/**
- * Returns `true` if in the site editor navigation root
- *
- * Checks whether the “Back to dashboard” button is visible. If
- * not in the root, a “Back” button would be visible instead.
- *
- * @return {Promise<boolean>} Whether it currently is the navigation root or not
- */
-export async function isSiteEditorRoot() {
-	const { navigationPanel } = SELECTORS;
-
-	const isBackToDashboardButtonVisible = !! ( await page.$(
-		navigationPanel.backToDashboard
-	) );
-
-	return isBackToDashboardButtonVisible;
-}
-
-/**
- * Navigates the site editor back
- */
-export async function navigateSiteEditorBack() {
-	const { navigationPanel } = SELECTORS;
-
-	await page.click( navigationPanel.goBack );
-}
-
-/**
- * Goes back until it gets to the root
- */
-export async function navigateSiteEditorBackToRoot() {
-	while ( ! ( await isSiteEditorRoot() ) ) {
-		await navigateSiteEditorBack();
-	}
-}
-
-/**
- * Opens the site editor navigation panel if closed
- */
-export async function openSiteEditorNavigationPanel() {
-	const { navigationPanel } = SELECTORS;
-
-	const isOpen = !! ( await page.$( navigationPanel.isOpenState ) );
-
-	if ( ! isOpen ) {
-		await page.click( navigationPanel.open );
-		await page.waitForSelector( navigationPanel.panelContainer );
-	}
-}
-
-/**
- * Navigates through a sequence of links in the site editor navigation panel
- *
- * @param {string[] | string} labels Labels to navigate through
- */
-export async function siteEditorNavigateSequence( labels ) {
-	if ( ! Array.isArray( labels ) ) {
-		labels = [ labels ];
-	}
-
-	for ( const label of labels ) {
-		await clickSiteEditorMenuItem( label );
-	}
-}
-
 /**
  * Visits the Site Editor main page
  *
@@ -286,3 +161,16 @@ export async function openPreviousGlobalStylesPanel() {
 		'div[aria-label="Editor settings"] button[aria-label="Navigate to the previous view"]'
 	);
 }
+
+/**
+ * Enters edit mode.
+ */
+export async function enterEditMode() {
+	const editSiteToggle = await page.$( '.edit-site-layout__edit-button' );
+	// This check is necessary for the performance tests in old branches
+	// where the site editor toggle was not implemented yet.
+	if ( ! editSiteToggle ) {
+		return;
+	}
+	await page.click( '.edit-site-layout__edit-button' );
+}
diff --git a/packages/e2e-tests/config/setup-performance-test.js b/packages/e2e-tests/config/setup-performance-test.js
index ae2b347b99d18..172699035571e 100644
--- a/packages/e2e-tests/config/setup-performance-test.js
+++ b/packages/e2e-tests/config/setup-performance-test.js
@@ -34,6 +34,9 @@ beforeAll( async () => {
 	await trashAllPosts( 'wp_block' );
 	await setupBrowser();
 	await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
+	await page.emulateMediaFeatures( [
+		{ name: 'prefers-reduced-motion', value: 'reduce' },
+	] );
 } );
 
 afterEach( async () => {
diff --git a/packages/e2e-tests/specs/experiments/blocks/post-comments-form.test.js b/packages/e2e-tests/specs/experiments/blocks/post-comments-form.test.js
index 0ba5eb72e5915..4253c38a3da04 100644
--- a/packages/e2e-tests/specs/experiments/blocks/post-comments-form.test.js
+++ b/packages/e2e-tests/specs/experiments/blocks/post-comments-form.test.js
@@ -6,8 +6,7 @@ import {
 	activateTheme,
 	setOption,
 	visitSiteEditor,
-	openSiteEditorNavigationPanel,
-	navigateSiteEditorBackToRoot,
+	enterEditMode,
 	deleteAllTemplates,
 	canvas,
 } from '@wordpress/e2e-test-utils';
@@ -24,15 +23,14 @@ describe( 'Post Comments Form', () => {
 
 			// Navigate to "Singular" post template
 			await visitSiteEditor();
-			await openSiteEditorNavigationPanel();
-			await navigateSiteEditorBackToRoot();
 			await expect( page ).toClick(
-				'.components-navigation__item-title',
+				'.edit-site-sidebar-navigation-item',
 				{ text: /templates/i }
 			);
 			await expect( page ).toClick( '.components-heading > a', {
 				text: /singular/i,
 			} );
+			await enterEditMode();
 
 			// Insert post comments form
 			await insertBlock( 'Post Comments Form' );
diff --git a/packages/e2e-tests/specs/performance/site-editor.test.js b/packages/e2e-tests/specs/performance/site-editor.test.js
index 3b7774ac57935..eaa3323b7b16c 100644
--- a/packages/e2e-tests/specs/performance/site-editor.test.js
+++ b/packages/e2e-tests/specs/performance/site-editor.test.js
@@ -15,6 +15,7 @@ import {
 	saveDraft,
 	insertBlock,
 	deleteAllTemplates,
+	enterEditMode,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -114,6 +115,7 @@ describe( 'Site Editor Performance', () => {
 		await canvas().waitForSelector(
 			'[data-type="core/post-content"] [data-type="core/paragraph"]'
 		);
+		await enterEditMode();
 		await canvas().click(
 			'[data-type="core/post-content"] [data-type="core/paragraph"]'
 		);
diff --git a/packages/e2e-tests/specs/site-editor/global-styles-sidebar.test.js b/packages/e2e-tests/specs/site-editor/global-styles-sidebar.test.js
index bcc81670ce8f0..d833926c88001 100644
--- a/packages/e2e-tests/specs/site-editor/global-styles-sidebar.test.js
+++ b/packages/e2e-tests/specs/site-editor/global-styles-sidebar.test.js
@@ -5,6 +5,7 @@ import {
 	deleteAllTemplates,
 	activateTheme,
 	visitSiteEditor,
+	enterEditMode,
 	toggleGlobalStyles,
 	openGlobalStylesPanel,
 } from '@wordpress/e2e-test-utils';
@@ -26,6 +27,7 @@ describe( 'Global styles sidebar', () => {
 	} );
 	beforeEach( async () => {
 		await visitSiteEditor();
+		await enterEditMode();
 	} );
 	describe( 'blocks list', () => {
 		it( 'should filter results properly', async () => {
diff --git a/packages/e2e-tests/specs/site-editor/multi-entity-editing.test.js b/packages/e2e-tests/specs/site-editor/multi-entity-editing.test.js
deleted file mode 100644
index 18af53555216a..0000000000000
--- a/packages/e2e-tests/specs/site-editor/multi-entity-editing.test.js
+++ /dev/null
@@ -1,309 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	insertBlock,
-	createNewPost,
-	publishPost,
-	deleteAllTemplates,
-	activateTheme,
-	canvas,
-	openDocumentSettingsSidebar,
-	pressKeyWithModifier,
-	selectBlockByClientId,
-	visitSiteEditor,
-	clickSiteEditorMenuItem,
-	navigateSiteEditorBackToRoot,
-	openSiteEditorNavigationPanel,
-	siteEditorNavigateSequence,
-} from '@wordpress/e2e-test-utils';
-
-const clickTemplateItem = async ( menus, itemName ) => {
-	await openSiteEditorNavigationPanel();
-	await navigateSiteEditorBackToRoot();
-	await siteEditorNavigateSequence( menus );
-	await clickSiteEditorMenuItem( itemName );
-};
-
-const createTemplatePart = async (
-	templatePartName = 'test-template-part',
-	isNested = false
-) => {
-	// Create new template part.
-	await insertBlock( 'Template Part' );
-	const [ createNewButton ] = await page.$x(
-		'//button[contains(text(), "New template part")]'
-	);
-	await createNewButton.click();
-	await page.waitForSelector(
-		isNested
-			? '.wp-block-template-part .wp-block-template-part.block-editor-block-list__layout'
-			: '.wp-block-template-part.block-editor-block-list__layout'
-	);
-	await openDocumentSettingsSidebar();
-
-	const advancedPanelXPath = `//div[contains(@class,"interface-interface-skeleton__sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"Advanced")]`;
-	const advancedPanel = await page.waitForXPath( advancedPanelXPath );
-	await advancedPanel.click();
-
-	const nameInputXPath = `${ advancedPanelXPath }/ancestor::div[contains(@class, "components-panel__body")]//div[contains(@class,"components-base-control__field")]//label[contains(text(), "Title")]/following-sibling::input`;
-	const nameInput = await page.waitForXPath( nameInputXPath );
-	await nameInput.click();
-
-	// Select all of the text in the title field.
-	await pressKeyWithModifier( 'primary', 'a' );
-
-	// Give the reusable block a title.
-	await page.keyboard.type( templatePartName );
-};
-
-const editTemplatePart = async ( textToAdd, isNested = false ) => {
-	await page.click(
-		`${
-			isNested
-				? '.wp-block-template-part .wp-block-template-part'
-				: '.wp-block-template-part'
-		} .block-editor-button-block-appender`
-	);
-	await page.click( '.editor-block-list-item-paragraph' );
-	for ( const text of textToAdd ) {
-		await page.keyboard.type( text );
-		await page.keyboard.press( 'Enter' );
-	}
-};
-
-const saveAllEntities = async () => {
-	if ( await openEntitySavePanel() ) {
-		await page.click( 'button.editor-entities-saved-states__save-button' );
-	}
-};
-
-const openEntitySavePanel = async () => {
-	// Open the entity save panel if it is not already open.
-	try {
-		await page.waitForSelector( '.entities-saved-states__panel', {
-			timeout: 500,
-		} );
-	} catch {
-		try {
-			await page.click(
-				'.edit-site-save-button__button[aria-disabled=false]',
-				{ timeout: 500 }
-			);
-		} catch {
-			try {
-				await page.click(
-					'.editor-post-publish-button__button.has-changes-dot',
-					{ timeout: 500 }
-				);
-			} catch {
-				return false; // Not dirty because the button is disabled.
-			}
-		}
-		await page.waitForSelector( '.entities-saved-states__panel' );
-	}
-	// If we made it this far, the panel is opened.
-
-	return true;
-};
-
-const isEntityDirty = async ( name ) => {
-	const isOpen = await openEntitySavePanel();
-	if ( ! isOpen ) {
-		return false;
-	}
-	try {
-		await page.waitForXPath(
-			`//label[@class="components-checkbox-control__label"]//strong[contains(text(),"${ name }")]`,
-			{ timeout: 1000 }
-		);
-		return true;
-	} catch {}
-	return false;
-};
-
-const removeErrorMocks = () => {
-	// TODO: Add back console mocks when
-	// https://github.com/WordPress/gutenberg/issues/17355 is fixed.
-	/* eslint-disable no-console */
-	console.warn.mockReset();
-	console.error.mockReset();
-	console.info.mockReset();
-	/* eslint-enable no-console */
-};
-
-describe( 'Multi-entity editor states', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-	} );
-
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-	} );
-
-	it( 'should not display any dirty entities when loading the site editor', async () => {
-		await visitSiteEditor();
-		expect( await openEntitySavePanel() ).toBe( false );
-	} );
-
-	// Skip reason: This should be rewritten to use other methods to switching to different templates.
-	it.skip( 'should not dirty an entity by switching to it in the template dropdown', async () => {
-		await visitSiteEditor( {
-			postId: 'emptytheme//header',
-			postType: 'wp_template_part',
-		} );
-		await page.waitForFunction( () =>
-			Array.from( window.frames ).find(
-				( { name } ) => name === 'editor-canvas'
-			)
-		);
-
-		// Wait for blocks to load.
-		await canvas().waitForSelector( '.wp-block' );
-		expect( await isEntityDirty( 'header' ) ).toBe( false );
-		expect( await isEntityDirty( 'Index' ) ).toBe( false );
-
-		// Switch back and make sure it is still clean.
-		await clickTemplateItem( 'Templates', 'Index' );
-		await page.waitForFunction( () =>
-			Array.from( window.frames ).find(
-				( { name } ) => name === 'editor-canvas'
-			)
-		);
-		await canvas().waitForSelector( '.wp-block' );
-		expect( await isEntityDirty( 'header' ) ).toBe( false );
-		expect( await isEntityDirty( 'Index' ) ).toBe( false );
-
-		removeErrorMocks();
-	} );
-
-	describe( 'Multi-entity edit', () => {
-		const templatePartName = 'Test Template Part Name Edit';
-		const nestedTPName = 'Test Nested Template Part Name Edit';
-		const templateName = 'Custom Template';
-
-		beforeAll( async () => {
-			await deleteAllTemplates( 'wp_template' );
-			await deleteAllTemplates( 'wp_template_part' );
-			await createNewPost( {
-				postType: 'wp_template',
-				title: templateName,
-			} );
-			await publishPost();
-			await createTemplatePart( templatePartName );
-			await editTemplatePart( [
-				'Default template part test text.',
-				'Second paragraph test.',
-			] );
-			await createTemplatePart( nestedTPName, true );
-			await editTemplatePart(
-				[ 'Nested Template Part Text.', 'Second Nested test.' ],
-				true
-			);
-			await saveAllEntities();
-			await visitSiteEditor();
-
-			// Wait for site editor to load.
-			await canvas().waitForSelector(
-				'.wp-block-template-part.block-editor-block-list__layout'
-			);
-
-			// Our custom template shows up in the "Templates > General" menu; let's use it.
-			await clickTemplateItem(
-				[ 'Templates', 'General templates' ],
-				templateName
-			);
-			await page.waitForXPath(
-				`//h1[contains(@class, "edit-site-document-actions__title") and contains(text(), '${ templateName }')]`
-			);
-
-			removeErrorMocks();
-		} );
-
-		const saveAndWaitResponse = async () => {
-			await Promise.all( [
-				saveAllEntities(),
-
-				// Wait for the save request and the subsequent query to be
-				// fulfilled - both are requests made to /index.php route.
-				// Without that, clicked elements can lose focus sometimes
-				// when the response is received.
-				page.waitForResponse( ( response ) => {
-					return (
-						response.url().includes( 'index.php' ) &&
-						response.request().method() === 'POST'
-					);
-				} ),
-
-				page.waitForResponse( ( response ) => {
-					return (
-						response.url().includes( 'index.php' ) &&
-						response.request().method() === 'GET'
-					);
-				} ),
-			] );
-			removeErrorMocks();
-		};
-
-		it.skip( 'should only dirty the parent entity when editing the parent', async () => {
-			// Clear selection so that the block is not added to the template part.
-			await insertBlock( 'Paragraph' );
-
-			// Add changes to the main parent entity.
-			await page.keyboard.type( 'Test.' );
-
-			expect( await isEntityDirty( templateName ) ).toBe( true );
-			expect( await isEntityDirty( templatePartName ) ).toBe( false );
-			expect( await isEntityDirty( nestedTPName ) ).toBe( false );
-			await saveAndWaitResponse();
-		} );
-
-		it.skip( 'should only dirty the child when editing the child', async () => {
-			// Select parent TP to unlock selecting content.
-			await canvas().click( '.wp-block-template-part' );
-			await canvas().click(
-				'.wp-block-template-part .wp-block[data-type="core/paragraph"]'
-			);
-			await page.keyboard.type( 'Some more test words!' );
-
-			expect( await isEntityDirty( templateName ) ).toBe( false );
-			expect( await isEntityDirty( templatePartName ) ).toBe( true );
-			expect( await isEntityDirty( nestedTPName ) ).toBe( false );
-			await saveAndWaitResponse();
-		} );
-
-		it.skip( 'should only dirty the nested entity when editing the nested entity', async () => {
-			// Select parent TP to unlock selecting child.
-			await canvas().click( '.wp-block-template-part' );
-			// Select child TP to unlock selecting content.
-			await canvas().click(
-				'.wp-block-template-part .wp-block-template-part'
-			);
-			await canvas().click(
-				'.wp-block-template-part .wp-block-template-part .wp-block[data-type="core/paragraph"]'
-			);
-			await page.keyboard.type( 'Nested test words!' );
-
-			expect( await isEntityDirty( templateName ) ).toBe( false );
-			expect( await isEntityDirty( templatePartName ) ).toBe( false );
-			expect( await isEntityDirty( nestedTPName ) ).toBe( true );
-			await saveAndWaitResponse();
-		} );
-
-		it.skip( 'should not allow selecting template part content without parent selected', async () => {
-			// Unselect blocks.
-			await selectBlockByClientId();
-			// Try to select a child block of a template part.
-			await canvas().click(
-				'.wp-block-template-part .wp-block-template-part .wp-block[data-type="core/paragraph"]'
-			);
-
-			const selectedBlock = await page.evaluate( () => {
-				return wp.data.select( 'core/block-editor' ).getSelectedBlock();
-			} );
-			expect( selectedBlock?.name ).toBe( 'core/template-part' );
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js b/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js
index 5f70bb21183d5..592d7781856a4 100644
--- a/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js
+++ b/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js
@@ -13,6 +13,7 @@ import {
 	clickButton,
 	createReusableBlock,
 	visitSiteEditor,
+	enterEditMode,
 	deleteAllTemplates,
 } from '@wordpress/e2e-test-utils';
 
@@ -265,6 +266,8 @@ describe( 'Multi-entity save flow', () => {
 				postType: 'wp_template',
 			} );
 
+			await enterEditMode();
+
 			// Select the header template part via list view.
 			await page.click( '.edit-site-header-edit-mode__list-view-toggle' );
 			const headerTemplatePartListViewButton = await page.waitForXPath(
@@ -302,6 +305,8 @@ describe( 'Multi-entity save flow', () => {
 				postType: 'wp_template',
 			} );
 
+			await enterEditMode();
+
 			// Insert a paragraph at the bottom.
 			await insertBlock( 'Paragraph' );
 
diff --git a/packages/e2e-tests/specs/site-editor/settings-sidebar.test.js b/packages/e2e-tests/specs/site-editor/settings-sidebar.test.js
index 5ad50ff58b554..3428ddd654023 100644
--- a/packages/e2e-tests/specs/site-editor/settings-sidebar.test.js
+++ b/packages/e2e-tests/specs/site-editor/settings-sidebar.test.js
@@ -8,6 +8,7 @@ import {
 	selectBlockByClientId,
 	insertBlock,
 	visitSiteEditor,
+	enterEditMode,
 } from '@wordpress/e2e-test-utils';
 
 async function toggleSidebar() {
@@ -49,6 +50,7 @@ describe( 'Settings sidebar', () => {
 	} );
 	beforeEach( async () => {
 		await visitSiteEditor();
+		await enterEditMode();
 	} );
 
 	describe( 'Template tab', () => {
@@ -68,6 +70,7 @@ describe( 'Settings sidebar', () => {
 				postId: 'emptytheme//singular',
 				postType: 'wp_template',
 			} );
+			await enterEditMode();
 			const templateCardAfterNavigation = await getTemplateCard();
 
 			expect( templateCardBeforeNavigation ).toMatchObject( {
diff --git a/packages/e2e-tests/specs/site-editor/site-editor-export.test.js b/packages/e2e-tests/specs/site-editor/site-editor-export.test.js
index cb457fffcfc0b..0e560e9b7e0ad 100644
--- a/packages/e2e-tests/specs/site-editor/site-editor-export.test.js
+++ b/packages/e2e-tests/specs/site-editor/site-editor-export.test.js
@@ -12,6 +12,7 @@ import {
 	deleteAllTemplates,
 	activateTheme,
 	visitSiteEditor,
+	enterEditMode,
 	clickOnMoreMenuItem,
 } from '@wordpress/e2e-test-utils';
 
@@ -41,6 +42,7 @@ describe( 'Site Editor Templates Export', () => {
 
 	beforeEach( async () => {
 		await visitSiteEditor();
+		await enterEditMode();
 	} );
 
 	it( 'clicking export should download emptytheme.zip file', async () => {
diff --git a/packages/edit-site/src/components/add-new-template/new-template-part.js b/packages/edit-site/src/components/add-new-template/new-template-part.js
index d2e396f6580db..783545bac826b 100644
--- a/packages/edit-site/src/components/add-new-template/new-template-part.js
+++ b/packages/edit-site/src/components/add-new-template/new-template-part.js
@@ -17,6 +17,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { useHistory } from '../routes';
+import { store as editSiteStore } from '../../store';
 import CreateTemplatePartModal from '../create-template-part-modal';
 
 export default function NewTemplatePart( { postType } ) {
@@ -24,6 +25,7 @@ export default function NewTemplatePart( { postType } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
 
 	async function createTemplatePart( { title, area } ) {
 		if ( ! title ) {
@@ -54,6 +56,9 @@ export default function NewTemplatePart( { postType } ) {
 
 			setIsModalOpen( false );
 
+			// Switch to edit mode.
+			__unstableSetCanvasMode( 'edit' );
+
 			// Navigate to the created template part editor.
 			history.push( {
 				postId: templatePart.id,
diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js
index c7372d17d63dd..d8458246a8609 100644
--- a/packages/edit-site/src/components/add-new-template/new-template.js
+++ b/packages/edit-site/src/components/add-new-template/new-template.js
@@ -93,7 +93,8 @@ export default function NewTemplate( { postType } ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const { setTemplate } = useDispatch( editSiteStore );
+	const { setTemplate, __unstableSetCanvasMode } =
+		useDispatch( editSiteStore );
 
 	async function createTemplate( template, isWPSuggestion = true ) {
 		if ( isCreatingTemplate ) {
@@ -133,6 +134,9 @@ export default function NewTemplate( { postType } ) {
 			// Set template before navigating away to avoid initial stale value.
 			setTemplate( newTemplate.id, newTemplate.slug );
 
+			// Switch to edit mode.
+			__unstableSetCanvasMode( 'edit' );
+
 			// Navigate to the created template editor.
 			history.push( {
 				postId: newTemplate.id,
diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js
index 266a1a42f92bf..c86743bc59895 100644
--- a/packages/edit-site/src/components/app/index.js
+++ b/packages/edit-site/src/components/app/index.js
@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { SlotFillProvider } from '@wordpress/components';
+import { SlotFillProvider, Popover } from '@wordpress/components';
 import { UnsavedChangesWarning } from '@wordpress/editor';
+import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -12,12 +13,9 @@ import { PluginArea } from '@wordpress/plugins';
  * Internal dependencies
  */
 import { Routes } from '../routes';
-import Editor from '../editor';
-import List from '../list';
-import NavigationSidebar from '../navigation-sidebar';
-import getIsListPage from '../../utils/get-is-list-page';
+import Layout from '../layout';
 
-export default function EditSiteApp( { reboot, homeTemplate } ) {
+export default function App( { reboot } ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
 	function onPluginAreaError( name ) {
@@ -33,43 +31,16 @@ export default function EditSiteApp( { reboot, homeTemplate } ) {
 	}
 
 	return (
-		<SlotFillProvider>
-			<UnsavedChangesWarning />
+		<ShortcutProvider style={ { height: '100%' } }>
+			<SlotFillProvider>
+				<Popover.Slot />
+				<UnsavedChangesWarning />
 
-			<Routes>
-				{ ( { params } ) => {
-					const isListPage = getIsListPage( params );
-
-					// The existence of a 'front-page' supersedes every other setting.
-					const homeTemplateType =
-						params.postId?.includes( 'front-page' ) ||
-						params.postId === homeTemplate?.postId
-							? 'site-editor'
-							: undefined;
-
-					return (
-						<>
-							{ isListPage ? (
-								<List />
-							) : (
-								<Editor onError={ reboot } />
-							) }
-							<PluginArea onError={ onPluginAreaError } />
-							{ /* Keep the instance of the sidebar to ensure focus will not be lost
-							 * when navigating to other pages. */ }
-							<NavigationSidebar
-								// Open the navigation sidebar by default when in the list page.
-								isDefaultOpen={ !! isListPage }
-								activeTemplateType={
-									isListPage
-										? params.postType
-										: homeTemplateType
-								}
-							/>
-						</>
-					);
-				} }
-			</Routes>
-		</SlotFillProvider>
+				<Routes>
+					<Layout onError={ reboot } />
+					<PluginArea onError={ onPluginAreaError } />
+				</Routes>
+			</SlotFillProvider>
+		</ShortcutProvider>
 	);
 }
diff --git a/packages/edit-site/src/components/block-editor/resizable-editor.js b/packages/edit-site/src/components/block-editor/resizable-editor.js
index 6dcf434ff0606..6cdf3811f729c 100644
--- a/packages/edit-site/src/components/block-editor/resizable-editor.js
+++ b/packages/edit-site/src/components/block-editor/resizable-editor.js
@@ -34,10 +34,11 @@ const HANDLE_STYLES_OVERRIDE = {
 
 function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
-	const { deviceType, isZoomOutMode } = useSelect(
+	const { deviceType, isZoomOutMode, canvasMode } = useSelect(
 		( select ) => ( {
 			deviceType:
 				select( editSiteStore ).__experimentalGetPreviewDeviceType(),
+			canvasMode: select( editSiteStore ).__unstableGetCanvasMode(),
 			isZoomOutMode:
 				select( blockEditorStore ).__unstableGetEditorMode() ===
 				'zoom-out',
@@ -49,17 +50,19 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 	const iframeRef = useRef();
 	const mouseMoveTypingResetRef = useMouseMoveTypingReset();
 	const ref = useMergeRefs( [ iframeRef, mouseMoveTypingResetRef ] );
-
+	const isResizingEnabled = enableResizing && canvasMode !== 'view';
 	const resizeWidthBy = useCallback( ( deltaPixels ) => {
 		if ( iframeRef.current ) {
 			setWidth( iframeRef.current.offsetWidth + deltaPixels );
 		}
 	}, [] );
+
 	return (
 		<ResizableBox
 			size={ {
-				width: enableResizing ? width : '100%',
-				height: enableResizing && sizes.height ? sizes.height : '100%',
+				width: isResizingEnabled ? width : '100%',
+				height:
+					isResizingEnabled && sizes.height ? sizes.height : '100%',
 			} }
 			onResizeStop={ ( event, direction, element ) => {
 				setWidth( element.style.width );
@@ -68,10 +71,10 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 			maxWidth="100%"
 			maxHeight="100%"
 			enable={ {
-				right: enableResizing,
-				left: enableResizing,
+				right: isResizingEnabled,
+				left: isResizingEnabled,
 			} }
-			showHandle={ enableResizing }
+			showHandle={ isResizingEnabled }
 			// The editor is centered horizontally, resizing it only
 			// moves half the distance. Hence double the ratio to correctly
 			// align the cursor to the resizer handle.
@@ -97,8 +100,9 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 			} }
 		>
 			<Iframe
-				isZoomedOut={ isZoomOutMode }
-				style={ enableResizing ? {} : deviceStyles }
+				scale={ ( isZoomOutMode && 0.45 ) || undefined }
+				frameSize={ isZoomOutMode ? 100 : undefined }
+				style={ isResizingEnabled ? {} : deviceStyles }
 				head={
 					<>
 						<EditorStyles styles={ settings.styles } />
@@ -108,7 +112,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 							`.is-root-container { display: flow-root; }
 							body { position: relative; }`
 						}</style>
-						{ enableResizing && (
+						{ isResizingEnabled && (
 							<style>
 								{
 									// Some themes will have `min-height: 100vh` for the root container,
@@ -123,6 +127,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 				ref={ ref }
 				name="editor-canvas"
 				className="edit-site-visual-editor__editor-canvas"
+				readonly={ canvasMode === 'view' }
 				{ ...props }
 			>
 				{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index 6f7e27f8a1cc2..76ddabe01adc6 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -14,12 +14,23 @@
 
 .edit-site-visual-editor {
 	position: relative;
+	height: 100%;
+	display: block;
+	overflow: hidden;
 	background-color: $gray-800;
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 
+	iframe {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
 	&.is-focus-mode {
-		padding: $grid-unit-60;
+		.edit-site-layout.is-full-canvas & {
+			padding: $grid-unit-60;
+		}
 
 		.edit-site-visual-editor__editor-canvas {
 			border-radius: $radius-block-ui;
diff --git a/packages/edit-site/src/components/code-editor/style.scss b/packages/edit-site/src/components/code-editor/style.scss
index f288ddcec8685..0e79575c49f67 100644
--- a/packages/edit-site/src/components/code-editor/style.scss
+++ b/packages/edit-site/src/components/code-editor/style.scss
@@ -1,8 +1,8 @@
 .edit-site-code-editor {
 	position: relative;
 	width: 100%;
+	min-height: 100%;
 	background-color: $white;
-	flex-grow: 1;
 
 	&__body {
 		width: 100%;
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index bdb7563a76db5..8ed10e81f626c 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Popover, Button, Notice } from '@wordpress/components';
+import { Button, Notice } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
+import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	BlockContextProvider,
 	BlockBreadcrumb,
@@ -21,34 +22,25 @@ import {
 	EntitiesSavedStates,
 } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
-import {
-	ShortcutProvider,
-	store as keyboardShortcutsStore,
-} from '@wordpress/keyboard-shortcuts';
-import { store as preferencesStore } from '@wordpress/preferences';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
  */
-import Header from '../header-edit-mode';
 import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode';
-import NavigationSidebar from '../navigation-sidebar';
 import BlockEditor from '../block-editor';
 import CodeEditor from '../code-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
-import URLQueryController from '../url-query-controller';
+import useInitEditedEntityFromURL from '../use-init-edited-entity-from-url';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
-import ErrorBoundary from '../error-boundary';
 import WelcomeGuide from '../welcome-guide';
 import { store as editSiteStore } from '../../store';
-import { GlobalStylesRenderer } from './global-styles-renderer';
+import { GlobalStylesRenderer } from '../global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import useTitle from '../routes/use-title';
 
 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. */
@@ -57,86 +49,97 @@ const interfaceLabels = {
 	actions: __( 'Editor publish' ),
 	/* translators: accessibility text for the editor footer landmark region. */
 	footer: __( 'Editor footer' ),
-	/* translators: accessibility text for the navigation sidebar landmark region. */
-	drawer: __( 'Navigation Sidebar' ),
 };
 
-function Editor( { onError } ) {
+export default function Editor() {
+	// This ensures the edited entity id and type are initialized properly.
+	useInitEditedEntityFromURL();
+
 	const {
+		editedPostId,
+		editedPostType,
+		editedPost,
+		page,
+		hasLoadedPost,
+		editorMode,
+		canvasMode,
+		blockEditorMode,
+		isRightSidebarOpen,
 		isInserterOpen,
 		isListViewOpen,
 		isSaveViewOpen,
-		sidebarIsOpened,
-		settings,
-		entityId,
-		templateType,
-		page,
-		template,
-		templateResolved,
-		isNavigationOpen,
 		previousShortcut,
 		nextShortcut,
-		editorMode,
 		showIconLabels,
-		blockEditorMode,
 	} = useSelect( ( select ) => {
 		const {
-			isInserterOpened,
-			isListViewOpened,
-			isSaveViewOpened,
-			getSettings,
 			getEditedPostType,
 			getEditedPostId,
 			getPage,
-			isNavigationOpened,
 			getEditorMode,
+			__unstableGetCanvasMode,
+			isInserterOpened,
+			isListViewOpened,
+			isSaveViewOpened,
 		} = select( editSiteStore );
 		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
+		const { getAllShortcutKeyCombinations } = select(
+			keyboardShortcutsStore
+		);
+		const { getActiveComplementaryArea } = select( interfaceStore );
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
 
-		// The currently selected entity to display. Typically template or template part.
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
 		return {
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-			isSaveViewOpen: isSaveViewOpened(),
-			sidebarIsOpened: !! select(
-				interfaceStore
-			).getActiveComplementaryArea( editSiteStore.name ),
-			settings: getSettings(),
-			templateType: postType,
-			page: getPage(),
-			template: postId
+			editedPostId: postId,
+			editedPostType: postType,
+			editedPost: postId
 				? getEntityRecord( 'postType', postType, postId )
 				: null,
-			templateResolved: postId
+			page: getPage(),
+			hasLoadedPost: postId
 				? hasFinishedResolution( 'getEntityRecord', [
 						'postType',
 						postType,
 						postId,
 				  ] )
 				: false,
-			entityId: postId,
-			isNavigationOpen: isNavigationOpened(),
-			previousShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
-			nextShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
 			editorMode: getEditorMode(),
+			canvasMode: __unstableGetCanvasMode(),
+			blockEditorMode: __unstableGetEditorMode(),
+			isInserterOpen: isInserterOpened(),
+			isListViewOpen: isListViewOpened(),
+			isSaveViewOpen: isSaveViewOpened(),
+			isRightSidebarOpen: getActiveComplementaryArea(
+				editSiteStore.name
+			),
+			previousShortcut: getAllShortcutKeyCombinations(
+				'core/edit-site/previous-region'
+			),
+			nextShortcut: getAllShortcutKeyCombinations(
+				'core/edit-site/next-region'
+			),
 			showIconLabels: select( preferencesStore ).get(
 				'core/edit-site',
 				'showIconLabels'
 			),
-			blockEditorMode: __unstableGetEditorMode(),
 		};
 	}, [] );
-	const { setPage, setIsInserterOpened, setIsSaveViewOpened } =
-		useDispatch( editSiteStore );
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const { setIsSaveViewOpened, setPage } = useDispatch( editSiteStore );
 
+	const isViewMode = canvasMode === 'view';
+	const isEditMode = canvasMode === 'edit';
+	const showVisualEditor = isViewMode || editorMode === 'visual';
+	const showBlockBreakcrumb =
+		isEditMode && showVisualEditor && blockEditorMode !== 'zoom-out';
+	const shouldShowInserter = isEditMode && showVisualEditor && isInserterOpen;
+	const shouldShowListView = isEditMode && showVisualEditor && isListViewOpen;
+	const secondarySidebarLabel = isListViewOpen
+		? __( 'List View' )
+		: __( 'Block Library' );
 	const blockContext = useMemo(
 		() => ( {
 			...page?.context,
@@ -157,186 +160,123 @@ function Editor( { onError } ) {
 		} ),
 		[ page?.context ]
 	);
-
-	useEffect( () => {
-		if ( isNavigationOpen ) {
-			document.body.classList.add( 'is-navigation-sidebar-open' );
-		} else {
-			document.body.classList.remove( 'is-navigation-sidebar-open' );
-		}
-	}, [ isNavigationOpen ] );
-
-	useEffect(
-		function openGlobalStylesOnLoad() {
-			const searchParams = new URLSearchParams( window.location.search );
-			if ( searchParams.get( 'styles' ) === 'open' ) {
-				enableComplementaryArea(
-					'core/edit-site',
-					'edit-site/global-styles'
-				);
-			}
-		},
-		[ enableComplementaryArea ]
-	);
-
-	// Don't render the Editor until the settings are set and loaded.
-	const isReady =
-		settings?.siteUrl &&
-		templateType !== undefined &&
-		entityId !== undefined;
-
-	const secondarySidebarLabel = isListViewOpen
-		? __( 'List View' )
-		: __( 'Block Library' );
-
-	const secondarySidebar = () => {
-		if ( editorMode === 'visual' && isInserterOpen ) {
-			return <InserterSidebar />;
-		}
-		if ( editorMode === 'visual' && isListViewOpen ) {
-			return <ListViewSidebar />;
-		}
-		return null;
-	};
+	const isReady = editedPostType !== undefined && editedPostId !== undefined;
 
 	// Only announce the title once the editor is ready to prevent "Replace"
 	// action in <URlQueryController> from double-announcing.
 	useTitle( isReady && __( 'Editor (beta)' ) );
 
+	if ( ! isReady ) {
+		return null;
+	}
+
 	return (
 		<>
-			<URLQueryController />
-			{ isReady && (
-				<ShortcutProvider>
-					<EntityProvider kind="root" type="site">
-						<EntityProvider
-							kind="postType"
-							type={ templateType }
-							id={ entityId }
-						>
-							<GlobalStylesProvider>
-								<BlockContextProvider value={ blockContext }>
-									<GlobalStylesRenderer />
-									<ErrorBoundary onError={ onError }>
-										<KeyboardShortcuts.Register />
-										<SidebarComplementaryAreaFills />
-										<InterfaceSkeleton
-											labels={ {
-												...interfaceLabels,
-												secondarySidebar:
-													secondarySidebarLabel,
-											} }
-											className={
-												showIconLabels &&
-												'show-icon-labels'
-											}
-											secondarySidebar={ secondarySidebar() }
-											sidebar={
-												sidebarIsOpened && (
-													<ComplementaryArea.Slot scope="core/edit-site" />
-												)
-											}
-											drawer={
-												<NavigationSidebar.Slot />
-											}
-											header={
-												<Header
-													showIconLabels={
-														showIconLabels
+			{ isEditMode && <WelcomeGuide /> }
+			<KeyboardShortcuts.Register />
+			<SidebarComplementaryAreaFills />
+			<EntityProvider kind="root" type="site">
+				<EntityProvider
+					kind="postType"
+					type={ editedPostType }
+					id={ editedPostId }
+				>
+					<GlobalStylesProvider>
+						<BlockContextProvider value={ blockContext }>
+							<InterfaceSkeleton
+								className={
+									showIconLabels && 'show-icon-labels'
+								}
+								notices={ isEditMode && <EditorSnackbars /> }
+								content={
+									<>
+										<GlobalStylesRenderer />
+										<EditorNotices />
+										{ showVisualEditor && editedPost && (
+											<BlockEditor />
+										) }
+										{ editorMode === 'text' &&
+											editedPost && <CodeEditor /> }
+										{ hasLoadedPost && ! editedPost && (
+											<Notice
+												status="warning"
+												isDismissible={ false }
+											>
+												{ __(
+													"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+												) }
+											</Notice>
+										) }
+										{ isEditMode && <KeyboardShortcuts /> }
+									</>
+								}
+								secondarySidebar={
+									isEditMode &&
+									( ( shouldShowInserter && (
+										<InserterSidebar />
+									) ) ||
+										( shouldShowListView && (
+											<ListViewSidebar />
+										) ) )
+								}
+								sidebar={
+									isEditMode &&
+									isRightSidebarOpen && (
+										<ComplementaryArea.Slot scope="core/edit-site" />
+									)
+								}
+								actions={
+									isEditMode && (
+										<>
+											{ isSaveViewOpen ? (
+												<EntitiesSavedStates
+													close={ () =>
+														setIsSaveViewOpened(
+															false
+														)
 													}
 												/>
-											}
-											notices={ <EditorSnackbars /> }
-											content={
-												<>
-													<EditorNotices />
-													{ editorMode === 'visual' &&
-														template && (
-															<BlockEditor
-																setIsInserterOpen={
-																	setIsInserterOpened
-																}
-															/>
-														) }
-													{ editorMode === 'text' &&
-														template && (
-															<CodeEditor />
-														) }
-													{ templateResolved &&
-														! template &&
-														settings?.siteUrl &&
-														entityId && (
-															<Notice
-																status="warning"
-																isDismissible={
-																	false
-																}
-															>
-																{ __(
-																	"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-																) }
-															</Notice>
-														) }
-													<KeyboardShortcuts />
-												</>
-											}
-											actions={
-												<>
-													{ isSaveViewOpen ? (
-														<EntitiesSavedStates
-															close={ () =>
-																setIsSaveViewOpened(
-																	false
-																)
-															}
-														/>
-													) : (
-														<div className="edit-site-editor__toggle-save-panel">
-															<Button
-																variant="secondary"
-																className="edit-site-editor__toggle-save-panel-button"
-																onClick={ () =>
-																	setIsSaveViewOpened(
-																		true
-																	)
-																}
-																aria-expanded={
-																	false
-																}
-															>
-																{ __(
-																	'Open save panel'
-																) }
-															</Button>
-														</div>
-													) }
-												</>
-											}
-											footer={
-												blockEditorMode !==
-												'zoom-out' ? (
-													<BlockBreadcrumb
-														rootLabelText={ __(
-															'Template'
+											) : (
+												<div className="edit-site-editor__toggle-save-panel">
+													<Button
+														variant="secondary"
+														className="edit-site-editor__toggle-save-panel-button"
+														onClick={ () =>
+															setIsSaveViewOpened(
+																true
+															)
+														}
+														aria-expanded={ false }
+													>
+														{ __(
+															'Open save panel'
 														) }
-													/>
-												) : undefined
-											}
-											shortcuts={ {
-												previous: previousShortcut,
-												next: nextShortcut,
-											} }
+													</Button>
+												</div>
+											) }
+										</>
+									)
+								}
+								footer={
+									showBlockBreakcrumb && (
+										<BlockBreadcrumb
+											rootLabelText={ __( 'Template' ) }
 										/>
-										<WelcomeGuide />
-										<Popover.Slot />
-									</ErrorBoundary>
-								</BlockContextProvider>
-							</GlobalStylesProvider>
-						</EntityProvider>
-					</EntityProvider>
-				</ShortcutProvider>
-			) }
+									)
+								}
+								shortcuts={ {
+									previous: previousShortcut,
+									next: nextShortcut,
+								} }
+								labels={ {
+									...interfaceLabels,
+									secondarySidebar: secondarySidebarLabel,
+								} }
+							/>
+						</BlockContextProvider>
+					</GlobalStylesProvider>
+				</EntityProvider>
+			</EntityProvider>
 		</>
 	);
 }
-export default Editor;
diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
index 80a41bbb30be0..19dddf81d9432 100644
--- a/packages/edit-site/src/components/editor/style.scss
+++ b/packages/edit-site/src/components/editor/style.scss
@@ -1,11 +1,3 @@
-html #wpadminbar {
-	display: none;
-}
-
-html.wp-toolbar {
-	padding-top: 0;
-}
-
 .edit-site-editor__toggle-save-panel {
 	box-sizing: border-box;
 	width: $sidebar-width;
@@ -22,20 +14,6 @@ html.wp-toolbar {
 	}
 }
 
-.edit-site-visual-editor {
-	position: relative;
-	height: 100%;
-	display: block;
-	overflow: hidden;
-
-	iframe {
-		display: block;
-		width: 100%;
-		height: 100%;
-		background-color: $white;
-	}
-}
-
 // Adjust the position of the notices
 .edit-site .components-editor-notices__snackbar {
 	position: fixed;
diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/global-styles-renderer/index.js
similarity index 100%
rename from packages/edit-site/src/components/editor/global-styles-renderer.js
rename to packages/edit-site/src/components/global-styles-renderer/index.js
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index 9129a025d5261..43915135ec276 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -41,6 +41,7 @@
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		color: currentColor;
 	}
 
 	.edit-site-document-actions__secondary-item {
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 a88486a8c5981..c67a00069aa8d 100644
--- a/packages/edit-site/src/components/header-edit-mode/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -27,6 +27,7 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -42,7 +43,7 @@ const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
-export default function Header( { showIconLabels } ) {
+export default function HeaderEditMode() {
 	const inserterButton = useRef();
 	const {
 		deviceType,
@@ -53,6 +54,7 @@ export default function Header( { showIconLabels } ) {
 		isVisualMode,
 		blockEditorMode,
 		homeUrl,
+		showIconLabels,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -81,6 +83,10 @@ export default function Header( { showIconLabels } ) {
 			isVisualMode: getEditorMode() === 'visual',
 			blockEditorMode: __unstableGetEditorMode(),
 			homeUrl: getUnstableBase()?.home,
+			showIconLabels: select( preferencesStore ).get(
+				'core/edit-site',
+				'showIconLabels'
+			),
 		};
 	}, [] );
 
@@ -121,7 +127,11 @@ export default function Header( { showIconLabels } ) {
 	const isZoomedOutView = blockEditorMode === 'zoom-out';
 
 	return (
-		<div className="edit-site-header-edit-mode">
+		<div
+			className={ classnames( 'edit-site-header-edit-mode', {
+				'show-icon-labels': showIconLabels,
+			} ) }
+		>
 			<NavigableToolbar
 				className="edit-site-header-edit-mode__start"
 				aria-label={ __( 'Document tools' ) }
@@ -182,6 +192,7 @@ export default function Header( { showIconLabels } ) {
 							{ isZoomedOutViewExperimentEnabled && (
 								<ToolbarItem
 									as={ Button }
+									className="edit-site-header-edit-mode__zoom-out-view-toggle"
 									icon={ chevronUpDown }
 									isPressed={ isZoomedOutView }
 									/* translators: button label text should, if possible, be under 16 characters. */
diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
index 7f3f7d1c421b4..32b3e17912ee9 100644
--- a/packages/edit-site/src/components/header-edit-mode/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -1,20 +1,15 @@
 $header-toolbar-min-width: 335px;
 
 .edit-site-header-edit-mode {
+	height: $header-height;
 	align-items: center;
 	background-color: $white;
+	color: $gray-900;
 	display: flex;
-	height: $header-height;
 	box-sizing: border-box;
 	width: 100%;
 	justify-content: space-between;
-
-	body.is-fullscreen-mode & {
-		padding-left: 60px;
-		transition: padding-left 20ms linear;
-		transition-delay: 80ms;
-		@include reduce-motion("transition");
-	}
+	border-bottom: $border-width solid $gray-200;
 
 	.edit-site-header-edit-mode__start {
 		display: flex;
@@ -40,29 +35,6 @@ $header-toolbar-min-width: 335px;
 	}
 }
 
-// Keeps the document title centered when the sidebar is open
-body.is-navigation-sidebar-open {
-	.edit-site-header-edit-mode {
-		padding-left: 0;
-		transition: padding-left 20ms linear;
-		transition-delay: 0ms;
-		@include reduce-motion("transition");
-	}
-}
-
-// Centred document title on small screens with sidebar open
-@media ( max-width: #{ ($break-large - 1) } ) {
-	body.is-navigation-sidebar-open .edit-site-header-edit-mode {
-		.edit-site-header-edit-mode__inserter-toggle ~ .components-button,
-		.edit-site-header-edit-mode__end .components-button:not(.is-primary) {
-			display: none;
-		}
-		.edit-site-save-button__button {
-			margin-right: 0;
-		}
-	}
-}
-
 .edit-site-header-edit-mode__toolbar {
 	display: flex;
 	align-items: center;
@@ -177,7 +149,7 @@ body.is-navigation-sidebar-open {
 
 // Button text label styles
 
-.show-icon-labels .edit-site-header-edit-mode {
+.edit-site-header-edit-mode.show-icon-labels {
 	.components-button.has-icon {
 		width: auto;
 
@@ -218,7 +190,7 @@ body.is-navigation-sidebar-open {
 		padding: 0 $grid-unit-10;
 	}
 
-	.edit-site-header__start .edit-site-header__toolbar > * + * {
+	.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > * + * {
 		margin-left: $grid-unit-10;
 	}
 }
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
new file mode 100644
index 0000000000000..ab3d90eabb83a
--- /dev/null
+++ b/packages/edit-site/src/components/layout/index.js
@@ -0,0 +1,274 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import {
+	useReducedMotion,
+	useViewportMatch,
+	useResizeObserver,
+} from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useState, useEffect } from '@wordpress/element';
+import { NavigableRegion } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { Sidebar } from '../sidebar';
+import Editor from '../editor';
+import ListPage from '../list';
+import ErrorBoundary from '../error-boundary';
+import { store as editSiteStore } from '../../store';
+import { useLocation } from '../routes';
+import getIsListPage from '../../utils/get-is-list-page';
+import Header from '../header-edit-mode';
+import SiteIcon from '../site-icon';
+import SiteTitle from '../site-title';
+
+const ANIMATION_DURATION = 0.5;
+
+export default function Layout( { onError } ) {
+	const { params } = useLocation();
+	const isListPage = getIsListPage( params );
+	const isEditorPage = ! isListPage;
+	const { canvasMode, dashboardLink } = useSelect(
+		( select ) => ( {
+			canvasMode: select( editSiteStore ).__unstableGetCanvasMode(),
+			dashboardLink:
+				select( editSiteStore ).getSettings()
+					.__experimentalDashboardLink,
+		} ),
+		[]
+	);
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const disableMotion = useReducedMotion();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ isMobileCanvasVisible, setIsMobileCanvasVisible ] =
+		useState( false );
+	const canvasPadding = isMobileViewport ? 0 : 24;
+	const showSidebar =
+		( isMobileViewport && ! isMobileCanvasVisible ) ||
+		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
+	const showCanvas =
+		( isMobileViewport && isMobileCanvasVisible ) || ! isMobileViewport;
+	const showFrame =
+		! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport );
+	const showEditButton =
+		isEditorPage &&
+		isMobileViewport &&
+		canvasMode === 'view' &&
+		isMobileCanvasVisible;
+	const isBackToDashboardButton =
+		( ! isMobileViewport && canvasMode === 'view' ) ||
+		( isMobileViewport && ! isMobileCanvasVisible );
+	// Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
+	const [ canvasResizer, canvasSize ] = useResizeObserver();
+	const [ fullResizer, fullSize ] = useResizeObserver();
+	useEffect( () => {
+		if ( canvasMode === 'view' && isMobileViewport ) {
+			setIsMobileCanvasVisible( false );
+		}
+
+		if ( canvasMode === 'edit' && isMobileViewport ) {
+			setIsMobileCanvasVisible( true );
+		}
+	}, [ canvasMode, isMobileViewport ] );
+	const siteIconButtonProps = isBackToDashboardButton
+		? {
+				href: dashboardLink || 'index.php',
+				'aria-label': __( 'Go back to the dashboard' ),
+		  }
+		: {
+				label: __( 'Open Navigation Sidebar' ),
+				onClick: () => {
+					clearSelectedBlock();
+					setIsMobileCanvasVisible( false );
+					__unstableSetCanvasMode( 'view' );
+				},
+		  };
+
+	return (
+		<>
+			{ fullResizer }
+			<div
+				className={ classnames( 'edit-site-layout', {
+					'is-full-canvas':
+						( isEditorPage &&
+							canvasMode === 'edit' &&
+							! isMobileViewport ) ||
+						isMobileCanvasVisible,
+				} ) }
+			>
+				<div className="edit-site-layout__header">
+					<div className="edit-site-layout__logo">
+						<Button
+							{ ...siteIconButtonProps }
+							className="edit-site-layout__view-mode-toggle"
+						>
+							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						</Button>
+						<AnimatePresence initial={ false }>
+							{ ( isBackToDashboardButton || showEditButton ) && (
+								<motion.div
+									initial={ { opacity: 0 } }
+									exit={ { opacity: 0 } }
+									animate={ { opacity: 1 } }
+									style={ {
+										position: 'absolute',
+										left: 60,
+									} }
+								>
+									<HStack>
+										{ isBackToDashboardButton && (
+											<SiteTitle />
+										) }
+
+										{ showEditButton && (
+											<Button
+												className="edit-site-layout__edit-button"
+												label={ __(
+													'Open the editor'
+												) }
+												onClick={ () => {
+													__unstableSetCanvasMode(
+														'edit'
+													);
+												} }
+											>
+												{ __( 'Edit' ) }
+											</Button>
+										) }
+									</HStack>
+								</motion.div>
+							) }
+						</AnimatePresence>
+
+						{ isMobileViewport && ! isMobileCanvasVisible && (
+							<Button
+								onClick={ () =>
+									setIsMobileCanvasVisible( true )
+								}
+								style={ { position: 'fixed', right: 0 } }
+							>
+								{ __( 'View Editor' ) }
+							</Button>
+						) }
+					</div>
+					<AnimatePresence>
+						{ isEditorPage && canvasMode === 'edit' && (
+							<NavigableRegion
+								as={ motion.div }
+								initial={ { y: -60 } }
+								animate={ { y: 0 } }
+								edit={ { y: -60 } }
+								transition={ {
+									type: 'tween',
+									duration: disableMotion
+										? 0
+										: ANIMATION_DURATION,
+									ease: 'easeOut',
+								} }
+								className="edit-site-layout__editor-header"
+								ariaLabel={ __( 'Editor top bar' ) }
+							>
+								<Header />
+							</NavigableRegion>
+						) }
+					</AnimatePresence>
+				</div>
+
+				<AnimatePresence initial={ false }>
+					{ showSidebar && (
+						<motion.div
+							initial={ {
+								opacity: 0,
+							} }
+							animate={ {
+								opacity: 1,
+							} }
+							exit={ {
+								opacity: 0,
+							} }
+							transition={ {
+								type: 'tween',
+								duration: disableMotion
+									? 0
+									: ANIMATION_DURATION,
+								ease: 'easeOut',
+							} }
+							className="edit-site-layout__sidebar"
+						>
+							<Sidebar />
+						</motion.div>
+					) }
+				</AnimatePresence>
+
+				{ showCanvas && (
+					<div
+						className="edit-site-layout__canvas-container"
+						style={ {
+							paddingTop: showFrame ? canvasPadding : 0,
+							paddingBottom: showFrame ? canvasPadding : 0,
+						} }
+					>
+						{ canvasResizer }
+						{ !! canvasSize.width && (
+							<motion.div
+								initial={ false }
+								layout="position"
+								className="edit-site-layout__canvas"
+								transition={ {
+									type: 'tween',
+									duration: disableMotion
+										? 0
+										: ANIMATION_DURATION,
+									ease: 'easeOut',
+								} }
+							>
+								<motion.div
+									style={ {
+										position: 'absolute',
+										top: 0,
+										left: 0,
+										bottom: 0,
+									} }
+									initial={ false }
+									animate={ {
+										width: showFrame
+											? canvasSize.width - canvasPadding
+											: fullSize.width,
+									} }
+									transition={ {
+										type: 'tween',
+										duration: disableMotion
+											? 0
+											: ANIMATION_DURATION,
+										ease: 'easeOut',
+									} }
+								>
+									<ErrorBoundary onError={ onError }>
+										{ isEditorPage && <Editor /> }
+										{ isListPage && <ListPage /> }
+									</ErrorBoundary>
+								</motion.div>
+							</motion.div>
+						) }
+					</div>
+				) }
+			</div>
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
new file mode 100644
index 0000000000000..f8b788704b936
--- /dev/null
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -0,0 +1,174 @@
+.edit-site-layout {
+	min-height: 100%;
+	background: $gray-900;
+	color: $white;
+	display: flex;
+	flex-direction: column;
+	@include break-small {
+		display: grid;
+		grid-template-columns: 320px 1fr;
+		grid-template-rows: auto 1fr;
+		grid-template-areas:
+			"header canvas"
+			"sidebar canvas";
+
+		&.is-full-canvas {
+			grid-template-areas:
+				"header header"
+				"canvas canvas";
+		}
+	}
+}
+
+.edit-site-layout__header {
+	grid-area: header;
+	height: $header-height;
+	display: flex;
+}
+
+.edit-site-layout__logo {
+	align-items: center;
+	height: $header-height;
+	display: flex;
+	justify-content: space-between;
+
+	.components-button {
+		color: currentColor;
+	}
+}
+
+.edit-site-layout__edit-button {
+	background: $gray-800;
+	color: $white;
+}
+
+.edit-site-layout__sidebar {
+	grid-area: sidebar;
+	z-index: 1;
+	padding-top: $grid-unit-80;
+
+	// This is only necessary for the exit animation
+	.edit-site-layout.is-full-canvas & {
+		display: none;
+		@include break-small {
+			display: block;
+			grid-area: header;
+			position: absolute;
+			top: 60px;
+		}
+	}
+}
+
+.edit-site-layout__editor-header {
+	flex-grow: 1;
+
+	// This is only necessary for the exit animation
+	.edit-site-layout:not(.is-full-canvas) & {
+		position: fixed;
+		left: 60px;
+		right: 0;
+	}
+}
+
+.edit-site-layout__canvas-container {
+	grid-area: canvas;
+	position: relative;
+	flex-grow: 1;
+	z-index: 2;
+}
+
+.edit-site-layout__canvas {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
+
+	& > div {
+		color: $gray-900;
+		background: $white;
+	}
+	@include break-small {
+		top: $canvas-padding;
+		bottom: $canvas-padding;
+		width: calc(100% - #{$canvas-padding});
+
+		& > div {
+			border-radius: $radius-block-ui * 4;
+			// Not sure why this is necessary.
+			.edit-site-layout:not(.is-full-canvas) & .edit-site-visual-editor__editor-canvas,
+			.edit-site-layout:not(.is-full-canvas) & .interface-interface-skeleton__content {
+				border-radius: $radius-block-ui * 4;
+			}
+		}
+
+	}
+
+	.edit-site-layout.is-full-canvas & {
+		top: 0;
+		bottom: 0;
+		width: 100%;
+		border-radius: 0;
+	}
+}
+
+// This shouldn't be necessary (we should have a way to say that a skeletton is relative
+.edit-site-layout__canvas .interface-interface-skeleton {
+	position: relative !important;
+	max-height: auto !important;
+	min-height: 100% !important;
+}
+
+.edit-site-layout__view-mode-toggle.components-button {
+	position: relative;
+	background: $gray-900;
+	color: $white;
+	height: calc(100% + #{$border-width});
+	border-radius: 0;
+	margin-bottom: -$border-width;
+
+	&:hover,
+	&:active {
+		color: $white;
+	}
+
+	&:focus {
+		box-shadow: none;
+	}
+
+	&::before {
+		transition: box-shadow 0.1s ease;
+		@include reduce-motion("transition");
+		content: "";
+		display: block;
+		position: absolute;
+		top: 9px;
+		right: 9px;
+		bottom: 9px;
+		left: 9px;
+		border-radius: $radius-block-ui + $border-width + $border-width;
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
+	}
+
+	// Hover color.
+	&:hover::before {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
+	}
+
+	&.has-icon:hover::before {
+		box-shadow: none;
+	}
+
+	// Lightened spot color focus.
+	&:focus::before {
+		box-shadow:
+			inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1),
+			inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+
+	.edit-site-layout__view-mode-toggle-icon {
+		border-radius: $radius-block-ui;
+		object-fit: cover;
+	}
+}
diff --git a/packages/edit-site/src/components/list/index.js b/packages/edit-site/src/components/list/index.js
index 2b56930142ad4..aceaaf59d0aa1 100644
--- a/packages/edit-site/src/components/list/index.js
+++ b/packages/edit-site/src/components/list/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -18,9 +13,7 @@ import { EditorSnackbars } from '@wordpress/editor';
  */
 import useRegisterShortcuts from './use-register-shortcuts';
 import Header from './header';
-import NavigationSidebar from '../navigation-sidebar';
 import Table from './table';
-import { store as editSiteStore } from '../../store';
 import { useLocation } from '../routes';
 import useTitle from '../routes/use-title';
 
@@ -31,22 +24,16 @@ export default function List() {
 
 	useRegisterShortcuts();
 
-	const { previousShortcut, nextShortcut, isNavigationOpen } = useSelect(
-		( select ) => {
-			return {
-				previousShortcut: select(
-					keyboardShortcutsStore
-				).getAllShortcutKeyCombinations(
-					'core/edit-site/previous-region'
-				),
-				nextShortcut: select(
-					keyboardShortcutsStore
-				).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
-				isNavigationOpen: select( editSiteStore ).isNavigationOpened(),
-			};
-		},
-		[]
-	);
+	const { previousShortcut, nextShortcut } = useSelect( ( select ) => {
+		return {
+			previousShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
+			nextShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
+		};
+	}, [] );
 
 	const postType = useSelect(
 		( select ) => select( coreStore ).getPostType( templateType ),
@@ -75,15 +62,9 @@ export default function List() {
 
 	return (
 		<InterfaceSkeleton
-			className={ classnames( 'edit-site-list', {
-				'is-navigation-open': isNavigationOpen,
-			} ) }
-			labels={ {
-				drawer: __( 'Navigation Sidebar' ),
-				...detailedRegionLabels,
-			} }
+			className="edit-site-list"
+			labels={ detailedRegionLabels }
 			header={ <Header templateType={ templateType } /> }
-			drawer={ <NavigationSidebar.Slot /> }
 			notices={ <EditorSnackbars /> }
 			content={ <Table templateType={ templateType } /> }
 			shortcuts={ {
diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss
index f18e90c00fc61..b8c8f2be27db1 100644
--- a/packages/edit-site/src/components/list/style.scss
+++ b/packages/edit-site/src/components/list/style.scss
@@ -1,7 +1,6 @@
 .edit-site-list-header {
 	position: relative;
 	align-items: center;
-	background-color: $white;
 	display: flex;
 	height: $header-height;
 	box-sizing: border-box;
@@ -53,15 +52,19 @@
 			@include break-medium() {
 				padding: $grid-unit * 9;
 			}
+
+			& > .interface-navigable-region__stacker {
+				height: auto;
+			}
 		}
 	}
 }
 
 .edit-site-list-table {
-	width: 100%;
+	min-width: 100%;
 	border: $border-width solid $gray-300;
 	border-radius: 2px;
-	margin: 0;
+	margin: 0 auto;
 	overflow: hidden;
 	border-spacing: 0;
 	max-width: 960px;
diff --git a/packages/edit-site/src/components/navigation-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/index.js
deleted file mode 100644
index c76c1047dd776..0000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/index.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-import { createSlotFill } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import NavigationPanel from './navigation-panel';
-import NavigationToggle from './navigation-toggle';
-
-export const {
-	Fill: NavigationPanelPreviewFill,
-	Slot: NavigationPanelPreviewSlot,
-} = createSlotFill( 'EditSiteNavigationPanelPreview' );
-
-const { Fill: NavigationSidebarFill, Slot: NavigationSidebarSlot } =
-	createSlotFill( 'EditSiteNavigationSidebar' );
-
-function NavigationSidebar( { isDefaultOpen = false, activeTemplateType } ) {
-	const isDesktopViewport = useViewportMatch( 'medium' );
-	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
-
-	useEffect(
-		function autoOpenNavigationPanelOnViewportChange() {
-			setIsNavigationPanelOpened( isDefaultOpen && isDesktopViewport );
-		},
-		[ isDefaultOpen, isDesktopViewport, setIsNavigationPanelOpened ]
-	);
-
-	return (
-		<NavigationSidebarFill>
-			<NavigationToggle />
-			<NavigationPanel activeItem={ activeTemplateType } />
-			<NavigationPanelPreviewSlot />
-		</NavigationSidebarFill>
-	);
-}
-
-NavigationSidebar.Slot = NavigationSidebarSlot;
-
-export default NavigationSidebar;
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/constants.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/constants.js
deleted file mode 100644
index 671bf2b8dd302..0000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/constants.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import {
-	TEMPLATE_PART_AREA_HEADER,
-	TEMPLATE_PART_AREA_FOOTER,
-	TEMPLATE_PART_AREA_SIDEBAR,
-	TEMPLATE_PART_AREA_GENERAL,
-} from '../../../store/constants';
-
-export const TEMPLATES_PRIMARY = [
-	'index',
-	'singular',
-	'archive',
-	'single',
-	'page',
-	'home',
-	'404',
-	'search',
-];
-
-export const TEMPLATES_SECONDARY = [
-	'author',
-	'category',
-	'taxonomy',
-	'date',
-	'tag',
-	'attachment',
-	'single',
-	'front-page',
-];
-
-export const TEMPLATES_TOP_LEVEL = [
-	...TEMPLATES_PRIMARY,
-	...TEMPLATES_SECONDARY,
-];
-
-export const TEMPLATES_GENERAL = [ 'page-home' ];
-
-export const TEMPLATES_POSTS_PREFIXES = [
-	'post-',
-	'author-',
-	'single-',
-	'tag-',
-];
-
-export const TEMPLATES_PAGES_PREFIXES = [ 'page-' ];
-
-export const TEMPLATE_OVERRIDES = {
-	singular: [ 'single', 'page' ],
-	index: [ 'archive', '404', 'search', 'singular', 'home' ],
-	home: [ 'front-page' ],
-};
-
-export const MENU_ROOT = 'root';
-export const MENU_TEMPLATE_PARTS = 'template-parts';
-export const MENU_TEMPLATES = 'templates';
-export const MENU_TEMPLATES_GENERAL = 'templates-general';
-export const MENU_TEMPLATES_PAGES = 'templates-pages';
-export const MENU_TEMPLATES_POSTS = 'templates-posts';
-export const MENU_TEMPLATES_UNUSED = 'templates-unused';
-
-export const MENU_TEMPLATE_PARTS_HEADERS = 'template-parts-headers';
-export const MENU_TEMPLATE_PARTS_FOOTERS = 'template-parts-footers';
-export const MENU_TEMPLATE_PARTS_SIDEBARS = 'template-parts-sidebars';
-export const MENU_TEMPLATE_PARTS_GENERAL = 'template-parts-general';
-
-export const TEMPLATE_PARTS_SUB_MENUS = [
-	{
-		area: TEMPLATE_PART_AREA_HEADER,
-		menu: MENU_TEMPLATE_PARTS_HEADERS,
-		title: __( 'headers' ),
-	},
-	{
-		area: TEMPLATE_PART_AREA_FOOTER,
-		menu: MENU_TEMPLATE_PARTS_FOOTERS,
-		title: __( 'footers' ),
-	},
-	{
-		area: TEMPLATE_PART_AREA_SIDEBAR,
-		menu: MENU_TEMPLATE_PARTS_SIDEBARS,
-		title: __( 'sidebars' ),
-	},
-	{
-		area: TEMPLATE_PART_AREA_GENERAL,
-		menu: MENU_TEMPLATE_PARTS_GENERAL,
-		title: __( 'general' ),
-	},
-];
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
deleted file mode 100644
index 8b820c8a13edd..0000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalNavigation as Navigation,
-	__experimentalNavigationBackButton as NavigationBackButton,
-	__experimentalNavigationGroup as NavigationGroup,
-	__experimentalNavigationItem as NavigationItem,
-	__experimentalNavigationMenu as NavigationMenu,
-} from '@wordpress/components';
-import { store as coreDataStore } from '@wordpress/core-data';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { ESCAPE } from '@wordpress/keycodes';
-import { decodeEntities } from '@wordpress/html-entities';
-import {
-	home as siteIcon,
-	layout as templateIcon,
-	symbolFilled as templatePartIcon,
-} from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { useLink } from '../../routes/link';
-import { store as editSiteStore } from '../../../store';
-
-const SITE_EDITOR_KEY = 'site-editor';
-
-function NavLink( { params, replace, ...props } ) {
-	const linkProps = useLink( params, replace );
-
-	return <NavigationItem { ...linkProps } { ...props } />;
-}
-
-const NavigationPanel = ( { activeItem } ) => {
-	const {
-		homeTemplate,
-		isNavigationOpen,
-		isTemplatePartsMode,
-		siteTitle,
-		dashboardLink,
-	} = useSelect( ( select ) => {
-		const { getEntityRecord } = select( coreDataStore );
-		const { getSettings, isNavigationOpened } = select( editSiteStore );
-
-		const siteData =
-			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-		const {
-			supportsTemplatePartsMode,
-			__unstableHomeTemplate,
-			__experimentalDashboardLink,
-		} = getSettings();
-
-		return {
-			siteTitle: siteData.name,
-			homeTemplate: __unstableHomeTemplate,
-			dashboardLink: __experimentalDashboardLink,
-			isNavigationOpen: isNavigationOpened(),
-			isTemplatePartsMode: !! supportsTemplatePartsMode,
-		};
-	}, [] );
-	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
-
-	const closeOnEscape = ( event ) => {
-		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
-			event.preventDefault();
-			setIsNavigationPanelOpened( false );
-		}
-	};
-
-	return (
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<div
-			className={ classnames( `edit-site-navigation-panel`, {
-				'is-open': isNavigationOpen,
-			} ) }
-			onKeyDown={ closeOnEscape }
-		>
-			<div className="edit-site-navigation-panel__inner">
-				<div className="edit-site-navigation-panel__site-title-container">
-					<div className="edit-site-navigation-panel__site-title">
-						{ decodeEntities( siteTitle ) }
-					</div>
-				</div>
-				<div className="edit-site-navigation-panel__scroll-container">
-					<Navigation activeItem={ activeItem }>
-						<NavigationBackButton
-							backButtonLabel={ __( 'Dashboard' ) }
-							className="edit-site-navigation-panel__back-to-dashboard"
-							href={ dashboardLink ?? 'index.php' }
-						/>
-
-						<NavigationMenu>
-							<NavigationGroup title={ __( 'Editor' ) }>
-								{ ! isTemplatePartsMode && (
-									<>
-										<NavLink
-											icon={ siteIcon }
-											title={ __( 'Site' ) }
-											item={ SITE_EDITOR_KEY }
-											params={ {
-												postId: homeTemplate?.postId,
-												postType:
-													homeTemplate?.postType,
-											} }
-										/>
-										<NavLink
-											icon={ templateIcon }
-											title={ __( 'Templates' ) }
-											item="wp_template"
-											params={ {
-												postId: undefined,
-												postType: 'wp_template',
-											} }
-										/>
-									</>
-								) }
-								<NavLink
-									icon={ templatePartIcon }
-									title={ __( 'Template Parts' ) }
-									item="wp_template_part"
-									params={ {
-										postId: undefined,
-										postType: 'wp_template_part',
-									} }
-								/>
-							</NavigationGroup>
-						</NavigationMenu>
-					</Navigation>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default NavigationPanel;
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss
deleted file mode 100644
index a66a90876c8d4..0000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-.edit-site-navigation-panel {
-	height: 100%;
-	position: relative;
-	width: 0;
-	overflow: hidden;
-	background: $gray-900;
-	color: $white;
-	transition: width 100ms linear;
-	@include reduce-motion("transition");
-}
-
-.edit-site-navigation-panel__inner {
-	position: relative;
-	width: $nav-sidebar-width;
-	height: 100%;
-	overflow: hidden;
-	// Inner container is hidden to remove menu from the accessibility tree when not visible.
-	// Setting visibility here (rather than on the parent container) preserves the slide transition.
-	visibility: hidden;
-	// Transition settings should match parent container.
-	transition: visibility 100ms linear;
-	@include reduce-motion("transition");
-}
-
-.edit-site-navigation-panel.is-open {
-	width: $nav-sidebar-width;
-
-	.edit-site-navigation-panel__inner {
-		visibility: visible;
-	}
-}
-
-.edit-site-navigation-panel__site-title-container {
-	height: $header-height;
-	padding-left: $header-height;
-	margin: 0 $grid-unit-20 0 $grid-unit-10;
-	display: flex;
-	align-items: center;
-}
-
-.edit-site-navigation-panel__site-title {
-	font-style: normal;
-	font-weight: 600;
-	font-size: 14px; /* Matches menu items */
-	line-height: 20px;
-	color: $gray-300;
-
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-}
-
-.edit-site-navigation-panel__scroll-container {
-	overflow-x: hidden;
-	overflow-y: auto;
-	height: calc(100% - #{$header-height});
-}
-
-.edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary {
-	height: $button-size;
-	margin-top: $grid-unit-30;
-	padding: $grid-unit $grid-unit-20 $grid-unit $grid-unit;
-
-	&:focus:not(:disabled) {
-		border-bottom-color: transparent;
-	}
-}
-
-.edit-site-navigation-panel__preview {
-	display: none;
-	border: $border-width solid $gray-400;
-	width: $nav-sidebar-width;
-	padding: $grid-unit-20;
-	background: $white;
-	box-shadow: $shadow-popover;
-	border-radius: $radius-block-ui;
-	position: absolute;
-	top: $header-height + $grid-unit-15 + 1px; // +1px for the header border
-	left: $nav-sidebar-width + $grid-unit-15;
-	color: $gray-900;
-	z-index: z-index(".edit-site-navigation-panel__preview");
-
-	@include break-medium {
-		display: block;
-	}
-}
-
-.edit-site-navigation-panel__template-item {
-	display: block;
-
-	.components-button {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		justify-content: center;
-		height: auto;
-		min-height: $button-size;
-		text-align: left;
-		padding-left: $grid-unit-20;
-		padding-right: $grid-unit-20;
-		color: inherit;
-	}
-}
-
-.edit-site-navigation-panel__template-item-title {
-	font-size: 14px;
-	line-height: 20px;
-
-	em {
-		margin-right: 1ch;
-	}
-}
-
-.edit-site-navigation-panel__template-parts .components-navigation__menu-title-heading {
-	text-transform: capitalize;
-}
-
-.edit-site-navigation-panel__template-part-item .components-navigation__item-title {
-	text-transform: capitalize;
-}
-
-.components-navigation__item + .edit-site-navigation-panel__template-item {
-	margin-top: $grid-unit-20;
-}
-
-.edit-site-navigation-panel__template-item + .edit-site-navigation-panel__template-item {
-	margin-top: $grid-unit-10;
-}
-
-.edit-site-navigation-panel__info-wrapper {
-	padding: $grid-unit-05 0;
-}
-
-.edit-site-navigation-panel__template-item-description {
-	padding-top: $grid-unit-10;
-	font-size: 12px;
-	line-height: 16px;
-}
-
-.edit-site-navigation-panel__new-template-dropdown {
-	margin: 0 0 0 $grid-unit-15;
-
-	button {
-		margin: 0;
-	}
-}
-.edit-site-navigation-panel__new-template-popover {
-	@include break-small() {
-		min-width: 300px;
-	}
-}
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-hierarchy.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-hierarchy.js
deleted file mode 100644
index 2f8d511ae10ea..0000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-hierarchy.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
-/**
- * Internal dependencies
- */
-import {
-	MENU_TEMPLATES,
-	MENU_TEMPLATES_GENERAL,
-	MENU_TEMPLATES_PAGES,
-	MENU_TEMPLATES_POSTS,
-	TEMPLATE_OVERRIDES,
-	TEMPLATES_GENERAL,
-	TEMPLATES_PAGES_PREFIXES,
-	TEMPLATES_POSTS_PREFIXES,
-	TEMPLATES_TOP_LEVEL,
-} from './constants';
-
-export function isTemplateSuperseded( slug, existingSlugs, showOnFront ) {
-	if ( ! TEMPLATE_OVERRIDES[ slug ] ) {
-		return false;
-	}
-
-	// `home` template is unused if it is superseded by `front-page`
-	// or "show on front" is set to show a page rather than blog posts.
-	if ( slug === 'home' && showOnFront !== 'posts' ) {
-		return true;
-	}
-
-	return TEMPLATE_OVERRIDES[ slug ].every(
-		( overrideSlug ) =>
-			existingSlugs.includes( overrideSlug ) ||
-			isTemplateSuperseded( overrideSlug, existingSlugs, showOnFront )
-	);
-}
-
-export function getTemplateLocation( slug ) {
-	const isTopLevelTemplate = TEMPLATES_TOP_LEVEL.includes( slug );
-	if ( isTopLevelTemplate ) {
-		return MENU_TEMPLATES;
-	}
-
-	const isGeneralTemplate = TEMPLATES_GENERAL.includes( slug );
-	if ( isGeneralTemplate ) {
-		return MENU_TEMPLATES_GENERAL;
-	}
-
-	const isPostsTemplate = TEMPLATES_POSTS_PREFIXES.some( ( prefix ) =>
-		slug.startsWith( prefix )
-	);
-	if ( isPostsTemplate ) {
-		return MENU_TEMPLATES_POSTS;
-	}
-
-	const isPagesTemplate = TEMPLATES_PAGES_PREFIXES.some( ( prefix ) =>
-		slug.startsWith( prefix )
-	);
-	if ( isPagesTemplate ) {
-		return MENU_TEMPLATES_PAGES;
-	}
-
-	return MENU_TEMPLATES_GENERAL;
-}
-
-export function getUnusedTemplates( templates, showOnFront ) {
-	const templateSlugs = map( templates, 'slug' );
-	const supersededTemplates = templates.filter( ( { slug } ) =>
-		isTemplateSuperseded( slug, templateSlugs, showOnFront )
-	);
-
-	return supersededTemplates;
-}
-
-export function getTemplatesLocationMap( templates ) {
-	return templates.reduce( ( obj, template ) => {
-		obj[ template.slug ] = getTemplateLocation( template.slug );
-		return obj;
-	}, {} );
-}
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
deleted file mode 100644
index 2cdc68858e480..0000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
-import {
-	Button,
-	Icon,
-	__unstableMotion as motion,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { wordpress } from '@wordpress/icons';
-import { store as coreDataStore } from '@wordpress/core-data';
-import { useReducedMotion } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-
-function NavigationToggle( { icon } ) {
-	const { isNavigationOpen, isRequestingSiteIcon, siteIconUrl } = useSelect(
-		( select ) => {
-			const { getEntityRecord, isResolving } = select( coreDataStore );
-			const siteData =
-				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-
-			return {
-				isNavigationOpen: select( editSiteStore ).isNavigationOpened(),
-				isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [
-					'root',
-					'__unstableBase',
-					undefined,
-				] ),
-				siteIconUrl: siteData.site_icon_url,
-			};
-		},
-		[]
-	);
-	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
-
-	const disableMotion = useReducedMotion();
-
-	const navigationToggleRef = useRef();
-
-	useEffect( () => {
-		// TODO: Remove this effect when alternative solution is merged.
-		// See: https://github.com/WordPress/gutenberg/pull/37314
-		if ( ! isNavigationOpen ) {
-			navigationToggleRef.current.focus();
-		}
-	}, [ isNavigationOpen ] );
-
-	const toggleNavigationPanel = () =>
-		setIsNavigationPanelOpened( ! isNavigationOpen );
-
-	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
-
-	const effect = {
-		expand: {
-			scale: 1.25,
-			transition: { type: 'tween', duration: '0.3' },
-		},
-	};
-
-	if ( siteIconUrl ) {
-		buttonIcon = (
-			<motion.img
-				variants={ ! disableMotion && effect }
-				alt={ __( 'Site Icon' ) }
-				className="edit-site-navigation-toggle__site-icon"
-				src={ siteIconUrl }
-			/>
-		);
-	} else if ( isRequestingSiteIcon ) {
-		buttonIcon = null;
-	} else if ( icon ) {
-		buttonIcon = <Icon size="36px" icon={ icon } />;
-	}
-
-	const classes = classnames( {
-		'edit-site-navigation-toggle__button': true,
-		'has-icon': siteIconUrl,
-	} );
-
-	return (
-		<motion.div
-			className={
-				'edit-site-navigation-toggle' +
-				( isNavigationOpen ? ' is-open' : '' )
-			}
-			whileHover="expand"
-		>
-			<Button
-				className={ classes }
-				label={ __( 'Toggle navigation' ) }
-				ref={ navigationToggleRef }
-				// isPressed will add unwanted styles.
-				aria-pressed={ isNavigationOpen }
-				onClick={ toggleNavigationPanel }
-				showTooltip
-			>
-				{ buttonIcon }
-			</Button>
-		</motion.div>
-	);
-}
-
-export default NavigationToggle;
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
deleted file mode 100644
index 39f53df6c94d9..0000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-// Developer notes: these rules are duplicated for the post editor.
-// They need to be updated in both places.
-
-.edit-site-navigation-toggle {
-	align-items: center;
-	background: $gray-900;
-	border-radius: 0;
-	display: flex;
-	position: absolute;
-	z-index: z-index(".edit-site-navigation-toggle");
-	height: $header-height;
-	width: $header-height;
-}
-
-.edit-site-navigation-toggle__button.components-button {
-	align-items: center;
-	background: $gray-900;
-	border-radius: 0;
-	color: $white;
-	height: $header-height + $border-width;
-	width: $header-height;
-	z-index: 1;
-	margin-bottom: - $border-width;
-	min-width: $header-height;
-
-	&:hover,
-	&:active {
-		color: $white;
-	}
-
-	&:focus {
-		box-shadow: none;
-	}
-
-	&::before {
-		transition: box-shadow 0.1s ease;
-		@include reduce-motion("transition");
-		content: "";
-		display: block;
-		position: absolute;
-		top: 9px;
-		right: 9px;
-		bottom: 9px;
-		left: 9px;
-		border-radius: $radius-block-ui + $border-width + $border-width;
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
-	}
-
-	// Hover color.
-	&:hover::before {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
-	}
-
-	&.has-icon:hover::before {
-		box-shadow: none;
-	}
-
-	// Lightened spot color focus.
-	&:focus::before {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
-	.edit-site-navigation-toggle__site-icon {
-		width: $button-size;
-		height: $button-size;
-		border-radius: $radius-block-ui;
-		object-fit: cover;
-		// Compensate for the top-bar border.
-		margin-top: -($border-width);
-	}
-}
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
deleted file mode 100644
index 9888593a8eca9..0000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import NavigationToggle from '..';
-
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test.
-	return jest.fn();
-} );
-
-describe( 'NavigationToggle', () => {
-	describe( 'when in full screen mode', () => {
-		it( 'should display a user uploaded site icon if it exists', () => {
-			useSelect.mockImplementation( ( cb ) =>
-				cb( () => ( {
-					getEntityRecord: () => ( {
-						site_icon_url: 'https://fakeUrl.com',
-					} ),
-					isResolving: () => false,
-					isNavigationOpened: () => false,
-				} ) )
-			);
-
-			const { unmount } = render( <NavigationToggle /> );
-
-			const siteIcon = screen.getByAltText( 'Site Icon' );
-			expect( siteIcon ).toBeVisible();
-
-			// Unmount the UI synchronously so that any async effects, like the on-mount focus
-			// that shows and positions a tooltip, are cancelled right away and never run.
-			unmount();
-		} );
-
-		it( 'should display a default site icon if no user uploaded site icon exists', () => {
-			useSelect.mockImplementation( ( cb ) =>
-				cb( () => ( {
-					getEntityRecord: () => ( {
-						site_icon_url: '',
-					} ),
-					isResolving: () => false,
-					isNavigationOpened: () => false,
-				} ) )
-			);
-
-			const { unmount } = render( <NavigationToggle /> );
-
-			const siteIcon = screen.queryByAltText( 'Site Icon' );
-			expect( siteIcon ).not.toBeInTheDocument();
-
-			// Unmount the UI synchronously so that any async effects, like the on-mount focus
-			// that shows and positions a tooltip, are cancelled right away and never run.
-			unmount();
-		} );
-	} );
-} );
diff --git a/packages/edit-site/src/components/routes/index.js b/packages/edit-site/src/components/routes/index.js
index b24fa069f1efd..7ef19280d4443 100644
--- a/packages/edit-site/src/components/routes/index.js
+++ b/packages/edit-site/src/components/routes/index.js
@@ -46,7 +46,7 @@ export function Routes( { children } ) {
 	return (
 		<HistoryContext.Provider value={ history }>
 			<RoutesContext.Provider value={ location }>
-				{ children( location ) }
+				{ children }
 			</RoutesContext.Provider>
 		</HistoryContext.Provider>
 	);
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss
index 9edb1f1787d1f..8c48661bd700f 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss
+++ b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss
@@ -11,8 +11,6 @@
 }
 
 .edit-site-navigation-inspector {
-	padding: $grid-unit-20;
-
 	.block-editor-list-view-leaf .block-editor-list-view-block-contents {
 		white-space: normal;
 	}
@@ -26,7 +24,6 @@
 	}
 }
 
-
 .edit-site-navigation-inspector__placeholder {
 	padding: $grid-unit-10;
 	margin: $grid-unit-10;
@@ -39,3 +36,24 @@
 		width: 50%;
 	}
 }
+
+.edit-site-navigation-inspector__empty-msg {
+	padding: 0 $grid-unit-10;
+}
+
+.edit-site-navigation-menu-sidebar__panel {
+	padding: $grid-unit-20;
+}
+
+.edit-site-navigation-sidebar__beta {
+	display: inline-flex;
+	margin-left: $grid-unit-10;
+	padding: 0 $grid-unit-10;
+	height: $grid-unit-30;
+	border-radius: $radius-block-ui;
+	background-color: $gray-900;
+	color: $white;
+	align-items: center;
+	font-size: $helptext-font-size;
+	line-height: 1;
+}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/style.scss
index 5dcd23653f889..d60c7fd6c55d9 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/style.scss
+++ b/packages/edit-site/src/components/sidebar-edit-mode/style.scss
@@ -78,19 +78,6 @@
 	padding: $grid-unit-20;
 }
 
-.edit-site-navigation-sidebar__beta {
-	display: inline-flex;
-	margin-left: $grid-unit-10;
-	padding: 0 $grid-unit-10;
-	height: $grid-unit-30;
-	border-radius: $radius-block-ui;
-	background-color: $gray-900;
-	color: $white;
-	align-items: center;
-	font-size: $helptext-font-size;
-	line-height: 1;
-}
-
 // Override the `hr` styles defined in the `ComplementaryArea` component
 // from the `@wordpress/interface` package.
 .edit-site-global-styles-sidebar hr {
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-item/index.js
new file mode 100644
index 0000000000000..a39ecfe7734bf
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-item/index.js
@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	FlexItem,
+} from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
+
+export default function SidebarNavigationItem( {
+	className,
+	icon,
+	children,
+	...props
+} ) {
+	return (
+		<Item
+			className={ classnames(
+				'edit-site-sidebar-navigation-item',
+				className
+			) }
+			{ ...props }
+		>
+			{ icon && (
+				<HStack justify="flex-start">
+					<Icon
+						style={ { fill: 'currentcolor' } }
+						icon={ icon }
+						size={ 24 }
+					/>
+					<FlexItem>{ children }</FlexItem>
+				</HStack>
+			) }
+			{ ! icon && children }
+		</Item>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
new file mode 100644
index 0000000000000..61885c0132fa2
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
@@ -0,0 +1,9 @@
+.edit-site-sidebar-navigation-item.components-item {
+	color: $gray-600;
+
+	&:hover,
+	&:focus,
+	&[aria-current] {
+		color: $white;
+	}
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-root/index.js b/packages/edit-site/src/components/sidebar-navigation-root/index.js
new file mode 100644
index 0000000000000..96c3a9324c0cf
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-root/index.js
@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { layout, symbolFilled } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationTitle from '../sidebar-navigation-title';
+import { useLink } from '../routes/link';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { useLocation } from '../routes';
+import { store as editSiteStore } from '../../store';
+import getIsListPage from '../../utils/get-is-list-page';
+
+export default function SidebarNavigationRoot() {
+	const { params } = useLocation();
+	const isListPage = getIsListPage( params );
+	const isEditorPage = ! isListPage;
+	const templatesLink = useLink( {
+		postType: 'wp_template',
+		postId: undefined,
+	} );
+	const templatePartsLink = useLink( {
+		postType: 'wp_template_part',
+		postId: undefined,
+	} );
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isTemplatesPage =
+		params.postType === 'wp_template' && ! params.postId;
+	const isTemplatePartsPage =
+		params.postType === 'wp_template_part' && ! params.postId;
+
+	return (
+		<VStack spacing={ 6 }>
+			<SidebarNavigationTitle
+				title={
+					<HStack style={ { minHeight: 36 } }>
+						<div>{ __( 'Design' ) }</div>
+						{ ! isMobileViewport && isEditorPage && (
+							<Button
+								className="edit-site-layout__edit-button"
+								label={ __( 'Open the editor' ) }
+								onClick={ () => {
+									__unstableSetCanvasMode( 'edit' );
+								} }
+							>
+								{ __( 'Edit' ) }
+							</Button>
+						) }
+					</HStack>
+				}
+			/>
+			<nav className="edit-site-sidebar-navigation-root">
+				<ItemGroup>
+					<SidebarNavigationItem
+						{ ...templatesLink }
+						icon={ layout }
+						aria-current={ isTemplatesPage ? 'page' : undefined }
+					>
+						{ __( 'Templates' ) }
+					</SidebarNavigationItem>
+					<SidebarNavigationItem
+						{ ...templatePartsLink }
+						icon={ symbolFilled }
+						aria-current={
+							isTemplatePartsPage ? 'page' : undefined
+						}
+					>
+						{ __( 'Template Parts' ) }
+					</SidebarNavigationItem>
+				</ItemGroup>
+			</nav>
+		</VStack>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-root/style.scss b/packages/edit-site/src/components/sidebar-navigation-root/style.scss
new file mode 100644
index 0000000000000..7d2efc6efeb29
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-root/style.scss
@@ -0,0 +1,3 @@
+.edit-site-sidebar-navigation-root {
+	margin: 0 $button-size;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-title/index.js b/packages/edit-site/src/components/sidebar-navigation-title/index.js
new file mode 100644
index 0000000000000..c233b06544ffe
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-title/index.js
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
+} from '@wordpress/components';
+import { isRTL, __, sprintf } from '@wordpress/i18n';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
+
+export default function SidebarNavigationTitle( { parentTitle, title } ) {
+	return (
+		<HStack spacing={ 4 } justify="flex-start">
+			{ parentTitle ? (
+				<NavigatorBackButton
+					className="edit-site-sidebar-navigation-title__back"
+					icon={ isRTL() ? chevronRight : chevronLeft }
+					aria-label={ sprintf(
+						/* translators: %s: previous page. */
+						__( 'Navigate to the previous view: %s' ),
+						parentTitle
+					) }
+				/>
+			) : (
+				<div className="edit-site-sidebar-navigation-title__icon-placeholder" />
+			) }
+			<div className="edit-site-sidebar-navigation-title">{ title }</div>
+		</HStack>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-title/style.scss b/packages/edit-site/src/components/sidebar-navigation-title/style.scss
new file mode 100644
index 0000000000000..0ac287fec2cdf
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-title/style.scss
@@ -0,0 +1,16 @@
+.edit-site-sidebar-navigation-title {
+	font-size: calc(1.56 * 13px);
+	font-weight: 600;
+}
+
+.edit-site-sidebar-navigation-title__back {
+	color: $gray-200;
+
+	&:hover {
+		color: $white;
+	}
+}
+
+.edit-site-sidebar-navigation-title__icon-placeholder {
+	width: $button-size;
+}
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
new file mode 100644
index 0000000000000..578f13813305b
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationRoot from '../sidebar-navigation-root';
+
+export function Sidebar() {
+	return (
+		<VStack alignment="top" spacing={ 10 }>
+			<div className="edit-site-sidebar__content">
+				<SidebarNavigationRoot />
+			</div>
+		</VStack>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
new file mode 100644
index 0000000000000..3fbdfbafbe06f
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/style.scss
@@ -0,0 +1,4 @@
+.edit-site-sidebar__content {
+	// This matches the logo padding
+	padding: $grid-unit-15;
+}
diff --git a/packages/edit-site/src/components/site-icon/index.js b/packages/edit-site/src/components/site-icon/index.js
new file mode 100644
index 0000000000000..f5ba13262c2e0
--- /dev/null
+++ b/packages/edit-site/src/components/site-icon/index.js
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { Icon } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { wordpress } from '@wordpress/icons';
+import { store as coreDataStore } from '@wordpress/core-data';
+
+function SiteIcon( { className } ) {
+	const { isRequestingSite, siteIconUrl } = useSelect( ( select ) => {
+		const { getEntityRecord, isResolving } = select( coreDataStore );
+		const siteData =
+			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+
+		return {
+			isRequestingSite: isResolving( 'core', 'getEntityRecord', [
+				'root',
+				'__unstableBase',
+				undefined,
+			] ),
+			siteIconUrl: siteData.site_icon_url,
+		};
+	}, [] );
+
+	if ( isRequestingSite && ! siteIconUrl ) {
+		return null;
+	}
+
+	const icon = siteIconUrl ? (
+		<img
+			className="edit-site-site-icon__image"
+			alt={ __( 'Site Icon' ) }
+			src={ siteIconUrl }
+		/>
+	) : (
+		<Icon
+			className="edit-site-site-icon__icon"
+			size="36px"
+			icon={ wordpress }
+		/>
+	);
+
+	return (
+		<div className={ classnames( className, 'edit-site-site-icon' ) }>
+			{ icon }
+		</div>
+	);
+}
+
+export default SiteIcon;
diff --git a/packages/edit-site/src/components/site-icon/style.scss b/packages/edit-site/src/components/site-icon/style.scss
new file mode 100644
index 0000000000000..8eea7683f39e4
--- /dev/null
+++ b/packages/edit-site/src/components/site-icon/style.scss
@@ -0,0 +1,10 @@
+.edit-site-site-icon__icon {
+	fill: currentColor;
+}
+
+.edit-site-site-icon__image {
+	width: $button-size;
+	height: $button-size;
+	border-radius: $radius-block-ui;
+	object-fit: cover;
+}
diff --git a/packages/edit-site/src/components/site-title/index.js b/packages/edit-site/src/components/site-title/index.js
new file mode 100644
index 0000000000000..5af253ab91674
--- /dev/null
+++ b/packages/edit-site/src/components/site-title/index.js
@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
+
+function SiteTitle( { className } ) {
+	const { isRequestingSite, siteTitle } = useSelect( ( select ) => {
+		const { getEntityRecord, isResolving } = select( coreDataStore );
+		const siteData =
+			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+
+		return {
+			isRequestingSite: isResolving( 'core', 'getEntityRecord', [
+				'root',
+				'__unstableBase',
+				undefined,
+			] ),
+			siteTitle: siteData.name,
+		};
+	}, [] );
+
+	if ( isRequestingSite && ! siteTitle ) {
+		return null;
+	}
+
+	return (
+		<div className={ classnames( className, 'edit-site-site-title' ) }>
+			{ siteTitle }
+		</div>
+	);
+}
+
+export default SiteTitle;
diff --git a/packages/edit-site/src/components/url-query-controller/index.js b/packages/edit-site/src/components/use-init-edited-entity-from-url/index.js
similarity index 92%
rename from packages/edit-site/src/components/url-query-controller/index.js
rename to packages/edit-site/src/components/use-init-edited-entity-from-url/index.js
index c0b65a6ccb37b..dec0889f38e9a 100644
--- a/packages/edit-site/src/components/url-query-controller/index.js
+++ b/packages/edit-site/src/components/use-init-edited-entity-from-url/index.js
@@ -10,7 +10,7 @@ import { useDispatch } from '@wordpress/data';
 import { useLocation } from '../routes';
 import { store as editSiteStore } from '../../store';
 
-export default function URLQueryController() {
+export default function useInitEditedEntityFromURL() {
 	const { setTemplate, setTemplatePart, setPage } =
 		useDispatch( editSiteStore );
 	const {
@@ -27,6 +27,4 @@ export default function URLQueryController() {
 			setTemplatePart( postId );
 		}
 	}, [ postId, postType ] );
-
-	return null;
 }
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index 858ea8c42f20d..4b619f7aac9a9 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -6,7 +6,7 @@ import {
 	registerCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
-import { dispatch, select } from '@wordpress/data';
+import { dispatch } from '@wordpress/data';
 import { render, unmountComponentAtNode } from '@wordpress/element';
 import {
 	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
@@ -15,9 +15,6 @@ import {
 import { store as editorStore } from '@wordpress/editor';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { __ } from '@wordpress/i18n';
-import { store as viewportStore } from '@wordpress/viewport';
-import { getQueryArgs } from '@wordpress/url';
 import { addFilter } from '@wordpress/hooks';
 
 /**
@@ -25,9 +22,7 @@ import { addFilter } from '@wordpress/hooks';
  */
 import './hooks';
 import { store as editSiteStore } from './store';
-import EditSiteApp from './components/app';
-import getIsListPage from './utils/get-is-list-page';
-import ErrorBoundaryWarning from './components/error-boundary/warning';
+import App from './components/app';
 
 /**
  * Reinitializes the editor after the user chooses to reboot the editor after
@@ -38,22 +33,6 @@ import ErrorBoundaryWarning from './components/error-boundary/warning';
  * @param {?Object} settings Editor settings object.
  */
 export function reinitializeEditor( target, settings ) {
-	// Display warning if editor wasn't able to resolve homepage template.
-	if ( ! settings.__unstableHomeTemplate ) {
-		render(
-			<ErrorBoundaryWarning
-				message={ __(
-					'The editor is unable to find a block template for the homepage.'
-				) }
-				dashboardLink={
-					settings.__experimentalDashboardLink ?? 'index.php'
-				}
-			/>,
-			target
-		);
-		return;
-	}
-
 	/*
 	 * Prevent adding the Clasic block in the site editor.
 	 * Only add the filter when the site editor is initialized, not imported.
@@ -91,16 +70,6 @@ export function reinitializeEditor( target, settings ) {
 			showListViewByDefault: false,
 		} );
 
-		// Check if the block list view should be open by default.
-		if (
-			select( preferencesStore ).get(
-				'core/edit-site',
-				'showListViewByDefault'
-			)
-		) {
-			dispatch( editSiteStore ).setIsListViewOpened( true );
-		}
-
 		dispatch( interfaceStore ).setDefaultComplementaryArea(
 			'core/edit-site',
 			'edit-site/template'
@@ -116,31 +85,13 @@ export function reinitializeEditor( target, settings ) {
 			defaultTemplateTypes: settings.defaultTemplateTypes,
 			defaultTemplatePartAreas: settings.defaultTemplatePartAreas,
 		} );
-
-		const isLandingOnListPage = getIsListPage(
-			getQueryArgs( window.location.href )
-		);
-
-		if ( isLandingOnListPage ) {
-			// Default the navigation panel to be opened when we're in a bigger
-			// screen and land in the list screen.
-			dispatch( editSiteStore ).setIsNavigationPanelOpened(
-				select( viewportStore ).isViewportMatch( 'medium' )
-			);
-		}
 	}
 
 	// Prevent the default browser action for files dropped outside of dropzones.
 	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
-	render(
-		<EditSiteApp
-			reboot={ reboot }
-			homeTemplate={ settings.__unstableHomeTemplate }
-		/>,
-		target
-	);
+	render( <App reboot={ reboot } />, target );
 }
 
 /**
@@ -167,7 +118,6 @@ export function initializeEditor( id, settings ) {
 	reinitializeEditor( target, settings );
 }
 
-export { default as __experimentalNavigationToggle } from './components/navigation-sidebar/navigation-toggle';
 export { default as PluginSidebar } from './components/sidebar-edit-mode/plugin-sidebar';
 export { default as PluginSidebarMoreMenuItem } from './components/header-edit-mode/plugin-sidebar-more-menu-item';
 export { default as PluginMoreMenuItem } from './components/header-edit-mode/plugin-more-menu-item';
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
index 50b2ce7da376d..b587d2fe0045e 100644
--- a/packages/edit-site/src/store/actions.js
+++ b/packages/edit-site/src/store/actions.js
@@ -63,10 +63,12 @@ export const setTemplate =
 	( templateId, templateSlug ) =>
 	async ( { dispatch, registry } ) => {
 		if ( ! templateSlug ) {
-			const template = await registry
-				.resolveSelect( coreStore )
-				.getEntityRecord( 'postType', 'wp_template', templateId );
-			templateSlug = template?.slug;
+			try {
+				const template = await registry
+					.resolveSelect( coreStore )
+					.getEntityRecord( 'postType', 'wp_template', templateId );
+				templateSlug = template?.slug;
+			} catch ( error ) {}
 		}
 
 		dispatch( {
@@ -238,40 +240,45 @@ export const setPage =
 /**
  * Action that sets the active navigation panel menu.
  *
- * @param {string} menu Menu prop of active menu.
+ * @deprecated
  *
  * @return {Object} Action object.
  */
-export function setNavigationPanelActiveMenu( menu ) {
-	return {
-		type: 'SET_NAVIGATION_PANEL_ACTIVE_MENU',
-		menu,
-	};
+export function setNavigationPanelActiveMenu() {
+	deprecated( "dispatch( 'core/edit-site' ).setNavigationPanelActiveMenu", {
+		since: '6.2',
+		version: '6.4',
+	} );
+
+	return { type: 'NOTHING' };
 }
 
 /**
  * Opens the navigation panel and sets its active menu at the same time.
  *
- * @param {string} menu Identifies the menu to open.
+ * @deprecated
  */
-export function openNavigationPanelToMenu( menu ) {
-	return {
-		type: 'OPEN_NAVIGATION_PANEL_TO_MENU',
-		menu,
-	};
+export function openNavigationPanelToMenu() {
+	deprecated( "dispatch( 'core/edit-site' ).openNavigationPanelToMenu", {
+		since: '6.2',
+		version: '6.4',
+	} );
+
+	return { type: 'NOTHING' };
 }
 
 /**
  * Sets whether the navigation panel should be open.
  *
- * @param {boolean} isOpen If true, opens the nav panel. If false, closes it. It
- *                         does not toggle the state, but sets it directly.
+ * @deprecated
  */
-export function setIsNavigationPanelOpened( isOpen ) {
-	return {
-		type: 'SET_IS_NAVIGATION_PANEL_OPENED',
-		isOpen,
-	};
+export function setIsNavigationPanelOpened() {
+	deprecated( "dispatch( 'core/edit-site' ).setIsNavigationPanelOpened", {
+		since: '6.2',
+		version: '6.4',
+	} );
+
+	return { type: 'NOTHING' };
 }
 
 /**
@@ -509,3 +516,27 @@ export const switchEditorMode =
 			speak( __( 'Mosaic view selected' ), 'assertive' );
 		}
 	};
+
+/**
+ * Action that switches the canvas mode.
+ *
+ * @param {?string} mode Canvas mode.
+ */
+export const __unstableSetCanvasMode =
+	( mode ) =>
+	( { registry, dispatch } ) => {
+		registry.dispatch( blockEditorStore ).__unstableSetEditorMode( 'edit' );
+		dispatch( {
+			type: 'SET_CANVAS_MODE',
+			mode,
+		} );
+		// Check if the block list view should be open by default.
+		if (
+			mode === 'edit' &&
+			registry
+				.select( preferencesStore )
+				.get( 'core/edit-site', 'showListViewByDefault' )
+		) {
+			dispatch.setIsListViewOpened( true );
+		}
+	};
diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js
index 2513c4f10afb7..327159635617a 100644
--- a/packages/edit-site/src/store/reducer.js
+++ b/packages/edit-site/src/store/reducer.js
@@ -3,11 +3,6 @@
  */
 import { combineReducers } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
-import { MENU_ROOT } from '../components/navigation-sidebar/navigation-panel/constants';
-
 /**
  * Reducer returning the editing canvas device type.
  *
@@ -90,54 +85,6 @@ export function homeTemplateId( state, action ) {
 	return state;
 }
 
-/**
- * Reducer for information about the navigation panel, such as its active menu
- * and whether it should be opened or closed.
- *
- * Note: this reducer interacts with the inserter and list view panels reducers
- * to make sure that only one of the three panels is open at the same time.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- */
-export function navigationPanel(
-	state = { menu: MENU_ROOT, isOpen: false },
-	action
-) {
-	switch ( action.type ) {
-		case 'SET_NAVIGATION_PANEL_ACTIVE_MENU':
-			return {
-				...state,
-				menu: action.menu,
-			};
-		case 'OPEN_NAVIGATION_PANEL_TO_MENU':
-			return {
-				...state,
-				isOpen: true,
-				menu: action.menu,
-			};
-		case 'SET_IS_NAVIGATION_PANEL_OPENED':
-			return {
-				...state,
-				menu: ! action.isOpen ? MENU_ROOT : state.menu, // Set menu to root when closing panel.
-				isOpen: action.isOpen,
-			};
-		case 'SET_IS_LIST_VIEW_OPENED':
-			return {
-				...state,
-				menu: state.isOpen && action.isOpen ? MENU_ROOT : state.menu, // Set menu to root when closing panel.
-				isOpen: action.isOpen ? false : state.isOpen,
-			};
-		case 'SET_IS_INSERTER_OPENED':
-			return {
-				...state,
-				menu: state.isOpen && action.value ? MENU_ROOT : state.menu, // Set menu to root when closing panel.
-				isOpen: action.value ? false : state.isOpen,
-			};
-	}
-	return state;
-}
-
 /**
  * Reducer to set the block inserter panel open or closed.
  *
@@ -149,13 +96,12 @@ export function navigationPanel(
  */
 export function blockInserterPanel( state = false, action ) {
 	switch ( action.type ) {
-		case 'OPEN_NAVIGATION_PANEL_TO_MENU':
-			return false;
-		case 'SET_IS_NAVIGATION_PANEL_OPENED':
 		case 'SET_IS_LIST_VIEW_OPENED':
 			return action.isOpen ? false : state;
 		case 'SET_IS_INSERTER_OPENED':
 			return action.value;
+		case 'SET_CANVAS_MODE':
+			return false;
 	}
 	return state;
 }
@@ -171,14 +117,12 @@ export function blockInserterPanel( state = false, action ) {
  */
 export function listViewPanel( state = false, action ) {
 	switch ( action.type ) {
-		case 'OPEN_NAVIGATION_PANEL_TO_MENU':
-			return false;
-		case 'SET_IS_NAVIGATION_PANEL_OPENED':
-			return action.isOpen ? false : state;
 		case 'SET_IS_INSERTER_OPENED':
 			return action.value ? false : state;
 		case 'SET_IS_LIST_VIEW_OPENED':
 			return action.isOpen;
+		case 'SET_CANVAS_MODE':
+			return false;
 	}
 	return state;
 }
@@ -191,13 +135,26 @@ export function listViewPanel( state = false, action ) {
  */
 export function saveViewPanel( state = false, action ) {
 	switch ( action.type ) {
-		case 'OPEN_NAVIGATION_PANEL_TO_MENU':
-			return false;
-		case 'SET_IS_NAVIGATION_PANEL_OPENED':
-			return action.isOpen ? false : state;
 		case 'SET_IS_SAVE_VIEW_OPENED':
 			return action.isOpen;
+		case 'SET_CANVAS_MODE':
+			return false;
+	}
+	return state;
+}
+
+/**
+ * Reducer used to track the site editor canvas mode (edit or view).
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ */
+function canvasMode( state = 'view', action ) {
+	switch ( action.type ) {
+		case 'SET_CANVAS_MODE':
+			return action.mode;
 	}
+
 	return state;
 }
 
@@ -206,8 +163,8 @@ export default combineReducers( {
 	settings,
 	editedPost,
 	homeTemplateId,
-	navigationPanel,
 	blockInserterPanel,
 	listViewPanel,
 	saveViewPanel,
+	canvasMode,
 } );
diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
index 79b28d98c384a..a99467addd334 100644
--- a/packages/edit-site/src/store/selectors.js
+++ b/packages/edit-site/src/store/selectors.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { map } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -15,20 +14,6 @@ import { isTemplatePart } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 
-/**
- * Internal dependencies
- */
-import {
-	MENU_ROOT,
-	MENU_TEMPLATE_PARTS,
-	MENU_TEMPLATES_UNUSED,
-	TEMPLATE_PARTS_SUB_MENUS,
-} from '../components/navigation-sidebar/navigation-panel/constants';
-import {
-	getTemplateLocation,
-	isTemplateSuperseded,
-} from '../components/navigation-sidebar/navigation-panel/template-hierarchy';
-
 /**
  * @typedef {'template'|'template_type'} TemplateType Template type.
  */
@@ -208,83 +193,6 @@ export function getPage( state ) {
 	return getCurrentEditedPost( state ).page;
 }
 
-/**
- * Returns the active menu in the navigation panel.
- *
- * @param {Object} state Global application state.
- *
- * @return {string} Active menu.
- */
-export function getNavigationPanelActiveMenu( state ) {
-	return state.navigationPanel.menu;
-}
-
-/**
- * Returns the current template or template part's corresponding
- * navigation panel's sub menu, to be used with `openNavigationPanelToMenu`.
- *
- * @param {Object} state Global application state.
- *
- * @return {string} The current template or template part's sub menu.
- */
-export const getCurrentTemplateNavigationPanelSubMenu = createRegistrySelector(
-	( select ) => ( state ) => {
-		const templateType = getEditedPostType( state );
-		const templateId = getEditedPostId( state );
-		const template = templateId
-			? select( coreDataStore ).getEntityRecord(
-					'postType',
-					templateType,
-					templateId
-			  )
-			: null;
-
-		if ( ! template ) {
-			return MENU_ROOT;
-		}
-
-		if ( 'wp_template_part' === templateType ) {
-			return (
-				TEMPLATE_PARTS_SUB_MENUS.find(
-					( submenu ) => submenu.area === template?.area
-				)?.menu || MENU_TEMPLATE_PARTS
-			);
-		}
-
-		const templates = select( coreDataStore ).getEntityRecords(
-			'postType',
-			'wp_template'
-		);
-		const showOnFront = select( coreDataStore ).getEditedEntityRecord(
-			'root',
-			'site'
-		).show_on_front;
-
-		if (
-			isTemplateSuperseded(
-				template.slug,
-				map( templates, 'slug' ),
-				showOnFront
-			)
-		) {
-			return MENU_TEMPLATES_UNUSED;
-		}
-
-		return getTemplateLocation( template.slug );
-	}
-);
-
-/**
- * Returns the current opened/closed state of the navigation panel.
- *
- * @param {Object} state Global application state.
- *
- * @return {boolean} True if the navigation panel should be open; false if closed.
- */
-export function isNavigationOpened( state ) {
-	return state.navigationPanel.isOpen;
-}
-
 /**
  * Returns the current opened/closed state of the inserter panel.
  *
@@ -391,3 +299,47 @@ export const getCurrentTemplateTemplateParts = createRegistrySelector(
 export function getEditorMode( state ) {
 	return __unstableGetPreference( state, 'editorMode' );
 }
+
+/**
+ * Returns the current canvas mode.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} Canvas mode.
+ */
+export function __unstableGetCanvasMode( state ) {
+	return state.canvasMode;
+}
+
+/**
+ * @deprecated
+ */
+export function getCurrentTemplateNavigationPanelSubMenu() {
+	deprecated(
+		"dispatch( 'core/edit-site' ).getCurrentTemplateNavigationPanelSubMenu",
+		{
+			since: '6.2',
+			version: '6.4',
+		}
+	);
+}
+
+/**
+ * @deprecated
+ */
+export function getNavigationPanelActiveMenu() {
+	deprecated( "dispatch( 'core/edit-site' ).getNavigationPanelActiveMenu", {
+		since: '6.2',
+		version: '6.4',
+	} );
+}
+
+/**
+ * @deprecated
+ */
+export function isNavigationOpened() {
+	deprecated( "dispatch( 'core/edit-site' ).isNavigationOpened", {
+		since: '6.2',
+		version: '6.4',
+	} );
+}
diff --git a/packages/edit-site/src/store/test/reducer.js b/packages/edit-site/src/store/test/reducer.js
index 0c41fba1cd31a..a3ea8e356fc0a 100644
--- a/packages/edit-site/src/store/test/reducer.js
+++ b/packages/edit-site/src/store/test/reducer.js
@@ -10,18 +10,11 @@ import {
 	settings,
 	homeTemplateId,
 	editedPost,
-	navigationPanel,
 	blockInserterPanel,
 	listViewPanel,
 } from '../reducer';
 
-import {
-	setNavigationPanelActiveMenu,
-	openNavigationPanelToMenu,
-	setIsNavigationPanelOpened,
-	setIsInserterOpened,
-	setIsListViewOpened,
-} from '../actions';
+import { setIsInserterOpened, setIsListViewOpened } from '../actions';
 
 describe( 'state', () => {
 	describe( 'settings()', () => {
@@ -112,122 +105,6 @@ describe( 'state', () => {
 		} );
 	} );
 
-	describe( 'navigationPanel()', () => {
-		it( 'should apply default state', () => {
-			expect( navigationPanel( undefined, {} ) ).toEqual( {
-				menu: 'root',
-				isOpen: false,
-			} );
-		} );
-
-		it( 'should default to returning the same state', () => {
-			const state = { test: 1 };
-			expect( navigationPanel( state, {} ) ).toBe( state );
-		} );
-
-		it( 'should set the active navigation panel', () => {
-			expect(
-				navigationPanel(
-					undefined,
-					setNavigationPanelActiveMenu( 'test-menu' )
-				)
-			).toEqual( {
-				isOpen: false,
-				menu: 'test-menu',
-			} );
-		} );
-
-		it( 'should be able to open the navigation panel to a menu', () => {
-			expect(
-				navigationPanel(
-					undefined,
-					openNavigationPanelToMenu( 'test-menu' )
-				)
-			).toEqual( {
-				isOpen: true,
-				menu: 'test-menu',
-			} );
-		} );
-
-		it( 'should be able to open the navigation panel', () => {
-			expect(
-				navigationPanel( undefined, setIsNavigationPanelOpened( true ) )
-			).toEqual( {
-				isOpen: true,
-				menu: 'root',
-			} );
-		} );
-
-		it( 'should change the menu to root when closing the panel', () => {
-			const state = navigationPanel(
-				undefined,
-				openNavigationPanelToMenu( 'test-menu' )
-			);
-
-			expect( state.menu ).toEqual( 'test-menu' );
-			expect(
-				navigationPanel( state, setIsNavigationPanelOpened( false ) )
-			).toEqual( {
-				isOpen: false,
-				menu: 'root',
-			} );
-		} );
-
-		it( 'should close the navigation panel when opening the inserter and change the menu to root', () => {
-			const state = navigationPanel(
-				undefined,
-				openNavigationPanelToMenu( 'test-menu' )
-			);
-
-			expect( state.menu ).toEqual( 'test-menu' );
-			expect(
-				navigationPanel( state, setIsInserterOpened( true ) )
-			).toEqual( {
-				isOpen: false,
-				menu: 'root',
-			} );
-		} );
-
-		it( 'should close the navigation panel when opening the list view and change the menu to root', () => {
-			const state = navigationPanel(
-				undefined,
-				openNavigationPanelToMenu( 'test-menu' )
-			);
-
-			expect( state.menu ).toEqual( 'test-menu' );
-			expect(
-				navigationPanel( state, setIsListViewOpened( true ) )
-			).toEqual( {
-				isOpen: false,
-				menu: 'root',
-			} );
-		} );
-
-		it( 'should not change the state when closing the inserter', () => {
-			const state = navigationPanel(
-				undefined,
-				openNavigationPanelToMenu( 'test-menu' )
-			);
-
-			expect( state.menu ).toEqual( 'test-menu' );
-			expect(
-				navigationPanel( state, setIsInserterOpened( false ) )
-			).toEqual( state );
-		} );
-
-		it( 'should not change the state when closing the list view', () => {
-			const state = navigationPanel(
-				undefined,
-				openNavigationPanelToMenu( 'test-menu' )
-			);
-
-			expect( state.menu ).toEqual( 'test-menu' );
-			expect(
-				navigationPanel( state, setIsListViewOpened( false ) )
-			).toEqual( state );
-		} );
-	} );
-
 	describe( 'blockInserterPanel()', () => {
 		it( 'should apply default state', () => {
 			expect( blockInserterPanel( undefined, {} ) ).toEqual( false );
@@ -246,27 +123,12 @@ describe( 'state', () => {
 			).toBe( false );
 		} );
 
-		it( 'should close the inserter when opening the nav panel', () => {
-			expect(
-				blockInserterPanel( true, openNavigationPanelToMenu( 'noop' ) )
-			).toBe( false );
-			expect(
-				blockInserterPanel( true, setIsNavigationPanelOpened( true ) )
-			).toBe( false );
-		} );
-
 		it( 'should close the inserter when opening the list view panel', () => {
 			expect(
 				blockInserterPanel( true, setIsListViewOpened( true ) )
 			).toBe( false );
 		} );
 
-		it( 'should not change the state when closing the nav panel', () => {
-			expect(
-				blockInserterPanel( true, setIsNavigationPanelOpened( false ) )
-			).toBe( true );
-		} );
-
 		it( 'should not change the state when closing the list view panel', () => {
 			expect(
 				blockInserterPanel( true, setIsListViewOpened( false ) )
@@ -292,27 +154,12 @@ describe( 'state', () => {
 			);
 		} );
 
-		it( 'should close the list view when opening the nav panel', () => {
-			expect(
-				listViewPanel( true, openNavigationPanelToMenu( 'noop' ) )
-			).toBe( false );
-			expect(
-				listViewPanel( true, setIsNavigationPanelOpened( true ) )
-			).toBe( false );
-		} );
-
 		it( 'should close the list view when opening the inserter panel', () => {
 			expect( listViewPanel( true, setIsInserterOpened( true ) ) ).toBe(
 				false
 			);
 		} );
 
-		it( 'should not change the state when closing the nav panel', () => {
-			expect(
-				listViewPanel( true, setIsNavigationPanelOpened( false ) )
-			).toBe( true );
-		} );
-
 		it( 'should not change the state when closing the inserter panel', () => {
 			expect( listViewPanel( true, setIsInserterOpened( false ) ) ).toBe(
 				true
diff --git a/packages/edit-site/src/store/test/selectors.js b/packages/edit-site/src/store/test/selectors.js
index 907c2dc52eae4..bf0ec33452580 100644
--- a/packages/edit-site/src/store/test/selectors.js
+++ b/packages/edit-site/src/store/test/selectors.js
@@ -13,9 +13,7 @@ import {
 	getEditedPostType,
 	getEditedPostId,
 	getPage,
-	getNavigationPanelActiveMenu,
 	getReusableBlocks,
-	isNavigationOpened,
 	isInserterOpened,
 	isListViewOpened,
 	__unstableGetPreference,
@@ -143,26 +141,6 @@ describe( 'selectors', () => {
 		} );
 	} );
 
-	describe( 'getNavigationPanelActiveMenu', () => {
-		it( 'returns the current navigation menu', () => {
-			const state = {
-				navigationPanel: { menu: 'test-menu', isOpen: false },
-			};
-			expect( getNavigationPanelActiveMenu( state ) ).toBe( 'test-menu' );
-		} );
-	} );
-
-	describe( 'isNavigationOpened', () => {
-		it( 'returns the navigation panel isOpened state', () => {
-			const state = {
-				navigationPanel: { menu: 'test-menu', isOpen: false },
-			};
-			expect( isNavigationOpened( state ) ).toBe( false );
-			state.navigationPanel.isOpen = true;
-			expect( isNavigationOpened( state ) ).toBe( true );
-		} );
-	} );
-
 	describe( 'isInserterOpened', () => {
 		it( 'returns the block inserter panel isOpened state', () => {
 			const state = {
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 86b838be839a5..efc6187a39a6b 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -5,8 +5,6 @@
 @import "./components/global-styles/style.scss";
 @import "./components/header-edit-mode/style.scss";
 @import "./components/header-edit-mode/document-actions/style.scss";
-@import "./components/navigation-sidebar/navigation-toggle/style.scss";
-@import "./components/navigation-sidebar/navigation-panel/style.scss";
 @import "./components/list/style.scss";
 @import "./components/add-new-template/style.scss";
 @import "./components/sidebar-edit-mode/style.scss";
@@ -19,11 +17,26 @@
 @import "./components/secondary-sidebar/style.scss";
 @import "./components/welcome-guide/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
+@import "./components/layout/style.scss";
+@import "./components/sidebar/style.scss";
+@import "./components/sidebar-navigation-item/style.scss";
+@import "./components/sidebar-navigation-root/style.scss";
+@import "./components/sidebar-navigation-title/style.scss";
+@import "./components/site-icon/style.scss";
+
+html #wpadminbar {
+	display: none;
+}
+
+html #wpbody {
+	padding-top: 0;
+}
 
 // In order to use mix-blend-mode, this element needs to have an explicitly set background-color.
 // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations.
 html.wp-toolbar {
 	background: $white;
+	padding-top: 0;
 }
 
 body.appearance_page_gutenberg-template-parts,
@@ -38,13 +51,15 @@ body.site-editor-php {
 }
 
 .edit-site {
+	height: 100vh;
+
 	// On mobile the main content area has to scroll, otherwise you can invoke
 	// the over-scroll bounce on the non-scrolling container, for a bad experience.
 	@include break-small {
 		bottom: 0;
 		left: 0;
 		min-height: 100vh;
-		position: absolute;
+		position: fixed;
 		right: 0;
 		top: 0;
 	}
diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
index f7d5ab36566e3..e8a7a45ede3fa 100644
--- a/packages/interface/src/components/interface-skeleton/index.js
+++ b/packages/interface/src/components/interface-skeleton/index.js
@@ -43,10 +43,11 @@ function InterfaceSkeleton(
 		secondarySidebar,
 		notices,
 		content,
-		drawer,
 		actions,
 		labels,
 		className,
+		// Todo: does this need to be a prop.
+		// Can we use a dependency to keyboard-shortcuts directly?
 		shortcuts,
 	},
 	ref
@@ -56,8 +57,6 @@ function InterfaceSkeleton(
 	useHTMLClass( 'interface-interface-skeleton__html-container' );
 
 	const defaultLabels = {
-		/* translators: accessibility text for the nav bar landmark region. */
-		drawer: __( 'Drawer' ),
 		/* translators: accessibility text for the top bar landmark region. */
 		header: __( 'Header' ),
 		/* translators: accessibility text for the content landmark region. */
@@ -93,14 +92,6 @@ function InterfaceSkeleton(
 				!! footer && 'has-footer'
 			) }
 		>
-			{ !! drawer && (
-				<NavigableRegion
-					className="interface-interface-skeleton__drawer"
-					ariaLabel={ mergedLabels.drawer }
-				>
-					{ drawer }
-				</NavigableRegion>
-			) }
 			<div className="interface-interface-skeleton__editor">
 				{ !! header && isDistractionFree && (
 					<NavigableRegion
diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index 7897dcf824cce..51374fd2b5687 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -197,10 +197,3 @@ html.interface-interface-skeleton__html-container {
 		bottom: 0;
 	}
 }
-
-// Footer is visible from medium so we subtract footer's height
-.interface-interface-skeleton.has-footer .interface-interface-skeleton__drawer {
-	@include break-medium() {
-		height: calc(100% - #{$button-size-small + $border-width});
-	}
-}
diff --git a/test/e2e/specs/site-editor/block-list-panel-preference.spec.js b/test/e2e/specs/site-editor/block-list-panel-preference.spec.js
index af56a2c3d3ee9..e31a06f2c888d 100644
--- a/test/e2e/specs/site-editor/block-list-panel-preference.spec.js
+++ b/test/e2e/specs/site-editor/block-list-panel-preference.spec.js
@@ -12,12 +12,14 @@ test.describe( 'Block list view', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test( 'Should open by default', async ( { admin, page } ) => {
+	test( 'Should open by default', async ( { admin, page, siteEditor } ) => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
 		} );
 
+		await siteEditor.enterEditMode();
+
 		// Should display the Preview button.
 		await expect(
 			page.locator( 'role=region[name="List View"i]' )
@@ -32,6 +34,8 @@ test.describe( 'Block list view', () => {
 
 		await page.reload();
 
+		await siteEditor.enterEditMode();
+
 		// Should display the Preview button.
 		await expect(
 			page.locator( 'role=region[name="List View"i]' )
diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
index d079176bace94..2dc8002b03089 100644
--- a/test/e2e/specs/site-editor/site-editor-inserter.spec.js
+++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
@@ -16,8 +16,9 @@ test.describe( 'Site Editor Inserter', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test.beforeEach( async ( { admin } ) => {
+	test.beforeEach( async ( { admin, siteEditor } ) => {
 		await admin.visitSiteEditor();
+		await siteEditor.enterEditMode();
 	} );
 
 	test( 'inserter toggle button should toggle global inserter', async ( {
diff --git a/test/e2e/specs/site-editor/style-variations.spec.js b/test/e2e/specs/site-editor/style-variations.spec.js
index 56de0ac0de219..925be3780c8fd 100644
--- a/test/e2e/specs/site-editor/style-variations.spec.js
+++ b/test/e2e/specs/site-editor/style-variations.spec.js
@@ -33,11 +33,13 @@ test.describe( 'Global styles variations', () => {
 		admin,
 		page,
 		siteEditorStyleVariations,
+		siteEditor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
 		} );
+		await siteEditor.enterEditMode();
 
 		await siteEditorStyleVariations.browseStyles();
 
@@ -68,11 +70,13 @@ test.describe( 'Global styles variations', () => {
 		admin,
 		page,
 		siteEditorStyleVariations,
+		siteEditor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
 		} );
+		await siteEditor.enterEditMode();
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="pink"i]' );
 		await page.click(
@@ -107,11 +111,13 @@ test.describe( 'Global styles variations', () => {
 		admin,
 		page,
 		siteEditorStyleVariations,
+		siteEditor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
 		} );
+		await siteEditor.enterEditMode();
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="yellow"i]' );
 		await page.click(
@@ -152,11 +158,13 @@ test.describe( 'Global styles variations', () => {
 		admin,
 		page,
 		siteEditorStyleVariations,
+		siteEditor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
 		} );
+		await siteEditor.enterEditMode();
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="pink"i]' );
 		await page.click(
@@ -182,11 +190,13 @@ test.describe( 'Global styles variations', () => {
 		admin,
 		page,
 		siteEditorStyleVariations,
+		siteEditor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
 		} );
+		await siteEditor.enterEditMode();
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="yellow"i]' );
 
diff --git a/test/e2e/specs/site-editor/template-part.spec.js b/test/e2e/specs/site-editor/template-part.spec.js
index a793e97158a11..803ed2e57a8fa 100644
--- a/test/e2e/specs/site-editor/template-part.spec.js
+++ b/test/e2e/specs/site-editor/template-part.spec.js
@@ -33,11 +33,13 @@ test.describe( 'Template Part', () => {
 		admin,
 		editor,
 		page,
+		siteEditor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
 		} );
+		await siteEditor.enterEditMode();
 
 		// Insert a new template block and 'start blank'.
 		await editor.insertBlock( { name: 'core/template-part' } );
@@ -62,10 +64,11 @@ test.describe( 'Template Part', () => {
 		admin,
 		editor,
 		page,
+		siteEditor,
 	} ) => {
 		// Visit the index.
 		await admin.visitSiteEditor();
-
+		await siteEditor.enterEditMode();
 		const headerTemplateParts = editor.canvas.locator(
 			'[data-type="core/template-part"]'
 		);
@@ -88,11 +91,12 @@ test.describe( 'Template Part', () => {
 		admin,
 		editor,
 		page,
+		siteEditor,
 	} ) => {
 		const paragraphText = 'Test 2';
 
 		await admin.visitSiteEditor();
-
+		await siteEditor.enterEditMode();
 		// Add a block and select it.
 		await editor.insertBlock( {
 			name: 'core/paragraph',
@@ -127,12 +131,13 @@ test.describe( 'Template Part', () => {
 		admin,
 		editor,
 		page,
+		siteEditor,
 	} ) => {
 		const paragraphText1 = 'Test 3';
 		const paragraphText2 = 'Test 4';
 
 		await admin.visitSiteEditor();
-
+		await siteEditor.enterEditMode();
 		// Add a block and select it.
 		await editor.insertBlock( {
 			name: 'core/paragraph',
@@ -186,6 +191,7 @@ test.describe( 'Template Part', () => {
 	test( 'can detach blocks from a template part', async ( {
 		admin,
 		editor,
+		siteEditor,
 	} ) => {
 		const paragraphText = 'Test 3';
 
@@ -194,7 +200,7 @@ test.describe( 'Template Part', () => {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
 		} );
-
+		await siteEditor.enterEditMode();
 		await editor.insertBlock( {
 			name: 'core/paragraph',
 			attributes: {
@@ -205,7 +211,7 @@ test.describe( 'Template Part', () => {
 
 		// Visit the index.
 		await admin.visitSiteEditor();
-
+		await siteEditor.enterEditMode();
 		// Check that the header contains the paragraph added earlier.
 		const paragraph = editor.canvas.locator(
 			`p >> text="${ paragraphText }"`
@@ -230,6 +236,7 @@ test.describe( 'Template Part', () => {
 	test( 'shows changes in a template when a template part it contains is modified', async ( {
 		admin,
 		editor,
+		siteEditor,
 	} ) => {
 		const paragraphText = 'Test 1';
 
@@ -237,7 +244,7 @@ test.describe( 'Template Part', () => {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
 		} );
-
+		await siteEditor.enterEditMode();
 		// Edit the header.
 		await editor.insertBlock( {
 			name: 'core/paragraph',
@@ -250,7 +257,7 @@ test.describe( 'Template Part', () => {
 
 		// Visit the index.
 		await admin.visitSiteEditor();
-
+		await siteEditor.enterEditMode();
 		const paragraph = editor.canvas.locator(
 			`p >> text="${ paragraphText }"`
 		);
@@ -263,6 +270,7 @@ test.describe( 'Template Part', () => {
 		admin,
 		editor,
 		page,
+		siteEditor,
 	} ) => {
 		const paragraphText = 'Test 4';
 
@@ -270,6 +278,7 @@ test.describe( 'Template Part', () => {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
 		} );
+		await siteEditor.enterEditMode();
 		await editor.insertBlock( {
 			name: 'core/paragraph',
 			attributes: {
diff --git a/test/e2e/specs/site-editor/template-revert.spec.js b/test/e2e/specs/site-editor/template-revert.spec.js
index 6a6ba6353a5e7..dcf8ebedb8b78 100644
--- a/test/e2e/specs/site-editor/template-revert.spec.js
+++ b/test/e2e/specs/site-editor/template-revert.spec.js
@@ -20,9 +20,10 @@ test.describe( 'Template Revert', () => {
 		await requestUtils.deleteAllTemplates( 'wp_template_part' );
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
-	test.beforeEach( async ( { admin, requestUtils } ) => {
+	test.beforeEach( async ( { admin, requestUtils, siteEditor } ) => {
 		await requestUtils.deleteAllTemplates( 'wp_template' );
 		await admin.visitSiteEditor();
+		await siteEditor.enterEditMode();
 	} );
 
 	test( 'should delete the template after saving the reverted template', async ( {
@@ -247,6 +248,7 @@ test.describe( 'Template Revert', () => {
 		editor,
 		page,
 		templateRevertUtils,
+		siteEditor,
 	} ) => {
 		await editor.insertBlock( {
 			name: 'core/paragraph',
@@ -265,7 +267,7 @@ test.describe( 'Template Revert', () => {
 
 		await editor.saveSiteEditorEntities();
 		await admin.visitSiteEditor();
-
+		await siteEditor.enterEditMode();
 		const contentAfter =
 			await templateRevertUtils.getCurrentSiteEditorContent();
 		expect( contentAfter ).toEqual( contentBefore );
diff --git a/test/e2e/specs/site-editor/title.spec.js b/test/e2e/specs/site-editor/title.spec.js
index 6d00c4ad7c3a2..9b1ad4a5098d1 100644
--- a/test/e2e/specs/site-editor/title.spec.js
+++ b/test/e2e/specs/site-editor/title.spec.js
@@ -15,13 +15,14 @@ test.describe( 'Site editor title', () => {
 	test( 'displays the selected template name in the title for the index template', async ( {
 		admin,
 		page,
+		siteEditor,
 	} ) => {
 		// Navigate to a template.
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
 		} );
-
+		await siteEditor.enterEditMode();
 		const title = await page.locator(
 			'role=region[name="Editor top bar"i] >> role=heading[level=1]'
 		);
@@ -32,13 +33,14 @@ test.describe( 'Site editor title', () => {
 	test( 'displays the selected template name in the title for the header template', async ( {
 		admin,
 		page,
+		siteEditor,
 	} ) => {
 		// Navigate to a template part.
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
 		} );
-
+		await siteEditor.enterEditMode();
 		const title = await page.locator(
 			'role=region[name="Editor top bar"i] >> role=heading[level=1]'
 		);
@@ -49,12 +51,13 @@ test.describe( 'Site editor title', () => {
 	test( "displays the selected template part's name in the secondary title when a template part is selected from List View", async ( {
 		admin,
 		page,
+		siteEditor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
 		} );
-
+		await siteEditor.enterEditMode();
 		// Select the header template part via list view.
 		await page.click( 'role=button[name="List View"i]' );
 		const listView = await page.locator(
diff --git a/test/e2e/specs/site-editor/writing-flow.spec.js b/test/e2e/specs/site-editor/writing-flow.spec.js
index e854b31cee481..6eb4bf3e471ec 100644
--- a/test/e2e/specs/site-editor/writing-flow.spec.js
+++ b/test/e2e/specs/site-editor/writing-flow.spec.js
@@ -28,13 +28,14 @@ test.describe( 'Site editor writing flow', () => {
 		editor,
 		page,
 		pageUtils,
+		siteEditor,
 	} ) => {
 		// Navigate to a template part with only a couple of blocks.
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
 		} );
-
+		await siteEditor.enterEditMode();
 		// Select the first site title block.
 		const siteTitleBlock = editor.canvas.locator(
 			'role=document[name="Block: Site Title"i]'
@@ -56,13 +57,14 @@ test.describe( 'Site editor writing flow', () => {
 		editor,
 		page,
 		pageUtils,
+		siteEditor,
 	} ) => {
 		// Navigate to a template part with only a couple of blocks.
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
 		} );
-
+		await siteEditor.enterEditMode();
 		// Make sure the sidebar is open.
 		await editor.openDocumentSettingsSidebar();