diff --git a/packages/block-editor/src/components/block-quick-navigation/index.js b/packages/block-editor/src/components/block-quick-navigation/index.js
index 7a0e7984b83cb..63d0edbb868aa 100644
--- a/packages/block-editor/src/components/block-quick-navigation/index.js
+++ b/packages/block-editor/src/components/block-quick-navigation/index.js
@@ -10,18 +10,16 @@ import {
 	FlexBlock,
 	FlexItem,
 } from '@wordpress/components';
-import {
-	__experimentalGetBlockLabel,
-	store as blocksStore,
-} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
+import useBlockDisplayInformation from '../use-block-display-information';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
-export default function BlockQuickNavigation( { clientIds } ) {
+export default function BlockQuickNavigation( { clientIds, onSelect } ) {
 	if ( ! clientIds.length ) {
 		return null;
 	}
@@ -29,6 +27,7 @@ export default function BlockQuickNavigation( { clientIds } ) {
 		<VStack spacing={ 1 }>
 			{ clientIds.map( ( clientId ) => (
 				<BlockQuickNavigationItem
+					onSelect={ onSelect }
 					key={ clientId }
 					clientId={ clientId }
 				/>
@@ -37,29 +36,18 @@ export default function BlockQuickNavigation( { clientIds } ) {
 	);
 }
 
-function BlockQuickNavigationItem( { clientId } ) {
-	const { name, icon, isSelected } = useSelect(
+function BlockQuickNavigationItem( { clientId, onSelect } ) {
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
+	const { isSelected } = useSelect(
 		( select ) => {
-			const {
-				getBlockName,
-				getBlockAttributes,
-				isBlockSelected,
-				hasSelectedInnerBlock,
-			} = select( blockEditorStore );
-			const { getBlockType } = select( blocksStore );
-
-			const blockType = getBlockType( getBlockName( clientId ) );
-			const attributes = getBlockAttributes( clientId );
+			const { isBlockSelected, hasSelectedInnerBlock } =
+				select( blockEditorStore );
 
 			return {
-				name:
-					blockType &&
-					__experimentalGetBlockLabel(
-						blockType,
-						attributes,
-						'list-view'
-					),
-				icon: blockType?.icon,
 				isSelected:
 					isBlockSelected( clientId ) ||
 					hasSelectedInnerBlock( clientId, /* deep: */ true ),
@@ -72,14 +60,19 @@ function BlockQuickNavigationItem( { clientId } ) {
 	return (
 		<Button
 			isPressed={ isSelected }
-			onClick={ () => selectBlock( clientId ) }
+			onClick={ async () => {
+				await selectBlock( clientId );
+				if ( onSelect ) {
+					onSelect( clientId );
+				}
+			} }
 		>
 			<Flex>
 				<FlexItem>
-					<BlockIcon icon={ icon } />
+					<BlockIcon icon={ blockInformation?.icon } />
 				</FlexItem>
 				<FlexBlock style={ { textAlign: 'left' } }>
-					<Truncate>{ name }</Truncate>
+					<Truncate>{ blockTitle }</Truncate>
 				</FlexBlock>
 			</Flex>
 		</Button>
diff --git a/packages/editor/src/components/sidebar/index.js b/packages/editor/src/components/sidebar/index.js
index 668f8bc7b8517..dbd33459b7f0f 100644
--- a/packages/editor/src/components/sidebar/index.js
+++ b/packages/editor/src/components/sidebar/index.js
@@ -112,9 +112,7 @@ const SidebarContent = ( {
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
 					<PostSummary onActionPerformed={ onActionPerformed } />
 					<PluginDocumentSettingPanel.Slot />
-					{ renderingMode !== 'post-only' && (
-						<TemplateContentPanel />
-					) }
+					<TemplateContentPanel renderingMode={ renderingMode } />
 					<TemplatePartContentPanel />
 					<PostTransformPanel />
 					<PostTaxonomiesPanel />
diff --git a/packages/editor/src/components/sidebar/post-summary.js b/packages/editor/src/components/sidebar/post-summary.js
index 676c330e708db..a6a95d36388ba 100644
--- a/packages/editor/src/components/sidebar/post-summary.js
+++ b/packages/editor/src/components/sidebar/post-summary.js
@@ -28,7 +28,6 @@ import BlogTitle from '../blog-title';
 import PostsPerPage from '../posts-per-page';
 import SiteDiscussion from '../site-discussion';
 import { store as editorStore } from '../../store';
-import TemplateAreas from '../template-areas';
 import { PrivatePostLastRevision } from '../post-last-revision';
 
 /**
@@ -84,7 +83,6 @@ export default function PostSummary( { onActionPerformed } ) {
 										<SiteDiscussion />
 										<PostFormatPanel />
 									</VStack>
-									<TemplateAreas />
 									{ fills }
 								</VStack>
 							) }
diff --git a/packages/editor/src/components/template-areas/index.js b/packages/editor/src/components/template-areas/index.js
deleted file mode 100644
index 0d3bbe42d02ee..0000000000000
--- a/packages/editor/src/components/template-areas/index.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	Button,
-	__experimentalHeading as Heading,
-} from '@wordpress/components';
-
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-import { TEMPLATE_POST_TYPE } from '../../store/constants';
-
-function TemplateAreaItem( { area, clientId } ) {
-	const { selectBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
-	const templatePartArea = useSelect(
-		( select ) => {
-			const defaultAreas =
-				select(
-					editorStore
-				).__experimentalGetDefaultTemplatePartAreas();
-
-			return defaultAreas.find(
-				( defaultArea ) => defaultArea.area === area
-			);
-		},
-		[ area ]
-	);
-
-	const highlightBlock = () => toggleBlockHighlight( clientId, true );
-	const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );
-
-	return (
-		<Button
-			className="editor-template-areas__item"
-			icon={ templatePartArea?.icon }
-			onMouseOver={ highlightBlock }
-			onMouseLeave={ cancelHighlightBlock }
-			onFocus={ highlightBlock }
-			onBlur={ cancelHighlightBlock }
-			onClick={ () => {
-				selectBlock( clientId );
-			} }
-		>
-			{ templatePartArea?.label }
-		</Button>
-	);
-}
-
-export default function TemplateAreas() {
-	const { isTemplate, templateParts } = useSelect( ( select ) => {
-		const _isTemplate =
-			select( editorStore ).getCurrentPostType() === TEMPLATE_POST_TYPE;
-
-		return {
-			isTemplate: _isTemplate,
-			templateParts:
-				_isTemplate &&
-				unlock(
-					select( editorStore )
-				).getCurrentTemplateTemplateParts(),
-		};
-	}, [] );
-
-	if ( ! isTemplate || ! templateParts.length ) {
-		return null;
-	}
-
-	return (
-		<section className="editor-template-areas">
-			<Heading level={ 3 } className="editor-template-areas__title">
-				{ __( 'Areas' ) }
-			</Heading>
-
-			<ul className="editor-template-areas__list">
-				{ templateParts.map( ( { templatePart, block } ) => (
-					<li key={ block.clientId }>
-						<TemplateAreaItem
-							area={ templatePart.area }
-							clientId={ block.clientId }
-						/>
-					</li>
-				) ) }
-			</ul>
-		</section>
-	);
-}
diff --git a/packages/editor/src/components/template-areas/style.scss b/packages/editor/src/components/template-areas/style.scss
deleted file mode 100644
index 4a0dcd748c2ed..0000000000000
--- a/packages/editor/src/components/template-areas/style.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.editor-template-areas {
-	&__list {
-		margin: 0;
-		> li {
-			margin: 0;
-		}
-	}
-
-	&__item {
-		width: 100%;
-
-		// Override the default padding.
-		&.components-button.has-icon {
-			padding: 0;
-		}
-	}
-}
-
-h3.components-heading.editor-template-areas__title {
-	font-weight: 500;
-	margin: 0 0 $grid-unit-10;
-}
diff --git a/packages/editor/src/components/template-content-panel/index.js b/packages/editor/src/components/template-content-panel/index.js
index e0f131f27feb5..14532387ecd05 100644
--- a/packages/editor/src/components/template-content-panel/index.js
+++ b/packages/editor/src/components/template-content-panel/index.js
@@ -1,18 +1,21 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import { store as editorStore } from '../../store';
 
 const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
 
@@ -22,15 +25,36 @@ const PAGE_CONTENT_BLOCKS = [
 	'core/post-title',
 ];
 
-export default function TemplateContentPanel() {
-	const clientIds = useSelect( ( select ) => {
+const TEMPLATE_PART_BLOCK = 'core/template-part';
+
+export default function TemplateContentPanel( { renderingMode } ) {
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const { clientIds, postType } = useSelect( ( select ) => {
 		const { getBlocksByName } = select( blockEditorStore );
-		return getBlocksByName( PAGE_CONTENT_BLOCKS );
+		const { getCurrentPostType } = select( editorStore );
+		const _postType = getCurrentPostType();
+		return {
+			postType: _postType,
+			clientIds: getBlocksByName(
+				TEMPLATE_POST_TYPE === _postType
+					? TEMPLATE_PART_BLOCK
+					: PAGE_CONTENT_BLOCKS
+			),
+		};
 	}, [] );
 
+	if ( renderingMode === 'post-only' && postType !== TEMPLATE_POST_TYPE ) {
+		return null;
+	}
+
 	return (
 		<PanelBody title={ __( 'Content' ) }>
-			<BlockQuickNavigation clientIds={ clientIds } />
+			<BlockQuickNavigation
+				clientIds={ clientIds }
+				onSelect={ () => {
+					enableComplementaryArea( 'core', 'edit-post/document' );
+				} }
+			/>
 		</PanelBody>
 	);
 }
diff --git a/packages/editor/src/store/private-selectors.js b/packages/editor/src/store/private-selectors.js
index f56e1e8c9e81f..c635cbc816f92 100644
--- a/packages/editor/src/store/private-selectors.js
+++ b/packages/editor/src/store/private-selectors.js
@@ -25,8 +25,6 @@ import {
 	getCurrentPost,
 	__experimentalGetDefaultTemplatePartAreas,
 } from './selectors';
-import { TEMPLATE_PART_POST_TYPE } from './constants';
-import { getFilteredTemplatePartBlocks } from './utils/get-filtered-template-parts';
 import { getEntityActions as _getEntityActions } from '../dataviews/store/private-selectors';
 
 const EMPTY_INSERTION_POINT = {
@@ -120,29 +118,6 @@ export const getPostIcon = createRegistrySelector(
 	}
 );
 
-/**
- * Returns the template parts and their blocks for the current edited template.
- *
- * @param {Object} state Global application state.
- * @return {Array} Template parts and their blocks in an array.
- */
-export const getCurrentTemplateTemplateParts = createRegistrySelector(
-	( select ) => () => {
-		const templateParts = select( coreStore ).getEntityRecords(
-			'postType',
-			TEMPLATE_PART_POST_TYPE,
-			{ per_page: -1 }
-		);
-
-		const clientIds =
-			select( blockEditorStore ).getBlocksByName( 'core/template-part' );
-		const blocks =
-			select( blockEditorStore ).getBlocksByClientId( clientIds );
-
-		return getFilteredTemplatePartBlocks( blocks, templateParts );
-	}
-);
-
 /**
  * Returns true if there are unsaved changes to the
  * post's meta fields, and false otherwise.
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index a4034a8a51c73..d1af3095230f3 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -54,6 +54,5 @@
 @import "./components/sidebar/style.scss";
 @import "./components/site-discussion/style.scss";
 @import "./components/table-of-contents/style.scss";
-@import "./components/template-areas/style.scss";
 @import "./components/text-editor/style.scss";
 @import "./components/visual-editor/style.scss";