diff --git a/packages/edit-site/src/new/index.js b/packages/edit-site/src/components/app/index.js
similarity index 89%
rename from packages/edit-site/src/new/index.js
rename to packages/edit-site/src/components/app/index.js
index e19e74c171003..2a87de5fc8154 100644
--- a/packages/edit-site/src/new/index.js
+++ b/packages/edit-site/src/components/app/index.js
@@ -8,8 +8,8 @@ import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 /**
  * Internal dependencies
  */
-import { Routes } from '../components/routes';
-import Layout from './layout';
+import { Routes } from '../routes';
+import Layout from '../layout';
 
 export default function App() {
 	return (
diff --git a/packages/edit-site/src/components/block-editor/block-inspector-button.js b/packages/edit-site/src/components/block-editor/block-inspector-button.js
index 91b5f0665f757..758ca50272ade 100644
--- a/packages/edit-site/src/components/block-editor/block-inspector-button.js
+++ b/packages/edit-site/src/components/block-editor/block-inspector-button.js
@@ -13,7 +13,7 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
  */
 import { store as editSiteStore } from '../../store';
 import { STORE_NAME } from '../../store/constants';
-import { SIDEBAR_BLOCK } from '../sidebar/constants';
+import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
 
 export default function BlockInspectorButton( { onClick = () => {} } ) {
 	const { shortcut, isBlockInspectorOpen } = useSelect(
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index 82c560bc7ee04..36c69acbf65ea 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -29,7 +29,7 @@ import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
  */
 import TemplatePartConverter from '../template-part-converter';
 import NavigateToLink from '../navigate-to-link';
-import { SidebarInspectorFill } from '../sidebar';
+import { SidebarInspectorFill } from '../sidebar-edit-mode';
 import { store as editSiteStore } from '../../store';
 import BlockInspectorButton from './block-inspector-button';
 import BackButton from './back-button';
diff --git a/packages/edit-site/src/new/canvas/index.js b/packages/edit-site/src/components/canvas/index.js
similarity index 89%
rename from packages/edit-site/src/new/canvas/index.js
rename to packages/edit-site/src/components/canvas/index.js
index 846c539187bee..26f47251324fe 100644
--- a/packages/edit-site/src/new/canvas/index.js
+++ b/packages/edit-site/src/components/canvas/index.js
@@ -26,16 +26,16 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
  */
 import { store as editSiteStore } from '../../store';
 import Header from '../header';
-import BlockEditor from '../../components/block-editor';
-import CodeEditor from '../../components/code-editor';
-import KeyboardShortcuts from '../../components/keyboard-shortcuts';
-import useInitEditedEntityFromURL from '../../components/use-init-edited-entity-from-url';
-import GlobalStylesRenderer from '../../components/global-styles-renderer';
-import { GlobalStylesProvider } from '../../components/global-styles/global-styles-provider';
-import ListViewSidebar from '../../components/secondary-sidebar/list-view-sidebar';
-import InserterSidebar from '../../components/secondary-sidebar/inserter-sidebar';
-import { SidebarComplementaryAreaFills } from '../../components/sidebar';
-import WelcomeGuide from '../../components/welcome-guide';
+import BlockEditor from '../block-editor';
+import CodeEditor from '../code-editor';
+import KeyboardShortcuts from '../keyboard-shortcuts';
+import useInitEditedEntityFromURL from '../use-init-edited-entity-from-url';
+import GlobalStylesRenderer from '../global-styles-renderer';
+import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
+import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
+import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
+import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode';
+import WelcomeGuide from '../welcome-guide';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
diff --git a/packages/edit-site/src/new/canvas/style.scss b/packages/edit-site/src/components/canvas/style.scss
similarity index 100%
rename from packages/edit-site/src/new/canvas/style.scss
rename to packages/edit-site/src/components/canvas/style.scss
diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
similarity index 100%
rename from packages/edit-site/src/components/header/document-actions/index.js
rename to packages/edit-site/src/components/header-edit-mode/document-actions/index.js
diff --git a/packages/edit-site/src/components/header/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
similarity index 100%
rename from packages/edit-site/src/components/header/document-actions/style.scss
rename to packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
new file mode 100644
index 0000000000000..1447ba76c3ac9
--- /dev/null
+++ b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -0,0 +1,285 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useRef } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
+import {
+	ToolSelector,
+	__experimentalPreviewOptions as PreviewOptions,
+	NavigableToolbar,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { PinnedItems } from '@wordpress/interface';
+import { _x, __ } from '@wordpress/i18n';
+import { listView, plus, external, chevronUpDown } from '@wordpress/icons';
+import {
+	Button,
+	ToolbarItem,
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+} from '@wordpress/components';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import MoreMenu from './more-menu';
+import SaveButton from '../save-button';
+import UndoButton from './undo-redo/undo';
+import RedoButton from './undo-redo/redo';
+import DocumentActions from './document-actions';
+import TemplateDetails from '../template-details';
+import { store as editSiteStore } from '../../store';
+
+const preventDefault = ( event ) => {
+	event.preventDefault();
+};
+
+export default function Header() {
+	const inserterButton = useRef();
+	const {
+		deviceType,
+		entityTitle,
+		template,
+		templateType,
+		isInserterOpen,
+		isListViewOpen,
+		listViewShortcut,
+		isLoaded,
+		isVisualMode,
+		settings,
+		blockEditorMode,
+		showIconLabels,
+	} = useSelect( ( select ) => {
+		const {
+			__experimentalGetPreviewDeviceType,
+			getEditedPostType,
+			getEditedPostId,
+			isInserterOpened,
+			isListViewOpened,
+			getEditorMode,
+			getSettings,
+		} = select( editSiteStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const { __experimentalGetTemplateInfo: getTemplateInfo } =
+			select( editorStore );
+		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
+
+		const postType = getEditedPostType();
+		const postId = getEditedPostId();
+		const record = getEditedEntityRecord( 'postType', postType, postId );
+		const _isLoaded = !! postId;
+
+		return {
+			deviceType: __experimentalGetPreviewDeviceType(),
+			entityTitle: getTemplateInfo( record ).title,
+			isLoaded: _isLoaded,
+			template: record,
+			templateType: postType,
+			isInserterOpen: isInserterOpened(),
+			isListViewOpen: isListViewOpened(),
+			listViewShortcut: getShortcutRepresentation(
+				'core/edit-site/toggle-list-view'
+			),
+			isVisualMode: getEditorMode() === 'visual',
+			settings: getSettings(),
+			blockEditorMode: __unstableGetEditorMode(),
+			showIconLabels: select( preferencesStore ).get(
+				'core/edit-site',
+				'showIconLabels'
+			),
+		};
+	}, [] );
+
+	const {
+		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
+		setIsInserterOpened,
+		setIsListViewOpened,
+	} = useDispatch( editSiteStore );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+
+	const isLargeViewport = useViewportMatch( 'medium' );
+
+	const openInserter = useCallback( () => {
+		if ( isInserterOpen ) {
+			// Focusing the inserter button closes the inserter popover.
+			inserterButton.current.focus();
+		} else {
+			setIsInserterOpened( true );
+		}
+	}, [ isInserterOpen, setIsInserterOpened ] );
+
+	const toggleListView = useCallback(
+		() => setIsListViewOpened( ! isListViewOpen ),
+		[ setIsListViewOpened, isListViewOpen ]
+	);
+
+	const isFocusMode = templateType === 'wp_template_part';
+
+	/* translators: button label text should, if possible, be under 16 characters. */
+	const longLabel = _x(
+		'Toggle block inserter',
+		'Generic label for block inserter button'
+	);
+	const shortLabel = ! isInserterOpen ? __( 'Add' ) : __( 'Close' );
+
+	const isZoomedOutViewExperimentEnabled =
+		window?.__experimentalEnableZoomedOutView && isVisualMode;
+	const isZoomedOutView = blockEditorMode === 'zoom-out';
+
+	return (
+		<div
+			className={ classnames( 'edit-site-header-edit-mode', {
+				'show-icon-labels': showIconLabels,
+			} ) }
+		>
+			<NavigableToolbar
+				className="edit-site-header-edit-mode__start"
+				aria-label={ __( 'Document tools' ) }
+			>
+				<div className="edit-site-header-edit-mode__toolbar">
+					<ToolbarItem
+						ref={ inserterButton }
+						as={ Button }
+						className="edit-site-header-edit-mode-toolbar__inserter-toggle"
+						variant="primary"
+						isPressed={ isInserterOpen }
+						onMouseDown={ preventDefault }
+						onClick={ openInserter }
+						disabled={ ! isVisualMode }
+						icon={ plus }
+						label={ showIconLabels ? shortLabel : longLabel }
+						showTooltip={ ! showIconLabels }
+					/>
+					{ isLargeViewport && (
+						<>
+							<ToolbarItem
+								as={ ToolSelector }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+								disabled={ ! isVisualMode }
+							/>
+							<ToolbarItem
+								as={ UndoButton }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+							/>
+							<ToolbarItem
+								as={ RedoButton }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+							/>
+							<ToolbarItem
+								as={ Button }
+								className="edit-site-header-edit-mode-toolbar__list-view-toggle"
+								disabled={ ! isVisualMode && isZoomedOutView }
+								icon={ listView }
+								isPressed={ isListViewOpen }
+								/* translators: button label text should, if possible, be under 16 characters. */
+								label={ __( 'List View' ) }
+								onClick={ toggleListView }
+								shortcut={ listViewShortcut }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+							/>
+							{ isZoomedOutViewExperimentEnabled && (
+								<ToolbarItem
+									as={ Button }
+									className="edit-site-header-edit-mode-toolbar__zoom-out-view-toggle"
+									icon={ chevronUpDown }
+									isPressed={ isZoomedOutView }
+									/* translators: button label text should, if possible, be under 16 characters. */
+									label={ __( 'Zoom-out View' ) }
+									onClick={ () => {
+										setPreviewDeviceType( 'desktop' );
+										__unstableSetEditorMode(
+											isZoomedOutView
+												? 'edit'
+												: 'zoom-out'
+										);
+									} }
+								/>
+							) }
+						</>
+					) }
+				</div>
+			</NavigableToolbar>
+
+			<div className="edit-site-header-edit-mode__center">
+				<DocumentActions
+					entityTitle={ entityTitle }
+					entityLabel={
+						templateType === 'wp_template_part'
+							? 'template part'
+							: 'template'
+					}
+					isLoaded={ isLoaded }
+					showIconLabels={ showIconLabels }
+				>
+					{ ( { onClose } ) => (
+						<TemplateDetails
+							template={ template }
+							onClose={ onClose }
+						/>
+					) }
+				</DocumentActions>
+			</div>
+
+			<div className="edit-site-header-edit-mode__end">
+				<div className="edit-site-header-edit-mode__actions">
+					{ ! isFocusMode && (
+						<div
+							className={ classnames(
+								'edit-site-header-edit-mode__actions__preview-options',
+								{ 'is-zoomed-out': isZoomedOutView }
+							) }
+						>
+							<PreviewOptions
+								deviceType={ deviceType }
+								setDeviceType={ setPreviewDeviceType }
+							>
+								<MenuGroup>
+									<MenuItem
+										href={ settings?.siteUrl }
+										target="_blank"
+										icon={ external }
+									>
+										{ __( 'View site' ) }
+										<VisuallyHidden as="span">
+											{
+												/* translators: accessibility text */
+												__( '(opens in a new tab)' )
+											}
+										</VisuallyHidden>
+									</MenuItem>
+								</MenuGroup>
+							</PreviewOptions>
+						</div>
+					) }
+					<SaveButton />
+					<PinnedItems.Slot scope="core/edit-site" />
+					<MoreMenu showIconLabels={ showIconLabels } />
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/packages/edit-site/src/components/header/mode-switcher/index.js b/packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js
similarity index 100%
rename from packages/edit-site/src/components/header/mode-switcher/index.js
rename to packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js
diff --git a/packages/edit-site/src/components/header/more-menu/copy-content-menu-item.js b/packages/edit-site/src/components/header-edit-mode/more-menu/copy-content-menu-item.js
similarity index 100%
rename from packages/edit-site/src/components/header/more-menu/copy-content-menu-item.js
rename to packages/edit-site/src/components/header-edit-mode/more-menu/copy-content-menu-item.js
diff --git a/packages/edit-site/src/components/header/more-menu/index.js b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
similarity index 100%
rename from packages/edit-site/src/components/header/more-menu/index.js
rename to packages/edit-site/src/components/header-edit-mode/more-menu/index.js
diff --git a/packages/edit-site/src/components/header/more-menu/site-export.js b/packages/edit-site/src/components/header-edit-mode/more-menu/site-export.js
similarity index 100%
rename from packages/edit-site/src/components/header/more-menu/site-export.js
rename to packages/edit-site/src/components/header-edit-mode/more-menu/site-export.js
diff --git a/packages/edit-site/src/components/header/more-menu/welcome-guide-menu-item.js b/packages/edit-site/src/components/header-edit-mode/more-menu/welcome-guide-menu-item.js
similarity index 100%
rename from packages/edit-site/src/components/header/more-menu/welcome-guide-menu-item.js
rename to packages/edit-site/src/components/header-edit-mode/more-menu/welcome-guide-menu-item.js
diff --git a/packages/edit-site/src/components/header/plugin-more-menu-item/index.js b/packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js
similarity index 100%
rename from packages/edit-site/src/components/header/plugin-more-menu-item/index.js
rename to packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js
diff --git a/packages/edit-site/src/components/header/plugin-sidebar-more-menu-item/index.js b/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js
similarity index 100%
rename from packages/edit-site/src/components/header/plugin-sidebar-more-menu-item/index.js
rename to packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js
diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
new file mode 100644
index 0000000000000..1753589adf4e7
--- /dev/null
+++ b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -0,0 +1,222 @@
+$header-toolbar-min-width: 335px;
+
+.edit-site-header-edit-mode {
+	align-items: center;
+	background-color: $white;
+	display: flex;
+	height: $header-height;
+	box-sizing: border-box;
+	width: 100%;
+	justify-content: space-between;
+
+	.edit-site-header-edit-mode__start {
+		display: flex;
+		border: none;
+	}
+
+	.edit-site-header-edit-mode__end {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.edit-site-header-edit-mode__center {
+		display: flex;
+		align-items: center;
+		height: 100%;
+		flex-grow: 1;
+		justify-content: center;
+		// Flex items will, by default, refuse to shrink below a minimum
+		// intrinsic width. In order to shrink this flexbox item, and
+		// subsequently truncate child text, we set an explicit min-width.
+		// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
+		min-width: 0;
+	}
+}
+
+.edit-site-header-edit-mode__toolbar {
+	display: flex;
+	align-items: center;
+	padding-left: $grid-unit-10;
+
+	@include break-small() {
+		padding-left: $grid-unit-30;
+	}
+
+	@include break-wide() {
+		padding-right: $grid-unit-10;
+	}
+
+	.edit-site-header-edit-mode-toolbar__inserter-toggle {
+		margin-right: $grid-unit-10;
+		min-width: $grid-unit-40;
+		width: $grid-unit-40;
+		height: $grid-unit-40;
+		padding: 0;
+
+		svg {
+			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
+			@include reduce-motion("transition");
+		}
+
+		&.is-pressed {
+			svg {
+				transform: rotate(45deg);
+			}
+		}
+	}
+}
+
+.edit-site-header-edit-mode__toolbar-switchers {
+	align-items: center;
+	display: flex;
+}
+
+.edit-site-header-edit-mode__toolbar-switchers-separator {
+	margin: 0 -6px 0;
+}
+
+
+/**
+ * Buttons on the right side
+ */
+
+.edit-site-header-edit-mode__actions {
+	display: inline-flex;
+	align-items: center;
+	padding-right: $grid-unit-05;
+
+	@include break-small () {
+		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
+	}
+
+	gap: $grid-unit-05;
+
+	@include break-small() {
+		gap: $grid-unit-10;
+	}
+
+	// Pinned items.
+	.interface-pinned-items {
+		display: none;
+
+		@include break-medium() {
+			display: inline-flex;
+		}
+	}
+}
+
+.edit-site-header-edit-mode__actions__preview-options {
+	opacity: 1;
+	transition: opacity 0.3s;
+
+	&.is-zoomed-out {
+		opacity: 0;
+	}
+}
+
+.edit-site-header-edit-mode__actions-more-menu {
+	margin-left: -4px;
+
+	// The padding and margin of the more menu is intentionally non-standard.
+	.components-icon-button {
+		padding: 8px 2px;
+		width: auto;
+	}
+
+	@include break-small() {
+		margin-left: 4px;
+
+		.components-icon-button {
+			padding: 8px 4px;
+		}
+	}
+}
+
+.edit-site-header-edit-mode__start {
+	display: flex;
+	border: none;
+
+	// The Toolbar component adds different styles to buttons, so we reset them
+	// here to the original button styles
+	.edit-site-header-edit-mode__toolbar > .components-button.has-icon,
+	.edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
+		height: $button-size;
+		min-width: $button-size;
+		padding: 6px;
+
+		&.is-pressed {
+			background: $gray-900;
+		}
+
+		&:focus:not(:disabled) {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
+			outline: 1px solid transparent;
+		}
+
+		&::before {
+			display: none;
+		}
+	}
+
+	.eedit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode-toolbar__inserter-toggle.has-icon {
+		margin-right: $grid-unit-10;
+		// Special dimensions for this button.
+		min-width: 32px;
+		width: 32px;
+		height: 32px;
+		padding: 0;
+	}
+
+	.edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode-toolbar__inserter-toggle.has-text.has-icon {
+		width: auto;
+		padding: 0 $grid-unit-10;
+	}
+}
+
+// Button text label styles
+
+.edit-site-header-edit-mode.show-icon-labels {
+	.components-button.has-icon {
+		width: auto;
+
+		// Hide the button icons when labels are set to display...
+		svg {
+			display: none;
+		}
+		// ... and display labels.
+		&::after {
+			content: attr(aria-label);
+		}
+		&[aria-disabled="true"] {
+			background-color: transparent;
+		}
+	}
+	.is-tertiary {
+		&:active {
+			box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
+			background-color: transparent;
+		}
+	}
+	// Some margins and padding have to be adjusted so the buttons can still fit on smaller screens.
+	.edit-site-save-button__button {
+		padding-left: 6px;
+		padding-right: 6px;
+	}
+
+	// The template details toggle has a custom label, different from its aria-label, so we don't want to display both.
+	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
+		&::after {
+			content: none;
+		}
+	}
+
+	.edit-site-header-edit-mode-toolbar__inserter-toggle.edit-site-header-edit-mode-toolbar__inserter-toggle,
+	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
+		height: 36px;
+		padding: 0 $grid-unit-10;
+	}
+
+	.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/header/tools-more-menu-group/index.js b/packages/edit-site/src/components/header-edit-mode/tools-more-menu-group/index.js
similarity index 100%
rename from packages/edit-site/src/components/header/tools-more-menu-group/index.js
rename to packages/edit-site/src/components/header-edit-mode/tools-more-menu-group/index.js
diff --git a/packages/edit-site/src/components/header/undo-redo/redo.js b/packages/edit-site/src/components/header-edit-mode/undo-redo/redo.js
similarity index 100%
rename from packages/edit-site/src/components/header/undo-redo/redo.js
rename to packages/edit-site/src/components/header-edit-mode/undo-redo/redo.js
diff --git a/packages/edit-site/src/components/header/undo-redo/undo.js b/packages/edit-site/src/components/header-edit-mode/undo-redo/undo.js
similarity index 100%
rename from packages/edit-site/src/components/header/undo-redo/undo.js
rename to packages/edit-site/src/components/header-edit-mode/undo-redo/undo.js
diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
index 2630236b36f5b..cfad86f05fb5b 100644
--- a/packages/edit-site/src/components/header/index.js
+++ b/packages/edit-site/src/components/header/index.js
@@ -1,285 +1,69 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { useCallback, useRef } from '@wordpress/element';
-import { useViewportMatch } from '@wordpress/compose';
-import {
-	ToolSelector,
-	__experimentalPreviewOptions as PreviewOptions,
-	NavigableToolbar,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { PinnedItems } from '@wordpress/interface';
-import { _x, __ } from '@wordpress/i18n';
-import { listView, plus, external, chevronUpDown } from '@wordpress/icons';
 import {
+	__unstableAnimatePresence as AnimatePresence,
+	__experimentalHStack as HStack,
+	__unstableMotion as motion,
 	Button,
-	ToolbarItem,
-	MenuGroup,
-	MenuItem,
-	VisuallyHidden,
+	FlexBlock,
 } from '@wordpress/components';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { store as preferencesStore } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { useReducedMotion } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import MoreMenu from './more-menu';
-import SaveButton from '../save-button';
-import UndoButton from './undo-redo/undo';
-import RedoButton from './undo-redo/redo';
-import DocumentActions from './document-actions';
-import TemplateDetails from '../template-details';
 import { store as editSiteStore } from '../../store';
-
-const preventDefault = ( event ) => {
-	event.preventDefault();
-};
+import EditorToolbars from '../header-edit-mode';
+import SiteIconAndTitle from '../site-icon-and-title';
 
 export default function Header() {
-	const inserterButton = useRef();
-	const {
-		deviceType,
-		entityTitle,
-		template,
-		templateType,
-		isInserterOpen,
-		isListViewOpen,
-		listViewShortcut,
-		isLoaded,
-		isVisualMode,
-		settings,
-		blockEditorMode,
-		showIconLabels,
-	} = useSelect( ( select ) => {
-		const {
-			__experimentalGetPreviewDeviceType,
-			getEditedPostType,
-			getEditedPostId,
-			isInserterOpened,
-			isListViewOpened,
-			getEditorMode,
-			getSettings,
-		} = select( editSiteStore );
-		const { getEditedEntityRecord } = select( coreStore );
-		const { __experimentalGetTemplateInfo: getTemplateInfo } =
-			select( editorStore );
-		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-		const { __unstableGetEditorMode } = select( blockEditorStore );
-
-		const postType = getEditedPostType();
-		const postId = getEditedPostId();
-		const record = getEditedEntityRecord( 'postType', postType, postId );
-		const _isLoaded = !! postId;
-
-		return {
-			deviceType: __experimentalGetPreviewDeviceType(),
-			entityTitle: getTemplateInfo( record ).title,
-			isLoaded: _isLoaded,
-			template: record,
-			templateType: postType,
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-			listViewShortcut: getShortcutRepresentation(
-				'core/edit-site/toggle-list-view'
-			),
-			isVisualMode: getEditorMode() === 'visual',
-			settings: getSettings(),
-			blockEditorMode: __unstableGetEditorMode(),
-			showIconLabels: select( preferencesStore ).get(
-				'core/edit-site',
-				'showIconLabels'
-			),
-		};
-	}, [] );
-
-	const {
-		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
-		setIsInserterOpened,
-		setIsListViewOpened,
-	} = useDispatch( editSiteStore );
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-
-	const isLargeViewport = useViewportMatch( 'medium' );
-
-	const openInserter = useCallback( () => {
-		if ( isInserterOpen ) {
-			// Focusing the inserter button closes the inserter popover.
-			inserterButton.current.focus();
-		} else {
-			setIsInserterOpened( true );
-		}
-	}, [ isInserterOpen, setIsInserterOpened ] );
-
-	const toggleListView = useCallback(
-		() => setIsListViewOpened( ! isListViewOpen ),
-		[ setIsListViewOpened, isListViewOpen ]
+	const { canvasMode } = useSelect(
+		( select ) => ( {
+			canvasMode: select( editSiteStore ).__unstableGetCanvasMode(),
+		} ),
+		[]
 	);
-
-	const isFocusMode = templateType === 'wp_template_part';
-
-	/* translators: button label text should, if possible, be under 16 characters. */
-	const longLabel = _x(
-		'Toggle block inserter',
-		'Generic label for block inserter button'
-	);
-	const shortLabel = ! isInserterOpen ? __( 'Add' ) : __( 'Close' );
-
-	const isZoomedOutViewExperimentEnabled =
-		window?.__experimentalEnableZoomedOutView && isVisualMode;
-	const isZoomedOutView = blockEditorMode === 'zoom-out';
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const disableMotion = useReducedMotion();
 
 	return (
-		<div
-			className={ classnames( 'edit-site-header', {
-				'show-icon-labels': showIconLabels,
-			} ) }
-		>
-			<NavigableToolbar
-				className="edit-site-header_start"
-				aria-label={ __( 'Document tools' ) }
+		<HStack>
+			<Button
+				className="edit-site-header__toggle"
+				label={ __( 'Toggle Navigation Sidebar' ) }
+				onClick={ () =>
+					__unstableSetCanvasMode(
+						canvasMode === 'view' ? 'edit' : 'view'
+					)
+				}
 			>
-				<div className="edit-site-header__toolbar">
-					<ToolbarItem
-						ref={ inserterButton }
-						as={ Button }
-						className="edit-site-header-toolbar__inserter-toggle"
-						variant="primary"
-						isPressed={ isInserterOpen }
-						onMouseDown={ preventDefault }
-						onClick={ openInserter }
-						disabled={ ! isVisualMode }
-						icon={ plus }
-						label={ showIconLabels ? shortLabel : longLabel }
-						showTooltip={ ! showIconLabels }
-					/>
-					{ isLargeViewport && (
-						<>
-							<ToolbarItem
-								as={ ToolSelector }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-								disabled={ ! isVisualMode }
-							/>
-							<ToolbarItem
-								as={ UndoButton }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-							/>
-							<ToolbarItem
-								as={ RedoButton }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-							/>
-							<ToolbarItem
-								as={ Button }
-								className="edit-site-header-toolbar__list-view-toggle"
-								disabled={ ! isVisualMode && isZoomedOutView }
-								icon={ listView }
-								isPressed={ isListViewOpen }
-								/* translators: button label text should, if possible, be under 16 characters. */
-								label={ __( 'List View' ) }
-								onClick={ toggleListView }
-								shortcut={ listViewShortcut }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-							/>
-							{ isZoomedOutViewExperimentEnabled && (
-								<ToolbarItem
-									as={ Button }
-									className="edit-site-header-toolbar__zoom-out-view-toggle"
-									icon={ chevronUpDown }
-									isPressed={ isZoomedOutView }
-									/* translators: button label text should, if possible, be under 16 characters. */
-									label={ __( 'Zoom-out View' ) }
-									onClick={ () => {
-										setPreviewDeviceType( 'desktop' );
-										__unstableSetEditorMode(
-											isZoomedOutView
-												? 'edit'
-												: 'zoom-out'
-										);
-									} }
-								/>
-							) }
-						</>
-					) }
-				</div>
-			</NavigableToolbar>
-
-			<div className="edit-site-header_center">
-				<DocumentActions
-					entityTitle={ entityTitle }
-					entityLabel={
-						templateType === 'wp_template_part'
-							? 'template part'
-							: 'template'
-					}
-					isLoaded={ isLoaded }
-					showIconLabels={ showIconLabels }
-				>
-					{ ( { onClose } ) => (
-						<TemplateDetails
-							template={ template }
-							onClose={ onClose }
-						/>
-					) }
-				</DocumentActions>
-			</div>
-
-			<div className="edit-site-header_end">
-				<div className="edit-site-header__actions">
-					{ ! isFocusMode && (
-						<div
-							className={ classnames(
-								'edit-site-header__actions__preview-options',
-								{ 'is-zoomed-out': isZoomedOutView }
-							) }
+				{ canvasMode === 'edit' && (
+					<SiteIconAndTitle showTitle={ false } />
+				) }
+				{ canvasMode === 'view' && __( 'Edit' ) }
+			</Button>
+			<FlexBlock>
+				<AnimatePresence exitBeforeEnter>
+					{ canvasMode === 'edit' && (
+						<motion.div
+							initial={ { opacity: 0 } }
+							animate={ { opacity: 1 } }
+							exit={ {
+								opacity: 0,
+							} }
+							transition={ {
+								type: 'tween',
+								duration: disableMotion ? 0 : 0.5,
+							} }
 						>
-							<PreviewOptions
-								deviceType={ deviceType }
-								setDeviceType={ setPreviewDeviceType }
-							>
-								<MenuGroup>
-									<MenuItem
-										href={ settings?.siteUrl }
-										target="_blank"
-										icon={ external }
-									>
-										{ __( 'View site' ) }
-										<VisuallyHidden as="span">
-											{
-												/* translators: accessibility text */
-												__( '(opens in a new tab)' )
-											}
-										</VisuallyHidden>
-									</MenuItem>
-								</MenuGroup>
-							</PreviewOptions>
-						</div>
+							<EditorToolbars />
+						</motion.div>
 					) }
-					<SaveButton />
-					<PinnedItems.Slot scope="core/edit-site" />
-					<MoreMenu showIconLabels={ showIconLabels } />
-				</div>
-			</div>
-		</div>
+				</AnimatePresence>
+			</FlexBlock>
+		</HStack>
 	);
 }
diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
index bd6778426d8f5..c905c42fc5981 100644
--- a/packages/edit-site/src/components/header/style.scss
+++ b/packages/edit-site/src/components/header/style.scss
@@ -1,224 +1,3 @@
-$header-toolbar-min-width: 335px;
-
-.edit-site-header {
-	align-items: center;
-	background-color: $white;
-	display: flex;
-	height: $header-height;
-	box-sizing: border-box;
-	width: 100%;
-	justify-content: space-between;
-
-	.edit-site-header_start {
-		display: flex;
-		border: none;
-	}
-
-	.edit-site-header_end {
-		display: flex;
-		justify-content: flex-end;
-	}
-
-	.edit-site-header_center {
-		display: flex;
-		align-items: center;
-		height: 100%;
-		flex-grow: 1;
-		justify-content: center;
-		// Flex items will, by default, refuse to shrink below a minimum
-		// intrinsic width. In order to shrink this flexbox item, and
-		// subsequently truncate child text, we set an explicit min-width.
-		// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
-		min-width: 0;
-	}
-}
-
-.edit-site-header__toolbar {
-	display: flex;
-	align-items: center;
-	padding-left: $grid-unit-10;
-
-	@include break-small() {
-		padding-left: $grid-unit-30;
-	}
-
-	@include break-wide() {
-		padding-right: $grid-unit-10;
-	}
-
-	.edit-site-header-toolbar__inserter-toggle {
-		margin-right: $grid-unit-10;
-		min-width: $grid-unit-40;
-		width: $grid-unit-40;
-		height: $grid-unit-40;
-		padding: 0;
-
-		svg {
-			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
-			@include reduce-motion("transition");
-		}
-
-		&.is-pressed {
-			svg {
-				transform: rotate(45deg);
-			}
-		}
-	}
-}
-
-.edit-site-header__toolbar-switchers {
-	align-items: center;
-	display: flex;
-}
-
-.edit-site-header__toolbar-switchers-separator {
-	margin: 0 -6px 0;
-}
-
-
-/**
- * Buttons on the right side
- */
-
-.edit-site-header__actions {
-	display: inline-flex;
-	align-items: center;
-	padding-right: $grid-unit-05;
-
-	@include break-small () {
-		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
-	}
-
-	gap: $grid-unit-05;
-
-	@include break-small() {
-		gap: $grid-unit-10;
-	}
-
-	// Pinned items.
-	.interface-pinned-items {
-		display: none;
-
-		@include break-medium() {
-			display: inline-flex;
-		}
-	}
-}
-
-.edit-site-header__actions__preview-options {
-	opacity: 1;
-	transition: opacity 0.3s;
-
-	&.is-zoomed-out {
-		opacity: 0;
-	}
-}
-
-.edit-site-header__actions-more-menu {
-	margin-left: -4px;
-
-	// The padding and margin of the more menu is intentionally non-standard.
-	.components-icon-button {
-		padding: 8px 2px;
-		width: auto;
-	}
-
-	@include break-small() {
-		margin-left: 4px;
-
-		.components-icon-button {
-			padding: 8px 4px;
-		}
-	}
-}
-
-.edit-site-header_start {
-	display: flex;
-	border: none;
-
-	// The Toolbar component adds different styles to buttons, so we reset them
-	// here to the original button styles
-	.edit-site-header__toolbar > .components-button.has-icon,
-	.edit-site-header__toolbar > .components-dropdown > .components-button.has-icon {
-		height: $button-size;
-		min-width: $button-size;
-		padding: 6px;
-
-		&.is-pressed {
-			background: $gray-900;
-		}
-
-		&:focus:not(:disabled) {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
-			outline: 1px solid transparent;
-		}
-
-		&::before {
-			display: none;
-		}
-	}
-
-	.edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-icon {
-		margin-right: $grid-unit-10;
-		// Special dimensions for this button.
-		min-width: 32px;
-		width: 32px;
-		height: 32px;
-		padding: 0;
-	}
-
-	.edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-text.has-icon {
-		width: auto;
-		padding: 0 $grid-unit-10;
-	}
-
-
-}
-
-// Button text label styles
-
-.edit-site-header.show-icon-labels {
-	.components-button.has-icon {
-		width: auto;
-
-		// Hide the button icons when labels are set to display...
-		svg {
-			display: none;
-		}
-		// ... and display labels.
-		&::after {
-			content: attr(aria-label);
-		}
-		&[aria-disabled="true"] {
-			background-color: transparent;
-		}
-	}
-	.is-tertiary {
-		&:active {
-			box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
-			background-color: transparent;
-		}
-	}
-	// Some margins and padding have to be adjusted so the buttons can still fit on smaller screens.
-	.edit-site-save-button__button {
-		padding-left: 6px;
-		padding-right: 6px;
-	}
-
-	// The template details toggle has a custom label, different from its aria-label, so we don't want to display both.
-	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
-		&::after {
-			content: none;
-		}
-	}
-
-	.edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
-	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
-		height: 36px;
-		padding: 0 $grid-unit-10;
-	}
-
-	.edit-site-header_start .edit-site-header__toolbar > * + * {
-		margin-left: $grid-unit-10;
-	}
+.edit-site-header__toggle {
+	min-height: 60px;
 }
diff --git a/packages/edit-site/src/components/keyboard-shortcuts/index.js b/packages/edit-site/src/components/keyboard-shortcuts/index.js
index 5937acc6d80db..3a2d82c842eab 100644
--- a/packages/edit-site/src/components/keyboard-shortcuts/index.js
+++ b/packages/edit-site/src/components/keyboard-shortcuts/index.js
@@ -15,7 +15,7 @@ import { store as interfaceStore } from '@wordpress/interface';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { SIDEBAR_BLOCK } from '../sidebar/constants';
+import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
 import { STORE_NAME } from '../../store/constants';
 
 function KeyboardShortcuts() {
diff --git a/packages/edit-site/src/new/layout/index.js b/packages/edit-site/src/components/layout/index.js
similarity index 79%
rename from packages/edit-site/src/new/layout/index.js
rename to packages/edit-site/src/components/layout/index.js
index 8a02fcab469e2..81184fb2e06ec 100644
--- a/packages/edit-site/src/new/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -15,8 +15,8 @@ import { useReducedMotion } from '@wordpress/compose';
  */
 import { Sidebar } from '../sidebar';
 import Canvas from '../canvas';
+import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
-import ErrorBoundary from '../../components/error-boundary';
 
 export default function Layout() {
 	const { canvasMode } = useSelect(
@@ -31,16 +31,16 @@ export default function Layout() {
 
 	return (
 		<div
-			className={ classnames( 'edit-site-new__layout', {
+			className={ classnames( 'edit-site-layout', {
 				'is-full-canvas': canvasMode === 'edit',
 			} ) }
 		>
-			<div className="edit-site-new__sidebar">
+			<div className="edit-site-layout__sidebar">
 				<Sidebar />
 			</div>
-			<div className="edit-site-new__canvas-container">
+			<div className="edit-site-layout__canvas-container">
 				<motion.div
-					className="edit-site-new__canvas"
+					className="edit-site-layout__canvas"
 					layout={ ! disableMotion }
 				>
 					<ErrorBoundary>
diff --git a/packages/edit-site/src/new/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
similarity index 70%
rename from packages/edit-site/src/new/layout/style.scss
rename to packages/edit-site/src/components/layout/style.scss
index 69c739618f1f8..5c99829c0d49a 100644
--- a/packages/edit-site/src/new/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -1,30 +1,30 @@
-.edit-site-new__layout {
+.edit-site-layout {
 	background: $gray-900;
 	color: $white;
 	min-height: 100%;
 	display: flex;
 }
 
-.edit-site-new__sidebar {
+.edit-site-layout__sidebar {
 	width: $sidebar-width;
 	padding: $grid-unit-20;
 
-	.edit-site-new__layout.is-full-canvas & {
+	.edit-site-layout.is-full-canvas & {
 		display: none;
 	}
 }
 
-.edit-site-new__canvas-container {
+.edit-site-layout__canvas-container {
 	flex-grow: 1;
 	padding: $grid-unit-30;
 	position: relative;
 
-	.edit-site-new__layout.is-full-canvas & {
+	.edit-site-layout.is-full-canvas & {
 		padding: 0;
 	}
 }
 
-.edit-site-new__canvas {
+.edit-site-layout__canvas {
 	background: $white;
 	color: $gray-900;
 	border-radius: $radius-block-ui * 2;
@@ -35,7 +35,7 @@
 	bottom: $grid-unit-30;
 	overflow-y: auto;
 
-	.edit-site-new__layout.is-full-canvas & {
+	.edit-site-layout.is-full-canvas & {
 		top: 0;
 		left: 0;
 		right: 0;
@@ -45,7 +45,7 @@
 }
 
 // This shouldn't be necessary (we should have a way to say that a skeletton is relative
-.edit-site-new__canvas .interface-interface-skeleton {
+.edit-site-layout__canvas .interface-interface-skeleton {
 	position: relative !important;
 	max-height: auto !important;
 	min-height: 100% !important;
diff --git a/packages/edit-site/src/new/navigation-inspector/index.js b/packages/edit-site/src/components/navigation-inspector/index.js
similarity index 100%
rename from packages/edit-site/src/new/navigation-inspector/index.js
rename to packages/edit-site/src/components/navigation-inspector/index.js
diff --git a/packages/edit-site/src/new/navigation-inspector/navigation-menu.js b/packages/edit-site/src/components/navigation-inspector/navigation-menu.js
similarity index 100%
rename from packages/edit-site/src/new/navigation-inspector/navigation-menu.js
rename to packages/edit-site/src/components/navigation-inspector/navigation-menu.js
diff --git a/packages/edit-site/src/new/navigation-inspector/style.scss b/packages/edit-site/src/components/navigation-inspector/style.scss
similarity index 100%
rename from packages/edit-site/src/new/navigation-inspector/style.scss
rename to packages/edit-site/src/components/navigation-inspector/style.scss
diff --git a/packages/edit-site/src/components/sidebar/constants.js b/packages/edit-site/src/components/sidebar-edit-mode/constants.js
similarity index 100%
rename from packages/edit-site/src/components/sidebar/constants.js
rename to packages/edit-site/src/components/sidebar-edit-mode/constants.js
diff --git a/packages/edit-site/src/components/sidebar/default-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js
similarity index 100%
rename from packages/edit-site/src/components/sidebar/default-sidebar.js
rename to packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js
diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
similarity index 100%
rename from packages/edit-site/src/components/sidebar/global-styles-sidebar.js
rename to packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js
new file mode 100644
index 0000000000000..e69989db1015e
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-edit-mode/index.js
@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { cog } from '@wordpress/icons';
+import { useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import DefaultSidebar from './default-sidebar';
+import GlobalStylesSidebar from './global-styles-sidebar';
+import { STORE_NAME } from '../../store/constants';
+import SettingsHeader from './settings-header';
+import TemplateCard from './template-card';
+import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
+import { store as editSiteStore } from '../../store';
+
+const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
+	'EditSiteSidebarInspector'
+);
+export const SidebarInspectorFill = InspectorFill;
+
+export function SidebarComplementaryAreaFills() {
+	const {
+		sidebar,
+		isEditorSidebarOpened,
+		hasBlockSelection,
+		supportsGlobalStyles,
+	} = useSelect( ( select ) => {
+		const _sidebar =
+			select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );
+		const _isEditorSidebarOpened = [
+			SIDEBAR_BLOCK,
+			SIDEBAR_TEMPLATE,
+		].includes( _sidebar );
+		const settings = select( editSiteStore ).getSettings();
+		return {
+			sidebar: _sidebar,
+			isEditorSidebarOpened: _isEditorSidebarOpened,
+			hasBlockSelection:
+				!! select( blockEditorStore ).getBlockSelectionStart(),
+			supportsGlobalStyles: ! settings?.supportsTemplatePartsMode,
+		};
+	}, [] );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+
+	useEffect( () => {
+		if ( ! isEditorSidebarOpened ) return;
+		if ( hasBlockSelection ) {
+			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
+		} else {
+			enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
+		}
+	}, [ hasBlockSelection, isEditorSidebarOpened ] );
+
+	let sidebarName = sidebar;
+	if ( ! isEditorSidebarOpened ) {
+		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
+	}
+
+	return (
+		<>
+			<DefaultSidebar
+				identifier={ sidebarName }
+				title={ __( 'Settings' ) }
+				icon={ cog }
+				closeLabel={ __( 'Close settings sidebar' ) }
+				header={ <SettingsHeader sidebarName={ sidebarName } /> }
+				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
+			>
+				{ sidebarName === SIDEBAR_TEMPLATE && (
+					<PanelBody>
+						<TemplateCard />
+					</PanelBody>
+				) }
+				{ sidebarName === SIDEBAR_BLOCK && (
+					<InspectorSlot bubblesVirtually />
+				) }
+			</DefaultSidebar>
+			{ supportsGlobalStyles && <GlobalStylesSidebar /> }
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar/plugin-sidebar/index.js b/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js
similarity index 98%
rename from packages/edit-site/src/components/sidebar/plugin-sidebar/index.js
rename to packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js
index e617ae9ac0041..d705d0724af9f 100644
--- a/packages/edit-site/src/components/sidebar/plugin-sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js
@@ -83,7 +83,7 @@ export default function PluginSidebarEditSite( { className, ...props } ) {
 	return (
 		<ComplementaryArea
 			panelClassName={ className }
-			className="edit-site-sidebar"
+			className="edit-site-sidebar-edit-mode"
 			scope="core/edit-site"
 			showIconLabels={ showIconLabels }
 			{ ...props }
diff --git a/packages/edit-site/src/components/sidebar/settings-header/index.js b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js
similarity index 92%
rename from packages/edit-site/src/components/sidebar/settings-header/index.js
rename to packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js
index 3c02904adddf9..8e5e80d9fecc5 100644
--- a/packages/edit-site/src/components/sidebar/settings-header/index.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js
@@ -39,7 +39,7 @@ const SettingsHeader = ( { sidebarName } ) => {
 			<li>
 				<Button
 					onClick={ openTemplateSettings }
-					className={ `edit-site-sidebar__panel-tab ${ templateActiveClass }` }
+					className={ `edit-site-sidebar-edit-mode__panel-tab ${ templateActiveClass }` }
 					aria-label={ templateAriaLabel }
 					// translators: Data label for the Template Settings Sidebar tab.
 					data-label={ __( 'Template' ) }
@@ -53,7 +53,7 @@ const SettingsHeader = ( { sidebarName } ) => {
 			<li>
 				<Button
 					onClick={ openBlockSettings }
-					className={ `edit-site-sidebar__panel-tab ${ blockActiveClass }` }
+					className={ `edit-site-sidebar-edit-mode__panel-tab ${ blockActiveClass }` }
 					aria-label={ blockAriaLabel }
 					// translators: Data label for the Block Settings Sidebar tab.
 					data-label={ __( 'Block' ) }
diff --git a/packages/edit-site/src/components/sidebar/settings-header/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss
similarity index 93%
rename from packages/edit-site/src/components/sidebar/settings-header/style.scss
rename to packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss
index e3794a4c4064c..7cc1819cb1f28 100644
--- a/packages/edit-site/src/components/sidebar/settings-header/style.scss
+++ b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss
@@ -1,4 +1,4 @@
-.components-panel__header.edit-site-sidebar__panel-tabs {
+.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
 	justify-content: flex-start;
 	padding-left: 0;
 	padding-right: $grid-unit-20;
@@ -25,7 +25,7 @@
 	}
 }
 
-.components-button.edit-site-sidebar__panel-tab {
+.components-button.edit-site-sidebar-edit-mode__panel-tab {
 	border-radius: 0;
 	height: $grid-unit-60;
 	background: transparent;
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/style.scss
similarity index 98%
rename from packages/edit-site/src/components/sidebar/style.scss
rename to packages/edit-site/src/components/sidebar-edit-mode/style.scss
index 6b2950a6d2c33..d60c7fd6c55d9 100644
--- a/packages/edit-site/src/components/sidebar/style.scss
+++ b/packages/edit-site/src/components/sidebar-edit-mode/style.scss
@@ -1,4 +1,4 @@
-.edit-site-sidebar {
+.edit-site-sidebar-edit-mode {
 	width: $sidebar-width;
 
 	> .components-panel {
diff --git a/packages/edit-site/src/components/sidebar/template-card/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-card/index.js
similarity index 100%
rename from packages/edit-site/src/components/sidebar/template-card/index.js
rename to packages/edit-site/src/components/sidebar-edit-mode/template-card/index.js
diff --git a/packages/edit-site/src/components/sidebar/template-card/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/template-card/style.scss
similarity index 100%
rename from packages/edit-site/src/components/sidebar/template-card/style.scss
rename to packages/edit-site/src/components/sidebar-edit-mode/template-card/style.scss
diff --git a/packages/edit-site/src/components/sidebar/template-card/template-actions.js b/packages/edit-site/src/components/sidebar-edit-mode/template-card/template-actions.js
similarity index 100%
rename from packages/edit-site/src/components/sidebar/template-card/template-actions.js
rename to packages/edit-site/src/components/sidebar-edit-mode/template-card/template-actions.js
diff --git a/packages/edit-site/src/components/sidebar/template-card/template-areas.js b/packages/edit-site/src/components/sidebar-edit-mode/template-card/template-areas.js
similarity index 100%
rename from packages/edit-site/src/components/sidebar/template-card/template-areas.js
rename to packages/edit-site/src/components/sidebar-edit-mode/template-card/template-areas.js
diff --git a/packages/edit-site/src/new/sidebar-navigation/index.js b/packages/edit-site/src/components/sidebar-navigation/index.js
similarity index 100%
rename from packages/edit-site/src/new/sidebar-navigation/index.js
rename to packages/edit-site/src/components/sidebar-navigation/index.js
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index 40bb4ce82545d..5813e23f18c94 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -1,88 +1,24 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill, PanelBody } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { cog } from '@wordpress/icons';
-import { useEffect } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __experimentalVStack as VStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import DefaultSidebar from './default-sidebar';
-import GlobalStylesSidebar from './global-styles-sidebar';
-import { STORE_NAME } from '../../store/constants';
-import SettingsHeader from './settings-header';
-import TemplateCard from './template-card';
-import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
-import { store as editSiteStore } from '../../store';
-
-const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
-	'EditSiteSidebarInspector'
-);
-export const SidebarInspectorFill = InspectorFill;
-
-export function SidebarComplementaryAreaFills() {
-	const {
-		sidebar,
-		isEditorSidebarOpened,
-		hasBlockSelection,
-		supportsGlobalStyles,
-	} = useSelect( ( select ) => {
-		const _sidebar =
-			select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );
-		const _isEditorSidebarOpened = [
-			SIDEBAR_BLOCK,
-			SIDEBAR_TEMPLATE,
-		].includes( _sidebar );
-		const settings = select( editSiteStore ).getSettings();
-		return {
-			sidebar: _sidebar,
-			isEditorSidebarOpened: _isEditorSidebarOpened,
-			hasBlockSelection:
-				!! select( blockEditorStore ).getBlockSelectionStart(),
-			supportsGlobalStyles: ! settings?.supportsTemplatePartsMode,
-		};
-	}, [] );
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-
-	useEffect( () => {
-		if ( ! isEditorSidebarOpened ) return;
-		if ( hasBlockSelection ) {
-			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
-		} else {
-			enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
-		}
-	}, [ hasBlockSelection, isEditorSidebarOpened ] );
-
-	let sidebarName = sidebar;
-	if ( ! isEditorSidebarOpened ) {
-		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
-	}
+import SiteIconAndTitle from '../site-icon-and-title';
+import SidebarNavigation from '../sidebar-navigation';
 
+export function Sidebar() {
 	return (
-		<>
-			<DefaultSidebar
-				identifier={ sidebarName }
-				title={ __( 'Settings' ) }
-				icon={ cog }
-				closeLabel={ __( 'Close settings sidebar' ) }
-				header={ <SettingsHeader sidebarName={ sidebarName } /> }
-				headerClassName="edit-site-sidebar__panel-tabs"
-			>
-				{ sidebarName === SIDEBAR_TEMPLATE && (
-					<PanelBody>
-						<TemplateCard />
-					</PanelBody>
-				) }
-				{ sidebarName === SIDEBAR_BLOCK && (
-					<InspectorSlot bubblesVirtually />
-				) }
-			</DefaultSidebar>
-			{ supportsGlobalStyles && <GlobalStylesSidebar /> }
-		</>
+		<VStack
+			alignment="top"
+			// Seems like spacing={ 8 } doesn't work in Safari
+			// Probably breaks a lot of other spacing configs.
+			spacing="20px"
+		>
+			<SiteIconAndTitle />
+			<SidebarNavigation />
+		</VStack>
 	);
 }
diff --git a/packages/edit-site/src/new/site-icon-and-title/index.js b/packages/edit-site/src/components/site-icon-and-title/index.js
similarity index 87%
rename from packages/edit-site/src/new/site-icon-and-title/index.js
rename to packages/edit-site/src/components/site-icon-and-title/index.js
index 421c56112f0ac..e179dace3a2fa 100644
--- a/packages/edit-site/src/new/site-icon-and-title/index.js
+++ b/packages/edit-site/src/components/site-icon-and-title/index.js
@@ -33,20 +33,20 @@ function SiteIconAndTitle( { showIcon = true, showTitle = true } ) {
 
 	const icon = siteIconUrl ? (
 		<img
-			className="edit-site-new__site-icon-and-title-image"
+			className="edit-site-site-icon-and-title-image"
 			alt={ __( 'Site Icon' ) }
 			src={ siteIconUrl }
 		/>
 	) : (
 		<Icon
-			className="edit-site-new__site-icon-and-title-icon"
+			className="edit-site-site-icon-and-title-icon"
 			size="36px"
 			icon={ wordpress }
 		/>
 	);
 
 	return (
-		<div className="edit-site-new__site-icon-and-title">
+		<div className="edit-site-site-icon-and-title">
 			{ showIcon && icon }
 			{ showTitle && siteTitle }
 		</div>
diff --git a/packages/edit-site/src/new/site-icon-and-title/style.scss b/packages/edit-site/src/components/site-icon-and-title/style.scss
similarity index 60%
rename from packages/edit-site/src/new/site-icon-and-title/style.scss
rename to packages/edit-site/src/components/site-icon-and-title/style.scss
index 5a36cbb497c5f..949c752e42474 100644
--- a/packages/edit-site/src/new/site-icon-and-title/style.scss
+++ b/packages/edit-site/src/components/site-icon-and-title/style.scss
@@ -1,14 +1,14 @@
-.edit-site-new__site-icon-and-title {
+.edit-site-site-icon-and-title {
 	display: inline-flex;
 	gap: $grid-unit-20;
 	align-items: center;
 }
 
-.edit-site-new__site-icon-and-title-icon {
+.edit-site-site-icon-and-title-icon {
 	fill: currentColor;
 }
 
-.edit-site-new__site-icon-and-title-image {
+.edit-site-site-icon-and-title-image {
 	width: $button-size;
 	height: $button-size;
 	border-radius: $radius-block-ui;
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index 3eb5606c2779b..faf6d15b512f6 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -27,7 +27,7 @@ import './hooks';
 import { store as editSiteStore } from './store';
 import getIsListPage from './utils/get-is-list-page';
 import ErrorBoundaryWarning from './components/error-boundary/warning';
-import AppV2 from './new';
+import App from './components/app';
 
 /**
  * Reinitializes the editor after the user chooses to reboot the editor after
@@ -132,7 +132,7 @@ export function reinitializeEditor( target, settings ) {
 	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
-	render( <AppV2 reboot={ reboot } />, target );
+	render( <App reboot={ reboot } />, target );
 }
 
 /**
@@ -160,6 +160,6 @@ export function initializeEditor( id, settings ) {
 }
 
 export { default as __experimentalMainDashboardButton } from './components/main-dashboard-button';
-export { default as PluginSidebar } from './components/sidebar/plugin-sidebar';
-export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item';
-export { default as PluginMoreMenuItem } from './components/header/plugin-more-menu-item';
+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/new/header/index.js b/packages/edit-site/src/new/header/index.js
deleted file mode 100644
index d7ba0f5ffdbf8..0000000000000
--- a/packages/edit-site/src/new/header/index.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	__unstableAnimatePresence as AnimatePresence,
-	__experimentalHStack as HStack,
-	__unstableMotion as motion,
-	Button,
-	FlexBlock,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useReducedMotion } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import EditorToolbars from '../../components/header';
-import SiteIconAndTitle from '../site-icon-and-title';
-
-export default function Header() {
-	const { canvasMode } = useSelect(
-		( select ) => ( {
-			canvasMode: select( editSiteStore ).__unstableGetCanvasMode(),
-		} ),
-		[]
-	);
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
-	const disableMotion = useReducedMotion();
-
-	return (
-		<HStack>
-			<Button
-				className="edit-site-new-header__toggle"
-				label={ __( 'Toggle Navigation Sidebar' ) }
-				onClick={ () =>
-					__unstableSetCanvasMode(
-						canvasMode === 'view' ? 'edit' : 'view'
-					)
-				}
-			>
-				{ canvasMode === 'edit' && (
-					<SiteIconAndTitle showTitle={ false } />
-				) }
-				{ canvasMode === 'view' && __( 'Edit' ) }
-			</Button>
-			<FlexBlock>
-				<AnimatePresence exitBeforeEnter>
-					{ canvasMode === 'edit' && (
-						<motion.div
-							initial={ { opacity: 0 } }
-							animate={ { opacity: 1 } }
-							exit={ {
-								opacity: 0,
-							} }
-							transition={ {
-								type: 'tween',
-								duration: disableMotion ? 0 : 0.5,
-							} }
-						>
-							<EditorToolbars />
-						</motion.div>
-					) }
-				</AnimatePresence>
-			</FlexBlock>
-		</HStack>
-	);
-}
diff --git a/packages/edit-site/src/new/header/style.scss b/packages/edit-site/src/new/header/style.scss
deleted file mode 100644
index c5794120f1ef7..0000000000000
--- a/packages/edit-site/src/new/header/style.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.edit-site-new-header__toggle {
-	min-height: 60px;
-}
diff --git a/packages/edit-site/src/new/sidebar/index.js b/packages/edit-site/src/new/sidebar/index.js
deleted file mode 100644
index 5813e23f18c94..0000000000000
--- a/packages/edit-site/src/new/sidebar/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalVStack as VStack } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import SiteIconAndTitle from '../site-icon-and-title';
-import SidebarNavigation from '../sidebar-navigation';
-
-export function Sidebar() {
-	return (
-		<VStack
-			alignment="top"
-			// Seems like spacing={ 8 } doesn't work in Safari
-			// Probably breaks a lot of other spacing configs.
-			spacing="20px"
-		>
-			<SiteIconAndTitle />
-			<SidebarNavigation />
-		</VStack>
-	);
-}
diff --git a/packages/edit-site/src/new/style.scss b/packages/edit-site/src/new/style.scss
deleted file mode 100644
index e1fd3e60c15b4..0000000000000
--- a/packages/edit-site/src/new/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "./layout/style.scss";
-@import "./canvas/style.scss";
-@import "./header/style.scss";
-@import "./site-icon-and-title/style.scss";
-@import "./navigation-inspector/style.scss";
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 7662abd924438..8b92eb29645a4 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -3,19 +3,24 @@
 @import "./components/block-editor/style.scss";
 @import "./components/code-editor/style.scss";
 @import "./components/global-styles/style.scss";
-@import "./components/header/style.scss";
-@import "./components/header/document-actions/style.scss";
+@import "./components/header-edit-mode/style.scss";
+@import "./components/header-edit-mode/document-actions/style.scss";
 @import "./components/list/style.scss";
 @import "./components/add-new-template/style.scss";
-@import "./components/sidebar/style.scss";
-@import "./components/sidebar/settings-header/style.scss";
-@import "./components/sidebar/template-card/style.scss";
+@import "./components/sidebar-edit-mode/style.scss";
+@import "./components/sidebar-edit-mode/settings-header/style.scss";
+@import "./components/sidebar-edit-mode/template-card/style.scss";
 @import "./components/template-details/style.scss";
 @import "./components/create-template-part-modal/style.scss";
 @import "./components/secondary-sidebar/style.scss";
 @import "./components/welcome-guide/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
-@import "./new/style.scss";
+@import "./components/layout/style.scss";
+@import "./components/canvas/style.scss";
+@import "./components/header/style.scss";
+@import "./components/site-icon-and-title/style.scss";
+@import "./components/navigation-inspector/style.scss";
+
 
 // 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.