Skip to content

Commit

Permalink
Clean up patterns category groups
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Jul 7, 2023
1 parent bb4cb8b commit b041ba9
Showing 1 changed file with 84 additions and 93 deletions.
177 changes: 84 additions & 93 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 @@ -30,6 +30,80 @@ import usePatternCategories from './use-pattern-categories';
import useMyPatterns from './use-my-patterns';
import useTemplatePartAreas from './use-template-part-areas';

function TemplatePartGroup( { areas, currentArea, currentType } ) {
return (
<>
<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
<Heading level={ 2 }>{ __( 'Template parts' ) }</Heading>
<p>{ __( 'Synced patterns for use in template building.' ) }</p>
</div>
<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
{ Object.entries( areas ).map(
( [ area, { label, templateParts } ] ) => (
<CategoryItem
key={ area }
count={ templateParts?.length }
icon={ getTemplatePartIcon( area ) }
label={ label }
id={ area }
type="wp_template_part"
isActive={
currentArea === area &&
currentType === 'wp_template_part'
}
/>
)
) }
</ItemGroup>
</>
);
}

function ThemePatternsGroup( { categories, currentCategory, currentType } ) {
return (
<>
<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
<Heading level={ 2 }>{ __( 'Theme patterns' ) }</Heading>
<p>
{ __(
'For insertion into documents where they can then be customized.'
) }
</p>
</div>
<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
{ categories.map( ( category ) => (
<CategoryItem
key={ category.name }
count={ category.count }
label={
<Flex justify="left" align="center" gap={ 0 }>
{ category.label }
<Tooltip
position="top center"
text={ __(
'Theme patterns cannot be edited.'
) }
>
<span className="edit-site-sidebar-navigation-screen-pattern__lock-icon">
<Icon icon={ lockSmall } size={ 24 } />
</span>
</Tooltip>
</Flex>
}
icon={ file }
id={ category.name }
type="pattern"
isActive={
currentCategory === `${ category.name }` &&
currentType === 'pattern'
}
/>
) ) }
</ItemGroup>
</>
);
}

export default function SidebarNavigationScreenPatterns() {
const isMobileViewport = useViewportMatch( 'medium', '<' );
const { categoryType, categoryId } = getQueryArgs( window.location.href );
Expand Down Expand Up @@ -103,101 +177,18 @@ export default function SidebarNavigationScreenPatterns() {
</ItemGroup>
) }
{ hasTemplateParts && (
<>
<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
<Heading level={ 2 }>
{ __( 'Template parts' ) }
</Heading>
<p>
{ __(
'Synced patterns for use in template building.'
) }
</p>
</div>
<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
{ Object.entries(
templatePartAreas
).map( ( [ area, { label, templateParts } ] ) => (
<CategoryItem
key={ area }
count={ templateParts?.length }
icon={ getTemplatePartIcon(
area
) }
label={ label }
id={ area }
type="wp_template_part"
isActive={
currentCategory === area &&
currentType ===
'wp_template_part'
}
/>
) ) }
</ItemGroup>
</>
<TemplatePartGroup
areas={ templatePartAreas }
currentArea={ currentCategory }
currentType={ currentType }
/>
) }
{ hasPatterns && (
<>
<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
<Heading level={ 2 }>
{ __( 'Theme patterns' ) }
</Heading>
<p>
{ __(
'For insertion into documents where they can then be customized.'
) }
</p>
</div>
<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
{ patternCategories.map(
( category ) => (
<CategoryItem
key={ category.name }
count={ category.count }
label={
<Flex
justify="left"
align="center"
gap={ 0 }
>
{ category.label }
<Tooltip
position="top center"
text={ __(
'Theme patterns cannot be edited.'
) }
>
<span className="edit-site-sidebar-navigation-screen-pattern__lock-icon">
<Icon
style={ {
fill: 'currentcolor',
} }
icon={
lockSmall
}
size={
24
}
/>
</span>
</Tooltip>
</Flex>
}
icon={ file }
id={ category.name }
type="pattern"
isActive={
currentCategory ===
`${ category.name }` &&
currentType ===
'pattern'
}
/>
)
) }
</ItemGroup>
</>
<ThemePatternsGroup
categories={ patternCategories }
currentCategory={ currentCategory }
currentType={ currentType }
/>
) }
</>
) }
Expand Down

0 comments on commit b041ba9

Please sign in to comment.