Update: Move template areas into a panel.

packages/block-editor/src/components/block-quick-navigation/index.js

@@ -10,25 +10,24 @@ 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;
 	}
 	return (
 		<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>

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 />

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>
 							) }

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>
 	);
 }

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.

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";