From bdf4cf52035f49e95a3ee1fbcbd34ede29a90896 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 1 Jun 2021 09:58:22 +0100
Subject: [PATCH] Update the appearance of the template details popover
 (#32042)

* Update the appearance of the template details popover

* Tweaks

* use secondary variant for delete button
---
 .../header/template-title/delete-template.js  |  4 ++--
 .../template-title/edit-template-title.js     |  3 +++
 .../header/template-title/style.scss          | 19 ++++++++++++++++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js
index 7a3f5d5c38207..d87246d758c41 100644
--- a/packages/edit-post/src/components/header/template-title/delete-template.js
+++ b/packages/edit-post/src/components/header/template-title/delete-template.js
@@ -45,9 +45,9 @@ export default function DeleteTemplate() {
 	return (
 		<MenuGroup className="edit-post-template-top-area__second-menu-group">
 			<MenuItem
+				className="edit-post-template-top-area__delete-template-button"
 				isDestructive
-				isTertiary
-				isLink
+				isSecondary
 				aria-label={ __( 'Delete template' ) }
 				onClick={ () => {
 					if (
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 feabafcb9fdd0..301574541f6f5 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
@@ -40,6 +40,9 @@ export default function EditTemplateTitle() {
 		<TextControl
 			label={ __( 'Title' ) }
 			value={ templateTitle }
+			help={ __(
+				'Give the template a title that indicates its purpose, e.g. "Full Width".'
+			) }
 			onChange={ ( newTitle ) => {
 				const settings = getEditorSettings();
 				const newAvailableTemplates = mapValues(
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 c537b7c05b539..42872ac3d8c17 100644
--- a/packages/edit-post/src/components/header/template-title/style.scss
+++ b/packages/edit-post/src/components/header/template-title/style.scss
@@ -47,5 +47,22 @@
 }
 
 .edit-post-template-top-area__popover .components-popover__content {
-	min-width: 360px;
+	min-width: 280px;
+}
+
+.edit-post-template-top-area__second-menu-group {
+	margin-left: -$grid-unit-15;
+	margin-right: -$grid-unit-15;
+	padding: $grid-unit-15;
+	padding-bottom: 0;
+	border-top: $border-width solid $gray-300;
+
+	.edit-post-template-top-area__delete-template-button {
+		display: flex;
+		justify-content: center;
+
+		.components-menu-item__item {
+			margin-right: 0;
+		}
+	}
 }