diff --git a/packages/edit-site/src/components/block-editor/back-button.js b/packages/edit-site/src/components/block-editor/back-button.js
index 4723adc3f0a7aa..b7c281031f15b9 100644
--- a/packages/edit-site/src/components/block-editor/back-button.js
+++ b/packages/edit-site/src/components/block-editor/back-button.js
@@ -19,7 +19,9 @@ function BackButton() {
 	const isTemplatePart = location.params.postType === 'wp_template_part';
 	const previousTemplateId = location.state?.fromTemplateId;
 
-	if ( ! isTemplatePart || ! previousTemplateId ) {
+	const isFocusMode = isTemplatePart;
+
+	if ( ! isFocusMode || ! previousTemplateId ) {
 		return null;
 	}
 
diff --git a/packages/edit-site/src/components/block-editor/constants.js b/packages/edit-site/src/components/block-editor/constants.js
new file mode 100644
index 00000000000000..5985167c1e7d39
--- /dev/null
+++ b/packages/edit-site/src/components/block-editor/constants.js
@@ -0,0 +1 @@
+export const FOCUSABLE_ENTITIES = [ 'wp_template_part' ];
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index 9184913e5840ff..08a316028ba80b 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -1,228 +1,49 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useRef } from '@wordpress/element';
-import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
-import {
-	BlockList,
-	BlockInspector,
-	BlockTools,
-	__unstableUseClipboardHandler as useClipboardHandler,
-	__unstableUseTypingObserver as useTypingObserver,
-	BlockEditorKeyboardShortcuts,
-	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import {
-	useMergeRefs,
-	useViewportMatch,
-	useResizeObserver,
-} from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { BlockInspector } from '@wordpress/block-editor';
+
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 
 /**
  * Internal dependencies
  */
-import inserterMediaCategories from './inserter-media-categories';
+
 import TemplatePartConverter from '../template-part-converter';
 import { SidebarInspectorFill } from '../sidebar-edit-mode';
 import { store as editSiteStore } from '../../store';
-import BackButton from './back-button';
-import ResizableEditor from './resizable-editor';
-import EditorCanvas from './editor-canvas';
 import { unlock } from '../../lock-unlock';
-import EditorCanvasContainer from '../editor-canvas-container';
-import {
-	DisableNonPageContentBlocks,
-	usePageContentFocusNotifications,
-} from '../page-content-focus';
-
-const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
-
-const LAYOUT = {
-	type: 'default',
-	// At the root level of the site editor, no alignments should be allowed.
-	alignments: [],
-};
+import { DisableNonPageContentBlocks } from '../page-content-focus';
+import SiteEditorCanvas from './site-editor-canvas';
+import DefaultBlockEditorProvider from './providers/default-block-editor-provider';
 
 export default function BlockEditor() {
-	const { setIsInserterOpened } = useDispatch( editSiteStore );
-	const { storedSettings, templateType, canvasMode, hasPageContentFocus } =
-		useSelect(
-			( select ) => {
-				const {
-					getSettings,
-					getEditedPostType,
-					getCanvasMode,
-					hasPageContentFocus: _hasPageContentFocus,
-				} = unlock( select( editSiteStore ) );
-
-				return {
-					storedSettings: getSettings( setIsInserterOpened ),
-					templateType: getEditedPostType(),
-					canvasMode: getCanvasMode(),
-					hasPageContentFocus: _hasPageContentFocus(),
-				};
-			},
-			[ setIsInserterOpened ]
+	const { hasPageContentFocus } = useSelect( ( select ) => {
+		const { hasPageContentFocus: _hasPageContentFocus } = unlock(
+			select( editSiteStore )
 		);
 
-	const settingsBlockPatterns =
-		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
-		storedSettings.__experimentalBlockPatterns; // WP 5.9
-	const settingsBlockPatternCategories =
-		storedSettings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
-		storedSettings.__experimentalBlockPatternCategories; // WP 5.9
-
-	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
-		( select ) => ( {
-			restBlockPatterns: select( coreStore ).getBlockPatterns(),
-			restBlockPatternCategories:
-				select( coreStore ).getBlockPatternCategories(),
-		} ),
-		[]
-	);
-
-	const blockPatterns = useMemo(
-		() =>
-			[
-				...( settingsBlockPatterns || [] ),
-				...( restBlockPatterns || [] ),
-			]
-				.filter(
-					( x, index, arr ) =>
-						index === arr.findIndex( ( y ) => x.name === y.name )
-				)
-				.filter( ( { postTypes } ) => {
-					return (
-						! postTypes ||
-						( Array.isArray( postTypes ) &&
-							postTypes.includes( templateType ) )
-					);
-				} ),
-		[ settingsBlockPatterns, restBlockPatterns, templateType ]
-	);
-
-	const blockPatternCategories = useMemo(
-		() =>
-			[
-				...( settingsBlockPatternCategories || [] ),
-				...( restBlockPatternCategories || [] ),
-			].filter(
-				( x, index, arr ) =>
-					index === arr.findIndex( ( y ) => x.name === y.name )
-			),
-		[ settingsBlockPatternCategories, restBlockPatternCategories ]
-	);
-
-	const settings = useMemo( () => {
-		const {
-			__experimentalAdditionalBlockPatterns,
-			__experimentalAdditionalBlockPatternCategories,
-			...restStoredSettings
-		} = storedSettings;
-
 		return {
-			...restStoredSettings,
-			inserterMediaCategories,
-			__experimentalBlockPatterns: blockPatterns,
-			__experimentalBlockPatternCategories: blockPatternCategories,
+			hasPageContentFocus: _hasPageContentFocus(),
 		};
-	}, [ storedSettings, blockPatterns, blockPatternCategories ] );
-
-	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
-		'postType',
-		templateType
-	);
-
-	const contentRef = useRef();
-	const mergedRefs = useMergeRefs( [
-		contentRef,
-		useClipboardHandler(),
-		useTypingObserver(),
-		usePageContentFocusNotifications(),
-	] );
-	const isMobileViewport = useViewportMatch( 'small', '<' );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const [ resizeObserver, sizes ] = useResizeObserver();
-
-	const isTemplatePart = templateType === 'wp_template_part';
-
-	const hasBlocks = blocks.length !== 0;
-	const enableResizing =
-		isTemplatePart &&
-		canvasMode !== 'view' &&
-		// Disable resizing in mobile viewport.
-		! isMobileViewport;
-	const isViewMode = canvasMode === 'view';
-	const showBlockAppender =
-		( isTemplatePart && hasBlocks ) || isViewMode ? false : undefined;
+	}, [] );
 
 	return (
-		<ExperimentalBlockEditorProvider
-			settings={ settings }
-			value={ blocks }
-			onInput={ onInput }
-			onChange={ onChange }
-			useSubRegistry={ false }
-		>
+		<DefaultBlockEditorProvider>
 			{ hasPageContentFocus && <DisableNonPageContentBlocks /> }
 			<TemplatePartConverter />
 			<SidebarInspectorFill>
 				<BlockInspector />
 			</SidebarInspectorFill>
-			<EditorCanvasContainer.Slot>
-				{ ( [ editorCanvasView ] ) =>
-					editorCanvasView ? (
-						<div className="edit-site-visual-editor is-focus-mode">
-							{ editorCanvasView }
-						</div>
-					) : (
-						<BlockTools
-							className={ classnames( 'edit-site-visual-editor', {
-								'is-focus-mode':
-									isTemplatePart || !! editorCanvasView,
-								'is-view-mode': isViewMode,
-							} ) }
-							__unstableContentRef={ contentRef }
-							onClick={ ( event ) => {
-								// Clear selected block when clicking on the gray background.
-								if ( event.target === event.currentTarget ) {
-									clearSelectedBlock();
-								}
-							} }
-						>
-							<BlockEditorKeyboardShortcuts.Register />
-							<BackButton />
-							<ResizableEditor
-								enableResizing={ enableResizing }
-								height={ sizes.height ?? '100%' }
-							>
-								<EditorCanvas
-									enableResizing={ enableResizing }
-									settings={ settings }
-									contentRef={ mergedRefs }
-									readonly={ canvasMode === 'view' }
-								>
-									{ resizeObserver }
-									<BlockList
-										className="edit-site-block-editor__block-list wp-site-blocks"
-										layout={ LAYOUT }
-										renderAppender={ showBlockAppender }
-									/>
-								</EditorCanvas>
-							</ResizableEditor>
-						</BlockTools>
-					)
-				}
-			</EditorCanvasContainer.Slot>
+
+			<SiteEditorCanvas />
+
 			<ReusableBlocksMenuItems />
-		</ExperimentalBlockEditorProvider>
+		</DefaultBlockEditorProvider>
 	);
 }
diff --git a/packages/edit-site/src/components/block-editor/providers/default-block-editor-provider.js b/packages/edit-site/src/components/block-editor/providers/default-block-editor-provider.js
new file mode 100644
index 00000000000000..2ee0ae467f8d65
--- /dev/null
+++ b/packages/edit-site/src/components/block-editor/providers/default-block-editor-provider.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityBlockEditor } from '@wordpress/core-data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+import useSiteEditorSettings from '../use-site-editor-settings';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
+
+export default function DefaultBlockEditorProvider( { children } ) {
+	const settings = useSiteEditorSettings();
+
+	const { templateType } = useSelect( ( select ) => {
+		const { getEditedPostType } = unlock( select( editSiteStore ) );
+
+		return {
+			templateType: getEditedPostType(),
+		};
+	}, [] );
+
+	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
+		'postType',
+		templateType
+	);
+
+	return (
+		<ExperimentalBlockEditorProvider
+			settings={ settings }
+			value={ blocks }
+			onInput={ onInput }
+			onChange={ onChange }
+			useSubRegistry={ false }
+		>
+			{ children }
+		</ExperimentalBlockEditorProvider>
+	);
+}
diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
new file mode 100644
index 00000000000000..204ff85443fb80
--- /dev/null
+++ b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
@@ -0,0 +1,136 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRef } from '@wordpress/element';
+import {
+	BlockList,
+	BlockTools,
+	__unstableUseClipboardHandler as useClipboardHandler,
+	__unstableUseTypingObserver as useTypingObserver,
+	BlockEditorKeyboardShortcuts,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import {
+	useMergeRefs,
+	useViewportMatch,
+	useResizeObserver,
+} from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+import BackButton from './back-button';
+import ResizableEditor from './resizable-editor';
+import EditorCanvas from './editor-canvas';
+import EditorCanvasContainer from '../editor-canvas-container';
+import { usePageContentFocusNotifications } from '../page-content-focus';
+import useSiteEditorSettings from './use-site-editor-settings';
+import { store as editSiteStore } from '../../store';
+import { FOCUSABLE_ENTITIES } from './constants';
+import { unlock } from '../../lock-unlock';
+
+const LAYOUT = {
+	type: 'default',
+	// At the root level of the site editor, no alignments should be allowed.
+	alignments: [],
+};
+
+export default function SiteEditorCanvas() {
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+
+	const { isFocusMode, isViewMode } = useSelect( ( select ) => {
+		const { getEditedPostType, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
+
+		const _templateType = getEditedPostType();
+
+		return {
+			isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
+			isViewMode: getCanvasMode() === 'view',
+		};
+	}, [] );
+
+	const [ resizeObserver, sizes ] = useResizeObserver();
+
+	const settings = useSiteEditorSettings();
+
+	const { hasBlocks } = useSelect( ( select ) => {
+		const { getBlockCount } = select( blockEditorStore );
+
+		const blocks = getBlockCount();
+
+		return {
+			hasBlocks: !! blocks,
+		};
+	}, [] );
+
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const enableResizing =
+		isFocusMode &&
+		! isViewMode &&
+		// Disable resizing in mobile viewport.
+		! isMobileViewport;
+
+	const contentRef = useRef();
+	const mergedRefs = useMergeRefs( [
+		contentRef,
+		useClipboardHandler(),
+		useTypingObserver(),
+		usePageContentFocusNotifications(),
+	] );
+
+	// Hide the appender when in view mode (i.e. not editing).
+	const showBlockAppender = hasBlocks || isViewMode ? false : undefined;
+
+	return (
+		<EditorCanvasContainer.Slot>
+			{ ( [ editorCanvasView ] ) =>
+				editorCanvasView ? (
+					<div className="edit-site-visual-editor is-focus-mode">
+						{ editorCanvasView }
+					</div>
+				) : (
+					<BlockTools
+						className={ classnames( 'edit-site-visual-editor', {
+							'is-focus-mode': isFocusMode || !! editorCanvasView,
+							'is-view-mode': isViewMode,
+						} ) }
+						__unstableContentRef={ contentRef }
+						onClick={ ( event ) => {
+							// Clear selected block when clicking on the gray background.
+							if ( event.target === event.currentTarget ) {
+								clearSelectedBlock();
+							}
+						} }
+					>
+						<BlockEditorKeyboardShortcuts.Register />
+						<BackButton />
+						<ResizableEditor
+							enableResizing={ enableResizing }
+							height={ sizes.height ?? '100%' }
+						>
+							<EditorCanvas
+								enableResizing={ enableResizing }
+								settings={ settings }
+								contentRef={ mergedRefs }
+								readonly={ isViewMode }
+							>
+								{ resizeObserver }
+								<BlockList
+									className="edit-site-block-editor__block-list wp-site-blocks"
+									layout={ LAYOUT }
+									renderAppender={ showBlockAppender }
+								/>
+							</EditorCanvas>
+						</ResizableEditor>
+					</BlockTools>
+				)
+			}
+		</EditorCanvasContainer.Slot>
+	);
+}
diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js
new file mode 100644
index 00000000000000..4ce186ad9d6bb5
--- /dev/null
+++ b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js
@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import inserterMediaCategories from './inserter-media-categories';
+
+export default function useSiteEditorSettings( templateType ) {
+	const { storedSettings } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return {
+			storedSettings: getSettings(),
+		};
+	}, [] );
+
+	const settingsBlockPatterns =
+		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
+		storedSettings.__experimentalBlockPatterns; // WP 5.9
+	const settingsBlockPatternCategories =
+		storedSettings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
+		storedSettings.__experimentalBlockPatternCategories; // WP 5.9
+
+	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
+		( select ) => ( {
+			restBlockPatterns: select( coreStore ).getBlockPatterns(),
+			restBlockPatternCategories:
+				select( coreStore ).getBlockPatternCategories(),
+		} ),
+		[]
+	);
+	const blockPatterns = useMemo(
+		() =>
+			[
+				...( settingsBlockPatterns || [] ),
+				...( restBlockPatterns || [] ),
+			]
+				.filter(
+					( x, index, arr ) =>
+						index === arr.findIndex( ( y ) => x.name === y.name )
+				)
+				.filter( ( { postTypes } ) => {
+					return (
+						! postTypes ||
+						( Array.isArray( postTypes ) &&
+							postTypes.includes( templateType ) )
+					);
+				} ),
+		[ settingsBlockPatterns, restBlockPatterns, templateType ]
+	);
+
+	const blockPatternCategories = useMemo(
+		() =>
+			[
+				...( settingsBlockPatternCategories || [] ),
+				...( restBlockPatternCategories || [] ),
+			].filter(
+				( x, index, arr ) =>
+					index === arr.findIndex( ( y ) => x.name === y.name )
+			),
+		[ settingsBlockPatternCategories, restBlockPatternCategories ]
+	);
+	return useMemo( () => {
+		const {
+			__experimentalAdditionalBlockPatterns,
+			__experimentalAdditionalBlockPatternCategories,
+			...restStoredSettings
+		} = storedSettings;
+
+		return {
+			...restStoredSettings,
+			inserterMediaCategories,
+			__experimentalBlockPatterns: blockPatterns,
+			__experimentalBlockPatternCategories: blockPatternCategories,
+		};
+	}, [ storedSettings, blockPatterns, blockPatternCategories ] );
+}