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
aaronrobertshaw authored Jul 7, 2023
1 parent d222006 commit 9e8763a
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 ),
};
}

1 comment on commit 9e8763a

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 9e8763a.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5481975654
📝 Reported issues:

Please sign in to comment.