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