Skip to content

Commit

Permalink
Patterns: Display all custom template part areas in sidebar nav (#52355)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronrobertshaw @tellthemachines
aaronrobertshaw authored and tellthemachines committed Jul 7, 2023
1 parent f03487a commit 9a99dd0
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 120 deletions.
10 changes: 2 additions & 8 deletions packages/edit-site/src/components/page-patterns/use-patterns.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,8 @@ const templatePartToPattern = ( templatePart ) => ( {
templatePart,
} );

const templatePartCategories = [ 'header', 'footer', 'sidebar' ];
const templatePartHasCategory = ( item, category ) => {
if ( category === 'uncategorized' ) {
return ! templatePartCategories.includes( item.templatePart.area );
}

return item.templatePart.area === category;
};
const templatePartHasCategory = ( item, category ) =>
item.templatePart.area === category;

const useTemplatePartsAsPatterns = (
categoryId,
Expand Down
186 changes: 83 additions & 103 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,12 +30,79 @@ import usePatternCategories from './use-pattern-categories';
import useMyPatterns from './use-my-patterns';
import useTemplatePartAreas from './use-template-part-areas';

const templatePartAreaLabels = {
header: __( 'Headers' ),
footer: __( 'Footers' ),
sidebar: __( 'Sidebar' ),
uncategorized: __( 'Uncategorized' ),
};
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', '<' );
Expand Down Expand Up @@ -110,105 +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, parts ] ) => (
<CategoryItem
key={ area }
count={ parts.length }
icon={ getTemplatePartIcon(
area
) }
label={
templatePartAreaLabels[
area
]
}
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
40 changes: 31 additions & 9 deletions ...es/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,41 @@
* WordPress dependencies
*/
import { useEntityRecords } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';

const getTemplatePartAreas = ( items ) => {
const useTemplatePartsGroupedByArea = ( items ) => {
const allItems = items || [];

const groupedByArea = allItems.reduce(
( accumulator, item ) => {
const key = accumulator[ item.area ] ? item.area : 'uncategorized';
accumulator[ key ].push( item );
return accumulator;
},
{ header: [], footer: [], sidebar: [], uncategorized: [] }
const templatePartAreas = useSelect(
( select ) =>
select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
[]
);

// Create map of template areas ensuring that default areas are displayed before
// any custom registered template part areas.
const knownAreas = {
header: {},
footer: {},
sidebar: {},
uncategorized: {},
};

templatePartAreas.forEach(
( templatePartArea ) =>
( knownAreas[ templatePartArea.area ] = {
...templatePartArea,
templateParts: [],
} )
);

const groupedByArea = allItems.reduce( ( accumulator, item ) => {
const key = accumulator[ item.area ] ? item.area : 'uncategorized';
accumulator[ key ].templateParts.push( item );
return accumulator;
}, knownAreas );

return groupedByArea;
};

Expand All @@ -28,6 +50,6 @@ export default function useTemplatePartAreas() {
return {
hasTemplateParts: templateParts ? !! templateParts.length : false,
isLoading,
templatePartAreas: getTemplatePartAreas( templateParts ),
templatePartAreas: useTemplatePartsGroupedByArea( templateParts ),
};
}

0 comments on commit 9a99dd0

Please sign in to comment.