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 933ef256cf045..cb823422480a0 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 @@ -4,7 +4,6 @@ import { __experimentalItemGroup as ItemGroup, __experimentalItem as Item, - __experimentalHeading as Heading, } from '@wordpress/components'; import { useViewportMatch } from '@wordpress/compose'; import { getTemplatePartIcon } from '@wordpress/editor'; @@ -31,75 +30,78 @@ import usePatternCategories from './use-pattern-categories'; import useTemplatePartAreas from './use-template-part-areas'; import { store as editSiteStore } from '../../store'; -function TemplatePartGroup( { areas, currentArea, currentType } ) { - return ( - <> -
- { __( 'Template parts' ) } -
- - templateParts?.length || 0 - ) - .reduce( ( acc, val ) => acc + val, 0 ) } - icon={ getTemplatePartIcon() } /* no name, so it provides the fallback icon */ - label={ __( 'All template parts' ) } - id={ 'all-parts' } - type={ TEMPLATE_PART_POST_TYPE } - isActive={ - currentArea === 'all-parts' && - currentType === TEMPLATE_PART_POST_TYPE - } - /> - { Object.entries( areas ).map( - ( [ area, { label, templateParts } ] ) => ( - - ) - ) } - - - ); -} - -function PatternCategoriesGroup( { - categories, +function CategoriesGroup( { + templatePartAreas, + patternCategories, currentCategory, currentType, } ) { + const [ allPatterns, ...otherPatterns ] = patternCategories; + return ( - <> - - { categories.map( ( category ) => ( + + templateParts?.length || 0 ) + .reduce( ( acc, val ) => acc + val, 0 ) } + icon={ getTemplatePartIcon() } /* no name, so it provides the fallback icon */ + label={ __( 'All template parts' ) } + id={ 'all-parts' } + type={ TEMPLATE_PART_POST_TYPE } + isActive={ + currentCategory === 'all-parts' && + currentType === TEMPLATE_PART_POST_TYPE + } + /> + { Object.entries( templatePartAreas ).map( + ( [ area, { label, templateParts } ] ) => ( - ) ) } - - + ) + ) } +
+ { allPatterns && ( + + ) } + { otherPatterns.map( ( category ) => ( + + ) ) } + ); } @@ -162,20 +164,12 @@ export default function SidebarNavigationScreenPatterns() { ) } - { hasPatterns && ( - - ) } - { hasTemplateParts && ( - - ) } + ) } 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 7b448c375fb40..19885eb3baf2c 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 @@ -21,3 +21,8 @@ text-transform: uppercase; } } + +.edit-site-sidebar-navigation-screen-patterns__divider { + border-top: 1px solid $gray-800; + margin: $grid-unit-20 0; +}