Update the template creation modal (#32427)

* Update copy and styling * Formatting * Two column layout * formatting * Polish. Co-authored-by: jasmussen <joen@automattic.com>
WordPress · Jun 14, 2021 · 863a69b · 863a69b
1 parent 81cdf87
commit 863a69b
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 9 deletions.
diff --git 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
@@ -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 {