Update the appearance of the template details popover (#32042)

* Update the appearance of the template details popover * Tweaks * use secondary variant for delete button
WordPress · Jun 7, 2021 · bdf4cf5 · bdf4cf5
1 parent 029b797
commit bdf4cf5
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 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
@@ -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
@@ -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
@@ -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;
+		}
+	}
 }