From 649b641bb72f8102c7ca100631aadc9b8c6c41f4 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 16 Dec 2021 12:04:50 +0400
Subject: [PATCH 1/6] Template Editing Mode: Fix options dropdown

---
 .../components/header/template-title/index.js | 69 +++++++++++--------
 1 file changed, 41 insertions(+), 28 deletions(-)

diff --git a/packages/edit-post/src/components/header/template-title/index.js b/packages/edit-post/src/components/header/template-title/index.js
index 4e1c4b7fb86355..499881b97528e1 100644
--- a/packages/edit-post/src/components/header/template-title/index.js
+++ b/packages/edit-post/src/components/header/template-title/index.js
@@ -3,7 +3,11 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Dropdown, Button } from '@wordpress/components';
+import {
+	Dropdown,
+	Button,
+	__experimentalText as Text,
+} from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 
 /**
@@ -14,7 +18,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
 import DeleteTemplate from './delete-template';
 import EditTemplateTitle from './edit-template-title';
-import TemplateDescription from './template-description';
 
 function TemplateTitle() {
 	const { template, isEditing, title } = useSelect( ( select ) => {
@@ -48,6 +51,8 @@ function TemplateTitle() {
 		templateTitle = template.slug;
 	}
 
+	const hasOptions = !! ( template.custom || template.wp_id );
+
 	return (
 		<div className="edit-post-template-top-area">
 			<Button
@@ -66,32 +71,40 @@ function TemplateTitle() {
 			>
 				{ title }
 			</Button>
-			<Dropdown
-				position="bottom center"
-				contentClassName="edit-post-template-top-area__popover"
-				renderToggle={ ( { onToggle } ) => (
-					<Button
-						className="edit-post-template-title"
-						isLink
-						icon={ chevronDown }
-						showTooltip
-						onClick={ onToggle }
-						label={ __( 'Template Options' ) }
-					>
-						{ templateTitle }
-					</Button>
-				) }
-				renderContent={ () => (
-					<>
-						{ template.has_theme_file ? (
-							<TemplateDescription />
-						) : (
-							<EditTemplateTitle />
-						) }
-						<DeleteTemplate />
-					</>
-				) }
-			/>
+			{ hasOptions ? (
+				<Dropdown
+					position="bottom center"
+					contentClassName="edit-post-template-top-area__popover"
+					renderToggle={ ( { onToggle } ) => (
+						<Button
+							className="edit-post-template-title"
+							isLink
+							icon={ chevronDown }
+							showTooltip
+							onClick={ onToggle }
+							label={ __( 'Template Options' ) }
+						>
+							{ templateTitle }
+						</Button>
+					) }
+					renderContent={ () => (
+						<>
+							{ ! template.has_theme_file && (
+								<EditTemplateTitle />
+							) }
+							<DeleteTemplate />
+						</>
+					) }
+				/>
+			) : (
+				<Text
+					className="edit-post-template-title"
+					size="body"
+					style={ { lineHeight: '24px' } }
+				>
+					{ templateTitle }
+				</Text>
+			) }
 		</div>
 	);
 }

From e56caeee6f121c0f06e2d1710e82dd886ee2ad15 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 16 Dec 2021 12:05:43 +0400
Subject: [PATCH 2/6] Remove unused TemplateDescription component

---
 .../template-title/template-description.js    | 23 -------------------
 1 file changed, 23 deletions(-)
 delete mode 100644 packages/edit-post/src/components/header/template-title/template-description.js

diff --git a/packages/edit-post/src/components/header/template-title/template-description.js b/packages/edit-post/src/components/header/template-title/template-description.js
deleted file mode 100644
index 8bf26fb765859a..00000000000000
--- a/packages/edit-post/src/components/header/template-title/template-description.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { __experimentalText as Text } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-export default function TemplateDescription() {
-	const { description } = useSelect( ( select ) => {
-		const { getEditedPostTemplate } = select( editPostStore );
-		return {
-			description: getEditedPostTemplate().description,
-		};
-	}, [] );
-	if ( ! description ) {
-		return null;
-	}
-	return <Text size="body">{ description }</Text>;
-}

From 5f8b26985f2c7ddc8648b2891c187845fe7215eb Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 16 Dec 2021 15:55:47 +0400
Subject: [PATCH 3/6] Revert "Remove unused TemplateDescription component"

This reverts commit e56caeee6f121c0f06e2d1710e82dd886ee2ad15.
---
 .../template-title/template-description.js    | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 packages/edit-post/src/components/header/template-title/template-description.js

diff --git a/packages/edit-post/src/components/header/template-title/template-description.js b/packages/edit-post/src/components/header/template-title/template-description.js
new file mode 100644
index 00000000000000..8bf26fb765859a
--- /dev/null
+++ b/packages/edit-post/src/components/header/template-title/template-description.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { __experimentalText as Text } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../../store';
+
+export default function TemplateDescription() {
+	const { description } = useSelect( ( select ) => {
+		const { getEditedPostTemplate } = select( editPostStore );
+		return {
+			description: getEditedPostTemplate().description,
+		};
+	}, [] );
+	if ( ! description ) {
+		return null;
+	}
+	return <Text size="body">{ description }</Text>;
+}

From ca15e148bd8a90ed576c061b8dce0ac1053783cb Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 16 Dec 2021 16:02:48 +0400
Subject: [PATCH 4/6] Display description for default core templates

---
 .../header/template-title/edit-template-title.js     |  4 ++++
 .../src/components/header/template-title/index.js    | 12 ++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/edit-post/src/components/header/template-title/edit-template-title.js b/packages/edit-post/src/components/header/template-title/edit-template-title.js
index 301574541f6f53..2865e674b341fd 100644
--- a/packages/edit-post/src/components/header/template-title/edit-template-title.js
+++ b/packages/edit-post/src/components/header/template-title/edit-template-title.js
@@ -29,6 +29,10 @@ export default function EditTemplateTitle() {
 	const { getEditorSettings } = useSelect( editorStore );
 	const { updateEditorSettings } = useDispatch( editorStore );
 
+	if ( template.has_theme_file ) {
+		return null;
+	}
+
 	let templateTitle = __( 'Default' );
 	if ( template?.title ) {
 		templateTitle = template.title;
diff --git a/packages/edit-post/src/components/header/template-title/index.js b/packages/edit-post/src/components/header/template-title/index.js
index 499881b97528e1..c2158ab689f901 100644
--- a/packages/edit-post/src/components/header/template-title/index.js
+++ b/packages/edit-post/src/components/header/template-title/index.js
@@ -18,6 +18,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
 import DeleteTemplate from './delete-template';
 import EditTemplateTitle from './edit-template-title';
+import TemplateDescription from './template-description';
 
 function TemplateTitle() {
 	const { template, isEditing, title } = useSelect( ( select ) => {
@@ -51,7 +52,11 @@ function TemplateTitle() {
 		templateTitle = template.slug;
 	}
 
-	const hasOptions = !! ( template.custom || template.wp_id );
+	const hasOptions = !! (
+		template.custom ||
+		template.wp_id ||
+		template.description
+	);
 
 	return (
 		<div className="edit-post-template-top-area">
@@ -89,9 +94,8 @@ function TemplateTitle() {
 					) }
 					renderContent={ () => (
 						<>
-							{ ! template.has_theme_file && (
-								<EditTemplateTitle />
-							) }
+							<EditTemplateTitle />
+							<TemplateDescription />
 							<DeleteTemplate />
 						</>
 					) }

From 1a986d7ac56c1ba5dd99b153f36982dc18141e20 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Sat, 18 Dec 2021 17:21:57 +0400
Subject: [PATCH 5/6] Match Site Editor design

---
 .../template-title/template-description.js    | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/edit-post/src/components/header/template-title/template-description.js b/packages/edit-post/src/components/header/template-title/template-description.js
index 8bf26fb765859a..a84ef79b899ddc 100644
--- a/packages/edit-post/src/components/header/template-title/template-description.js
+++ b/packages/edit-post/src/components/header/template-title/template-description.js
@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { __experimentalText as Text } from '@wordpress/components';
+import {
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -10,14 +13,24 @@ import { __experimentalText as Text } from '@wordpress/components';
 import { store as editPostStore } from '../../../store';
 
 export default function TemplateDescription() {
-	const { description } = useSelect( ( select ) => {
+	const { description, title } = useSelect( ( select ) => {
 		const { getEditedPostTemplate } = select( editPostStore );
 		return {
+			title: getEditedPostTemplate().title,
 			description: getEditedPostTemplate().description,
 		};
 	}, [] );
 	if ( ! description ) {
 		return null;
 	}
-	return <Text size="body">{ description }</Text>;
+	return (
+		<>
+			<Heading level={ 4 } weight={ 600 }>
+				{ title }
+			</Heading>
+			<Text size="body" as="p" style={ { marginTop: '12px' } }>
+				{ description }
+			</Text>
+		</>
+	);
 }

From c80cbea993e2d76c84ec266b35756a42200bc0e1 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 20 Dec 2021 11:14:32 +0000
Subject: [PATCH 6/6] Update styling to match site editor

---
 .../header/template-title/style.scss           | 18 +++++++++++++-----
 .../template-title/template-description.js     |  7 ++++++-
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/edit-post/src/components/header/template-title/style.scss b/packages/edit-post/src/components/header/template-title/style.scss
index 42872ac3d8c170..95a0d626c3b9f0 100644
--- a/packages/edit-post/src/components/header/template-title/style.scss
+++ b/packages/edit-post/src/components/header/template-title/style.scss
@@ -46,14 +46,21 @@
 	}
 }
 
-.edit-post-template-top-area__popover .components-popover__content {
-	min-width: 280px;
+.edit-post-template-top-area__popover {
+	.components-popover__content {
+		min-width: 280px;
+		padding: $grid-unit-10;
+	}
+
+	.edit-post-template-details__description {
+		color: $gray-700;
+	}
 }
 
 .edit-post-template-top-area__second-menu-group {
-	margin-left: -$grid-unit-15;
-	margin-right: -$grid-unit-15;
-	padding: $grid-unit-15;
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+	padding: $grid-unit-20;
 	padding-bottom: 0;
 	border-top: $border-width solid $gray-300;
 
@@ -63,6 +70,7 @@
 
 		.components-menu-item__item {
 			margin-right: 0;
+			min-width: 0;
 		}
 	}
 }
diff --git a/packages/edit-post/src/components/header/template-title/template-description.js b/packages/edit-post/src/components/header/template-title/template-description.js
index a84ef79b899ddc..c30fcce6b85c5d 100644
--- a/packages/edit-post/src/components/header/template-title/template-description.js
+++ b/packages/edit-post/src/components/header/template-title/template-description.js
@@ -28,7 +28,12 @@ export default function TemplateDescription() {
 			<Heading level={ 4 } weight={ 600 }>
 				{ title }
 			</Heading>
-			<Text size="body" as="p" style={ { marginTop: '12px' } }>
+			<Text
+				className="edit-post-template-details__description"
+				size="body"
+				as="p"
+				style={ { marginTop: '12px' } }
+			>
 				{ description }
 			</Text>
 		</>