Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Patterns: Display all custom template part areas in sidebar nav #52355

Merged
merged 2 commits into from
Jul 7, 2023
Merged

Patterns: Display all custom template part areas in sidebar nav #52355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bb4cb8b
Patterns: Display all custom template part areas in sidebar nav
aaronrobertshaw Jul 6, 2023
b041ba9
Clean up patterns category groups
aaronrobertshaw Jul 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 2 additions & 8 deletions packages/edit-site/src/components/page-patterns/use-patterns.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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 ),
};
}
Loading