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; + } }