Skip to content

Commit

Permalink
Patterns: remove "Template parts" sidebar group (#60359)
Browse files Browse the repository at this point in the history 
Co-authored-by: oandregal <[email protected]>
Co-authored-by: jameskoster <[email protected]>
  • Loading branch information
@oandregal @jameskoster
3 people authored Apr 17, 2024
1 parent 68f0020 commit 6aafb02
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 76 deletions.
146 changes: 70 additions & 76 deletions packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 (
<>
<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
<Heading level={ 2 }>{ __( 'Template parts' ) }</Heading>
</div>
<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
<CategoryItem
key="all"
count={ Object.values( areas )
.map(
( { templateParts } ) => 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 } ] ) => (
<CategoryItem
key={ area }
count={ templateParts?.length }
icon={ getTemplatePartIcon( area ) }
label={ label }
id={ area }
type={ TEMPLATE_PART_POST_TYPE }
isActive={
currentArea === area &&
currentType === TEMPLATE_PART_POST_TYPE
}
/>
)
) }
</ItemGroup>
</>
);
}

function PatternCategoriesGroup( {
categories,
function CategoriesGroup( {
templatePartAreas,
patternCategories,
currentCategory,
currentType,
} ) {
const [ allPatterns, ...otherPatterns ] = patternCategories;

return (
<>
<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
{ categories.map( ( category ) => (
<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
<CategoryItem
key="all"
count={ Object.values( templatePartAreas )
.map( ( { templateParts } ) => 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 } ] ) => (
<CategoryItem
key={ category.name }
count={ category.count }
label={ category.label }
icon={ file }
id={ category.name }
type="pattern"
key={ area }
count={ templateParts?.length }
icon={ getTemplatePartIcon( area ) }
label={ label }
id={ area }
type={ TEMPLATE_PART_POST_TYPE }
isActive={
currentCategory === `${ category.name }` &&
( currentType === PATTERN_TYPES.theme ||
currentType === PATTERN_TYPES.user )
currentCategory === area &&
currentType === TEMPLATE_PART_POST_TYPE
}
/>
) ) }
</ItemGroup>
</>
)
) }
<div className="edit-site-sidebar-navigation-screen-patterns__divider" />
{ allPatterns && (
<CategoryItem
key={ allPatterns.name }
count={ allPatterns.count }
label={ allPatterns.label }
icon={ file }
id={ allPatterns.name }
type="pattern"
isActive={
currentCategory === `${ allPatterns.name }` &&
( currentType === PATTERN_TYPES.theme ||
currentType === PATTERN_TYPES.user )
}
/>
) }
{ otherPatterns.map( ( category ) => (
<CategoryItem
key={ category.name }
count={ category.count }
label={ category.label }
icon={ file }
id={ category.name }
type="pattern"
isActive={
currentCategory === `${ category.name }` &&
( currentType === PATTERN_TYPES.theme ||
currentType === PATTERN_TYPES.user )
}
/>
) ) }
</ItemGroup>
);
}

Expand Down Expand Up @@ -162,20 +164,12 @@ export default function SidebarNavigationScreenPatterns() {
</Item>
</ItemGroup>
) }
{ hasPatterns && (
<PatternCategoriesGroup
categories={ patternCategories }
currentCategory={ currentCategory }
currentType={ currentType }
/>
) }
{ hasTemplateParts && (
<TemplatePartGroup
areas={ templatePartAreas }
currentArea={ currentCategory }
currentType={ currentType }
/>
) }
<CategoriesGroup
templatePartAreas={ templatePartAreas }
patternCategories={ patternCategories }
currentCategory={ currentCategory }
currentType={ currentType }
/>
</>
) }
</>
Expand Down
5 changes: 5 additions & 0 deletions packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit 6aafb02

Please sign in to comment.