From 1264b12f0c9ebf9ad48f921524c4a02b4bee3f23 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Thu, 7 Oct 2021 11:18:31 +0800
Subject: [PATCH] Add template areas to template inspector (#35239)

Co-authored-by: James Koster <james@jameskoster.co.uk>
---
 .../components/sidebar/template-card/index.js |  7 +-
 .../sidebar/template-card/style.scss          | 23 ++++++
 .../sidebar/template-card/template-areas.js   | 72 +++++++++++++++++++
 .../template-details/template-areas.js        |  2 +-
 4 files changed, 101 insertions(+), 3 deletions(-)
 create mode 100644 packages/edit-site/src/components/sidebar/template-card/template-areas.js

diff --git a/packages/edit-site/src/components/sidebar/template-card/index.js b/packages/edit-site/src/components/sidebar/template-card/index.js
index 969a21528425d7..f0cc1f8863f351 100644
--- a/packages/edit-site/src/components/sidebar/template-card/index.js
+++ b/packages/edit-site/src/components/sidebar/template-card/index.js
@@ -10,6 +10,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
+import TemplateAreas from './template-areas';
 
 export default function TemplateCard() {
 	const { title, description, icon } = useSelect( ( select ) => {
@@ -36,9 +37,11 @@ export default function TemplateCard() {
 			<Icon className="edit-site-template-card__icon" icon={ icon } />
 			<div className="edit-site-template-card__content">
 				<h2 className="edit-site-template-card__title">{ title }</h2>
-				<span className="edit-site-template-card__description">
+				<div className="edit-site-template-card__description">
 					{ description }
-				</span>
+				</div>
+
+				<TemplateAreas />
 			</div>
 		</div>
 	);
diff --git a/packages/edit-site/src/components/sidebar/template-card/style.scss b/packages/edit-site/src/components/sidebar/template-card/style.scss
index 8b119b497f15cf..1ff35e65582719 100644
--- a/packages/edit-site/src/components/sidebar/template-card/style.scss
+++ b/packages/edit-site/src/components/sidebar/template-card/style.scss
@@ -18,6 +18,7 @@
 
 .edit-site-template-card__description {
 	font-size: $default-font-size;
+	margin: 0 0 $grid-unit-20;
 }
 
 .edit-site-template-card__icon {
@@ -26,3 +27,25 @@
 	width: $icon-size;
 	height: $icon-size;
 }
+
+h3.edit-site-template-card__template-areas-title {
+	font-weight: 500;
+	margin: 0 0 $grid-unit-10;
+}
+
+.edit-site-template-card__template-areas-list {
+	margin: 0;
+
+	> li {
+		margin: 0;
+	}
+}
+
+.edit-site-template-card__template-areas-item {
+	width: 100%;
+
+	// Override the default padding.
+	&.components-button.has-icon {
+		padding: 0;
+	}
+}
diff --git a/packages/edit-site/src/components/sidebar/template-card/template-areas.js b/packages/edit-site/src/components/sidebar/template-card/template-areas.js
new file mode 100644
index 00000000000000..fab83496dd9d90
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/template-card/template-areas.js
@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Button,
+	__experimentalHeading as Heading,
+} from '@wordpress/components';
+import { getTemplatePartIcon } from '@wordpress/editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import { TEMPLATE_PART_AREA_TO_NAME } from '../../../store/constants';
+
+function TemplateAreaItem( { area, clientId } ) {
+	const { selectBlock, toggleBlockHighlight } = useDispatch(
+		blockEditorStore
+	);
+	const highlightBlock = () => toggleBlockHighlight( clientId, true );
+	const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );
+
+	return (
+		<Button
+			className="edit-site-template-card__template-areas-item"
+			icon={ getTemplatePartIcon( area ) }
+			onMouseOver={ highlightBlock }
+			onMouseLeave={ cancelHighlightBlock }
+			onFocus={ highlightBlock }
+			onBlur={ cancelHighlightBlock }
+			onClick={ () => {
+				selectBlock( clientId );
+			} }
+		>
+			{ TEMPLATE_PART_AREA_TO_NAME[ area ] }
+		</Button>
+	);
+}
+
+export default function TemplateAreas() {
+	const templateAreaBlocks = useSelect(
+		( select ) => select( editSiteStore ).getTemplateAreaBlocks(),
+		[]
+	);
+
+	return (
+		<section className="edit-site-template-card__template-areas">
+			<Heading
+				level={ 3 }
+				className="edit-site-template-card__template-areas-title"
+			>
+				{ __( 'Areas' ) }
+			</Heading>
+
+			<ul className="edit-site-template-card__template-areas-list">
+				{ Object.entries( templateAreaBlocks ).map(
+					( [ area, templateAreaBlock ] ) => (
+						<li key={ area }>
+							<TemplateAreaItem
+								area={ area }
+								clientId={ templateAreaBlock.clientId }
+							/>
+						</li>
+					)
+				) }
+			</ul>
+		</section>
+	);
+}
diff --git a/packages/edit-site/src/components/template-details/template-areas.js b/packages/edit-site/src/components/template-details/template-areas.js
index 0248ccdb831594..13f543c7b8962d 100644
--- a/packages/edit-site/src/components/template-details/template-areas.js
+++ b/packages/edit-site/src/components/template-details/template-areas.js
@@ -49,7 +49,7 @@ export default function TemplateAreas() {
 
 	return (
 		<MenuGroup
-			label={ __( 'Template areas' ) }
+			label={ __( 'Areas' ) }
 			className="edit-site-template-details__group edit-site-template-details__template-areas"
 		>
 			{ Object.entries( templateAreaBlocks ).map(