Add template areas to template details (#35202)

packages/edit-site/src/components/navigation-sidebar/navigation-panel/constants.js

@@ -3,6 +3,15 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import {
+	TEMPLATE_PART_AREA_HEADER,
+	TEMPLATE_PART_AREA_FOOTER,
+	TEMPLATE_PART_AREA_SIDEBAR,
+} from '../../../store/constants';
+
 export const TEMPLATES_PRIMARY = [
 	'index',
 	'singular',
@@ -75,10 +84,6 @@ export const MENU_TEMPLATE_PARTS_FOOTERS = 'template-parts-footers';
 export const MENU_TEMPLATE_PARTS_SIDEBARS = 'template-parts-sidebars';
 export const MENU_TEMPLATE_PARTS_GENERAL = 'template-parts-general';
 
-export const TEMPLATE_PART_AREA_HEADER = 'header';
-export const TEMPLATE_PART_AREA_FOOTER = 'footer';
-export const TEMPLATE_PART_AREA_SIDEBAR = 'sidebar';
-
 export const TEMPLATE_PARTS_SUB_MENUS = [
 	{
 		area: TEMPLATE_PART_AREA_HEADER,

packages/edit-site/src/components/template-details/index.js

@@ -16,6 +16,7 @@ import { store as editorStore } from '@wordpress/editor';
 import isTemplateRevertable from '../../utils/is-template-revertable';
 import { MENU_TEMPLATES } from '../navigation-sidebar/navigation-panel/constants';
 import { store as editSiteStore } from '../../store';
+import TemplateAreas from './template-areas';
 
 export default function TemplateDetails( { template, onClose } ) {
 	const { title, description } = useSelect(
@@ -58,6 +59,8 @@ export default function TemplateDetails( { template, onClose } ) {
 				) }
 			</div>
 
+			<TemplateAreas />
+
 			{ isTemplateRevertable( template ) && (
 				<div className="edit-site-template-details__revert">
 					<MenuItem

packages/edit-site/src/components/template-details/style.scss

@@ -10,6 +10,10 @@
 	color: $gray-700;
 }
 
+.edit-site-template-details__template-areas {
+	padding: $grid-unit-15;
+}
+
 .edit-site-template-details__revert {
 	border-top: $border-width solid $gray-400;
 

packages/edit-site/src/components/template-details/template-areas.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuGroup, MenuItem } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { getTemplatePartIcon } from '@wordpress/editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { TEMPLATE_PART_AREA_TO_NAME } from '../../store/constants';
+
+function TemplatePartItem( { area, clientId } ) {
+	const { selectBlock, toggleBlockHighlight } = useDispatch(
+		blockEditorStore
+	);
+	const highlightBlock = () => toggleBlockHighlight( clientId, true );
+	const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );
+
+	return (
+		<MenuItem
+			icon={ getTemplatePartIcon( area ) }
+			iconPosition="left"
+			onClick={ () => {
+				selectBlock( clientId );
+			} }
+			onMouseOver={ highlightBlock }
+			onMouseLeave={ cancelHighlightBlock }
+			onFocus={ highlightBlock }
+			onBlur={ cancelHighlightBlock }
+		>
+			{ TEMPLATE_PART_AREA_TO_NAME[ area ] }
+		</MenuItem>
+	);
+}
+
+export default function TemplateAreas() {
+	const templateAreaBlocks = useSelect(
+		( select ) => select( editSiteStore ).getTemplateAreaBlocks(),
+		[]
+	);
+
+	return (
+		<MenuGroup
+			label={ __( 'Template areas' ) }
+			className="edit-site-template-details__template-areas"
+		>
+			{ Object.entries( templateAreaBlocks ).map(
+				( [ area, templateAreaBlock ] ) => (
+					<TemplatePartItem
+						key={ area }
+						area={ area }
+						clientId={ templateAreaBlock.clientId }
+					/>
+				)
+			) }
+		</MenuGroup>
+	);
+}

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

@@ -1,6 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * The identifier for the data store.
  *
  * @type {string}
  */
 export const STORE_NAME = 'core/edit-site';
+
+export const TEMPLATE_PART_AREA_HEADER = 'header';
+export const TEMPLATE_PART_AREA_FOOTER = 'footer';
+export const TEMPLATE_PART_AREA_SIDEBAR = 'sidebar';
+
+export const TEMPLATE_PART_AREA_TO_NAME = {
+	[ TEMPLATE_PART_AREA_HEADER ]: __( 'Header' ),
+	[ TEMPLATE_PART_AREA_FOOTER ]: __( 'Footer' ),
+	[ TEMPLATE_PART_AREA_SIDEBAR ]: __( 'Sidebar' ),
+};

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, map } from 'lodash';
+import { get, map, keyBy } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -10,6 +10,7 @@ import createSelector from 'rememo';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { createRegistrySelector } from '@wordpress/data';
 import { uploadMedia } from '@wordpress/media-utils';
+import { isTemplatePart } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -294,3 +295,51 @@ export function __experimentalGetInsertionPoint( state ) {
 export function isListViewOpened( state ) {
 	return state.listViewPanel;
 }
+
+/**
+ * Returns the template part blocks grouped by areas for the current edited template.
+ *
+ * @param {Object} state Global application state.
+ * @return {Object} Template part blocks by areas.
+ */
+export const getTemplateAreaBlocks = createRegistrySelector(
+	( select ) => ( state ) => {
+		const templateType = getEditedPostType( state );
+		const templateId = getEditedPostId( state );
+		const template = select( coreDataStore ).getEditedEntityRecord(
+			'postType',
+			templateType,
+			templateId
+		);
+
+		const templateParts = select( coreDataStore ).getEntityRecords(
+			'postType',
+			'wp_template_part',
+			{
+				per_page: -1,
+			}
+		);
+		const templatePartsById = keyBy(
+			templateParts,
+			( templatePart ) => templatePart.id
+		);
+
+		const templatePartBlocksByAreas = {};
+
+		for ( const block of template.blocks ?? [] ) {
+			if ( isTemplatePart( block ) ) {
+				const {
+					attributes: { theme, slug },
+				} = block;
+				const templatePartId = `${ theme }//${ slug }`;
+				const templatePart = templatePartsById[ templatePartId ];
+
+				if ( templatePart ) {
+					templatePartBlocksByAreas[ templatePart.area ] = block;
+				}
+			}
+		}
+
+		return templatePartBlocksByAreas;
+	}
+);

packages/editor/src/store/selectors.js

@@ -33,7 +33,7 @@ import {
 } from './constants';
 import { getPostRawValue } from './reducer';
 import { cleanForSlug } from '../utils/url';
-import { getTemplatePartIcon } from './utils/get-template-part-icon';
+import { getTemplatePartIcon } from '../utils/get-template-part-icon';
 
 /**
  * Shared reference to an empty object for cases where it is important to avoid

packages/editor/src/utils/index.js

@@ -5,3 +5,4 @@ import mediaUpload from './media-upload';
 
 export { mediaUpload };
 export { cleanForSlug } from './url.js';
+export { getTemplatePartIcon } from './get-template-part-icon';