Move template areas to editor package

packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js

@@ -24,7 +24,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import { store as editSiteStore } from '../../../store';
 import TemplateActions from '../../template-actions';
-import TemplateAreas from './template-areas';
 import PluginTemplateSettingPanel from '../../plugin-template-setting-panel';
 import { useAvailablePatterns } from './hooks';
 import { TEMPLATE_PART_POST_TYPE } from '../../../utils/constants';
@@ -113,9 +112,7 @@ export default function TemplatePanel() {
 						} }
 					/>
 				}
-			>
-				<TemplateAreas />
-			</PostCardPanel>
+			/>
 			<PluginTemplateSettingPanel.Slot />
 			{ availablePatterns?.length > 0 && (
 				<PanelBody

packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss

@@ -1,25 +1,4 @@
 .edit-site-template-card {
-	&__template-areas {
-		margin-top: $grid-unit-20;
-	}
-
-	&__template-areas-list {
-		margin: 0;
-
-		> li {
-			margin: 0;
-		}
-	}
-
-	&__template-areas-item {
-		width: 100%;
-
-		// Override the default padding.
-		&.components-button.has-icon {
-			padding: 0;
-		}
-	}
-
 	&__actions {
 		line-height: 0;
 		> .components-button.is-small.has-icon {
@@ -30,14 +9,6 @@
 	}
 }
 
-h3.edit-site-template-card__template-areas-title {
-	font-weight: 500;
-	margin: 0 0 $grid-unit-10;
-}
-
-.edit-site-template-card__templates-list {
-	margin-top: $grid-unit-20;
-}
 
 .edit-site-template-panel .block-editor-block-preview__container {
 	border-radius: 2px;

packages/edit-site/src/store/selectors.js

@@ -6,14 +6,11 @@ import { createRegistrySelector } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { Platform } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { getFilteredTemplatePartBlocks } from './utils';
-import { TEMPLATE_PART_POST_TYPE } from '../utils/constants';
 import { unlock } from '../lock-unlock';
 
 /**
@@ -243,18 +240,9 @@ export function isSaveViewOpened( state ) {
  */
 export const getCurrentTemplateTemplateParts = createRegistrySelector(
 	( select ) => () => {
-		const templateParts = select( coreDataStore ).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 );
+		return unlock(
+			select( editorStore )
+		).getCurrentTemplateTemplateParts();
 	}
 );
 

packages/editor/src/components/post-card-panel/index.js

@@ -23,31 +23,37 @@ import { decodeEntities } from '@wordpress/html-entities';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
+import TemplateAreas from '../template-areas';
 
-export default function PostCardPanel( { className, actions, children } ) {
-	const { modified, title, templateInfo, icon } = useSelect( ( select ) => {
-		const {
-			getEditedPostAttribute,
-			getCurrentPostType,
-			getCurrentPostId,
-			__experimentalGetTemplateInfo,
-		} = select( editorStore );
-		const { getEditedEntityRecord } = select( coreStore );
-		const _type = getCurrentPostType();
-		const _id = getCurrentPostId();
-		const _record = getEditedEntityRecord( 'postType', _type, _id );
-		const _templateInfo = __experimentalGetTemplateInfo( _record );
-		return {
-			title: _templateInfo?.title || getEditedPostAttribute( 'title' ),
-			modified: getEditedPostAttribute( 'modified' ),
-			id: _id,
-			templateInfo: _templateInfo,
-			icon: unlock( select( editorStore ) ).getPostIcon( _type, {
-				area: _record?.area,
-			} ),
-		};
-	} );
+export default function PostCardPanel( { className, actions } ) {
+	const { modified, title, templateInfo, icon, postType } = useSelect(
+		( select ) => {
+			const {
+				getEditedPostAttribute,
+				getCurrentPostType,
+				getCurrentPostId,
+				__experimentalGetTemplateInfo,
+			} = select( editorStore );
+			const { getEditedEntityRecord } = select( coreStore );
+			const _type = getCurrentPostType();
+			const _id = getCurrentPostId();
+			const _record = getEditedEntityRecord( 'postType', _type, _id );
+			const _templateInfo = __experimentalGetTemplateInfo( _record );
+			return {
+				title:
+					_templateInfo?.title || getEditedPostAttribute( 'title' ),
+				modified: getEditedPostAttribute( 'modified' ),
+				id: _id,
+				postType: _type,
+				templateInfo: _templateInfo,
+				icon: unlock( select( editorStore ) ).getPostIcon( _type, {
+					area: _record?.area,
+				} ),
+			};
+		}
+	);
 	const description = templateInfo?.description;
 	const lastEditedText =
 		modified &&
@@ -94,10 +100,7 @@ export default function PostCardPanel( { className, actions, children } ) {
 							) }
 						</VStack>
 					) }
-					{
-						// Todo: move TemplateAreas (and the selectors it depends) to the editor package, and use it here removing the children prop.
-						children
-					}
+					{ postType === TEMPLATE_POST_TYPE && <TemplateAreas /> }
 				</VStack>
 			</div>
 		</PanelBody>

packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-areas.js → packages/editor/src/components/template-areas/index.js

@@ -6,14 +6,15 @@ import {
 	Button,
 	__experimentalHeading as Heading,
 } from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
+
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../../store';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function TemplateAreaItem( { area, clientId } ) {
 	const { selectBlock, toggleBlockHighlight } =
@@ -37,7 +38,7 @@ function TemplateAreaItem( { area, clientId } ) {
 
 	return (
 		<Button
-			className="edit-site-template-card__template-areas-item"
+			className="editor-template-areas__item"
 			icon={ templatePartArea?.icon }
 			onMouseOver={ highlightBlock }
 			onMouseLeave={ cancelHighlightBlock }
@@ -54,7 +55,8 @@ function TemplateAreaItem( { area, clientId } ) {
 
 export default function TemplateAreas() {
 	const templateParts = useSelect(
-		( select ) => select( editSiteStore ).getCurrentTemplateTemplateParts(),
+		( select ) =>
+			unlock( select( editorStore ) ).getCurrentTemplateTemplateParts(),
 		[]
 	);
 
@@ -63,15 +65,12 @@ export default function TemplateAreas() {
 	}
 
 	return (
-		<section className="edit-site-template-card__template-areas">
-			<Heading
-				level={ 3 }
-				className="edit-site-template-card__template-areas-title"
-			>
+		<section className="editor-template-areas">
+			<Heading level={ 3 } className="editor-template-areas__title">
 				{ __( 'Areas' ) }
 			</Heading>
 
-			<ul className="edit-site-template-card__template-areas-list">
+			<ul className="editor-template-areas__list">
 				{ templateParts.map( ( { templatePart, block } ) => (
 					<li key={ block.clientId }>
 						<TemplateAreaItem

packages/editor/src/components/template-areas/style.scss

@@ -0,0 +1,23 @@
+.editor-template-areas {
+	margin-top: $grid-unit-20;
+	&__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;
+}

packages/editor/src/store/constants.js

@@ -18,3 +18,5 @@ export const TRASH_POST_NOTICE_ID = 'TRASH_POST_NOTICE_ID';
 export const PERMALINK_POSTNAME_REGEX = /%(?:postname|pagename)%/;
 export const ONE_MINUTE_IN_MS = 60 * 1000;
 export const AUTOSAVE_PROPERTIES = [ 'title', 'excerpt', 'content' ];
+export const TEMPLATE_POST_TYPE = 'wp_template';
+export const TEMPLATE_PART_POST_TYPE = 'wp_template_part';

packages/editor/src/store/private-selectors.js

@@ -24,6 +24,8 @@ import {
 	getRenderingMode,
 	__experimentalGetDefaultTemplatePartAreas,
 } from './selectors';
+import { TEMPLATE_PART_POST_TYPE } from './constants';
+import { getFilteredTemplatePartBlocks } from './utils/get-filtered-template-parts';
 
 const EMPTY_INSERTION_POINT = {
 	rootClientId: undefined,
@@ -112,3 +114,26 @@ 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 );
+	}
+);