From 863a69bedc22c69cf44326e2504756236faa49f3 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 14 Jun 2021 07:25:36 +0100
Subject: [PATCH] Update the template creation modal (#32427)

* Update copy and styling

* Formatting

* Two column layout

* formatting

* Polish.

Co-authored-by: jasmussen <joen@automattic.com>
---
 .../components/sidebar/template/actions.js    | 25 +++++++++++------
 .../components/sidebar/template/style.scss    | 28 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/packages/edit-post/src/components/sidebar/template/actions.js b/packages/edit-post/src/components/sidebar/template/actions.js
index 49b1b8c15ce40e..4865dfddc4c46a 100644
--- a/packages/edit-post/src/components/sidebar/template/actions.js
+++ b/packages/edit-post/src/components/sidebar/template/actions.js
@@ -67,7 +67,7 @@ function PostTemplateActions() {
 			</div>
 			{ isModalOpen && (
 				<Modal
-					title={ __( 'Create a custom template' ) }
+					title={ __( 'Create custom template' ) }
 					closeLabel={ __( 'Close' ) }
 					onRequestClose={ () => {
 						setIsModalOpen( false );
@@ -98,18 +98,27 @@ function PostTemplateActions() {
 							setIsModalOpen( false );
 						} }
 					>
-						<TextControl
-							label={ __( 'Name' ) }
-							value={ title }
-							onChange={ setTitle }
-						/>
+						<Flex align="flex-start" gap={ 8 }>
+							<FlexItem>
+								<TextControl
+									label={ __( 'Name' ) }
+									value={ title }
+									onChange={ setTitle }
+									help={ __(
+										'Describe the purpose of the template, e.g. "Full Width". Custom templates can be applied to any post or page.'
+									) }
+								/>
+							</FlexItem>
+						</Flex>
+
 						<Flex
-							className="edit-post-post-template__modal-actions"
+							className="edit-post-template__modal-actions"
 							justify="flex-end"
+							expanded={ false }
 						>
 							<FlexItem>
 								<Button
-									variant="secondary"
+									variant="tertiary"
 									onClick={ () => {
 										setIsModalOpen( false );
 										setTitle( '' );
diff --git a/packages/edit-post/src/components/sidebar/template/style.scss b/packages/edit-post/src/components/sidebar/template/style.scss
index 0d881ec964a867..0a10546b96f46b 100644
--- a/packages/edit-post/src/components/sidebar/template/style.scss
+++ b/packages/edit-post/src/components/sidebar/template/style.scss
@@ -1,5 +1,31 @@
+.edit-post-template__modal {
+	.components-base-control {
+		@include break-medium() {
+			width: $grid-unit * 40;
+		}
+	}
+
+	.components-modal__header {
+		border-bottom: none;
+	}
+
+	.components-modal__content::before {
+		margin-bottom: $grid-unit-05;
+	}
+}
+
 .edit-post-template__modal-actions {
-	padding-top: $grid-unit-15;
+	margin-top: $grid-unit-15;
+}
+
+.edit-post-template-modal__tip {
+	padding: $grid-unit-20 $grid-unit-30;
+	background: $gray-100;
+	border-radius: $radius-block-ui;
+
+	@include break-medium() {
+		width: $grid-unit * 30;
+	}
 }
 
 .edit-post-template__actions {