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 b28aa6687723b7..97789e6ec45fea 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() {
) }
{ hasTemplateParts && (
-
- { Object.entries( templatePartAreas ).map(
- ( [ area, parts ] ) => (
+ <>
+
+
+ { __( 'Template parts' ) }
+
+
+ { __(
+ 'Synced patterns for use in template building.'
+ ) }
+
+
+
+ { Object.entries(
+ templatePartAreas
+ ).map( ( [ area, parts ] ) => (
- )
- ) }
-
+ ) ) }
+
+ >
) }
{ hasPatterns && (
-
- { patternCategories.map( ( category ) => (
-
- { category.label }
-
-
-
-
-
-
- }
- icon={ file }
- id={ category.name }
- type="pattern"
- isActive={
- currentCategory ===
- `${ category.name }` &&
- currentType === 'pattern'
- }
- />
- ) ) }
-
+ <>
+
+
+ { __( 'Theme patterns' ) }
+
+
+ { __(
+ 'For insertion into documents where they can then be customized.'
+ ) }
+
+
+
+ { patternCategories.map(
+ ( category ) => (
+
+ { category.label }
+
+
+
+
+
+
+ }
+ icon={ file }
+ id={ category.name }
+ type="pattern"
+ isActive={
+ currentCategory ===
+ `${ category.name }` &&
+ currentType ===
+ 'pattern'
+ }
+ />
+ )
+ ) }
+
+ >
) }
>
) }
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 f0edb96164abca..65790b5e862162 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;
+ }
}