From 5b0011fa2a557135a7776544f859ceced7bdd794 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 7 Jul 2023 00:50:02 +0100
Subject: [PATCH] Patterns: Distinguish between theme patterns and template
 parts in category list (#52382)

---
 .../index.js                                  | 128 +++++++++++-------
 .../style.scss                                |  27 +++-
 2 files changed, 105 insertions(+), 50 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
index b28aa6687723b..97789e6ec45fe 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
@@ -7,6 +7,7 @@ import {
 	Flex,
 	Icon,
 	Tooltip,
+	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
@@ -109,9 +110,21 @@ export default function SidebarNavigationScreenPatterns() {
 								</ItemGroup>
 							) }
 							{ hasTemplateParts && (
-								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
-									{ Object.entries( templatePartAreas ).map(
-										( [ area, parts ] ) => (
+								<>
+									<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
+										<Heading level={ 2 }>
+											{ __( 'Template parts' ) }
+										</Heading>
+										<p>
+											{ __(
+												'Synced patterns for use in template building.'
+											) }
+										</p>
+									</div>
+									<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
+										{ Object.entries(
+											templatePartAreas
+										).map( ( [ area, parts ] ) => (
 											<CategoryItem
 												key={ area }
 												count={ parts.length }
@@ -131,54 +144,71 @@ export default function SidebarNavigationScreenPatterns() {
 														'wp_template_part'
 												}
 											/>
-										)
-									) }
-								</ItemGroup>
+										) ) }
+									</ItemGroup>
+								</>
 							) }
 							{ hasPatterns && (
-								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
-									{ patternCategories.map( ( category ) => (
-										<CategoryItem
-											key={ category.name }
-											count={ category.count }
-											label={
-												<Flex
-													justify="left"
-													align="center"
-													gap={ 0 }
-												>
-													{ category.label }
-													<Tooltip
-														position="top center"
-														text={ __(
-															'Theme patterns cannot be edited.'
-														) }
-													>
-														<span className="edit-site-sidebar-navigation-screen-pattern__lock-icon">
-															<Icon
-																style={ {
-																	fill: 'currentcolor',
-																} }
-																icon={
-																	lockSmall
-																}
-																size={ 24 }
-															/>
-														</span>
-													</Tooltip>
-												</Flex>
-											}
-											icon={ file }
-											id={ category.name }
-											type="pattern"
-											isActive={
-												currentCategory ===
-													`${ category.name }` &&
-												currentType === 'pattern'
-											}
-										/>
-									) ) }
-								</ItemGroup>
+								<>
+									<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
+										<Heading level={ 2 }>
+											{ __( 'Theme patterns' ) }
+										</Heading>
+										<p>
+											{ __(
+												'For insertion into documents where they can then be customized.'
+											) }
+										</p>
+									</div>
+									<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
+										{ patternCategories.map(
+											( category ) => (
+												<CategoryItem
+													key={ category.name }
+													count={ category.count }
+													label={
+														<Flex
+															justify="left"
+															align="center"
+															gap={ 0 }
+														>
+															{ category.label }
+															<Tooltip
+																position="top center"
+																text={ __(
+																	'Theme patterns cannot be edited.'
+																) }
+															>
+																<span className="edit-site-sidebar-navigation-screen-pattern__lock-icon">
+																	<Icon
+																		style={ {
+																			fill: 'currentcolor',
+																		} }
+																		icon={
+																			lockSmall
+																		}
+																		size={
+																			24
+																		}
+																	/>
+																</span>
+															</Tooltip>
+														</Flex>
+													}
+													icon={ file }
+													id={ category.name }
+													type="pattern"
+													isActive={
+														currentCategory ===
+															`${ category.name }` &&
+														currentType ===
+															'pattern'
+													}
+												/>
+											)
+										) }
+									</ItemGroup>
+								</>
 							) }
 						</>
 					) }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss
index f0edb96164abc..65790b5e86216 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss
@@ -1,3 +1,28 @@
 .edit-site-sidebar-navigation-screen-patterns__group {
-	margin-bottom: $grid-unit-30;
+	margin-bottom: $grid-unit-40;
+	padding-bottom: $grid-unit-30;
+	border-bottom: 1px solid $gray-800;
+
+	&:last-of-type,
+	&:first-of-type {
+		border-bottom: 0;
+		padding-bottom: 0;
+		margin-bottom: 0;
+	}
+
+	&:first-of-type {
+		margin-bottom: $grid-unit-40;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-patterns__group-header {
+	p {
+		color: $gray-600;
+	}
+
+	h2 {
+		font-size: 11px;
+		font-weight: 500;
+		text-transform: uppercase;
+	}
 }