Layout tweaks

WordPress · Oct 11, 2023 · 3488f2f · 3488f2f
1 parent f450cd5
commit 3488f2f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js
@@ -96,15 +96,20 @@ export default function TemplatePanel() {
 			>
 				<TemplateAreas />
 			</SidebarCard>
-			<p>
-				{ __(
-					'Choose a predefined pattern to switch up the look of your template.' // TODO - make this dynamic?
-				) }
-			</p>
-			<TemplatesList
-				availableTemplates={ availablePatterns }
-				onSelect={ onTemplateSelect }
-			/>
+			<SidebarCard
+				className="edit-site-template-card__templates-list"
+				title={ __( 'Transform into:' ) }
+			>
+				<p>
+					{ __(
+						'Choose a predefined pattern to switch up the look of your template.' // TODO - make this dynamic?
+					) }
+				</p>
+				<TemplatesList
+					availableTemplates={ availablePatterns }
+					onSelect={ onTemplateSelect }
+				/>
+			</SidebarCard>
 			<LastRevision />
 			{ postType === PATTERN_TYPES.user && (
 				<PatternCategories post={ record } />

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss
@@ -37,3 +37,12 @@ h3.edit-site-template-card__template-areas-title {
 	font-weight: 500;
 	margin: 0 0 $grid-unit-10;
 }
+
+.edit-site-template-card__templates-list {
+	margin-top: $grid-unit-20;
+}
+
+.edit-site-template-panel .block-editor-block-preview__container {
+	border-radius: 2px;
+	box-shadow: none;
+}