Skip to content

Commit

Permalink
Library: Reinstate manage all template parts page (#51961)
Browse files Browse the repository at this point in the history
  • Loading branch information
aaronrobertshaw authored Jun 28, 2023
1 parent 866727e commit bfb1dcb
Show file tree
Hide file tree
Showing 7 changed files with 146 additions and 20 deletions.
5 changes: 4 additions & 1 deletion packages/edit-site/src/components/page-main/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
/**
* Internal dependencies
*/
import PageTemplates from '../page-templates';
import PageLibrary from '../page-library';
import PageTemplateParts from '../page-template-parts';
import PageTemplates from '../page-templates';
import { unlock } from '../../lock-unlock';

const { useLocation } = unlock( routerPrivateApis );
Expand All @@ -19,6 +20,8 @@ export default function PageMain() {

if ( path === '/wp_template/all' ) {
return <PageTemplates />;
} else if ( path === '/wp_template_part/all' ) {
return <PageTemplateParts />;
} else if ( path === '/library' ) {
return <PageLibrary />;
}
Expand Down
105 changes: 105 additions & 0 deletions packages/edit-site/src/components/page-template-parts/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
/**
* WordPress dependencies
*/
import {
VisuallyHidden,
__experimentalHeading as Heading,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
import { decodeEntities } from '@wordpress/html-entities';

/**
* Internal dependencies
*/
import Page from '../page';
import Table from '../table';
import Link from '../routes/link';
import AddedBy from '../list/added-by';
import TemplateActions from '../template-actions';
import AddNewTemplate from '../add-new-template';
import { store as editSiteStore } from '../../store';

export default function PageTemplateParts() {
const { records: templateParts } = useEntityRecords(
'postType',
'wp_template_part',
{
per_page: -1,
}
);

const { canCreate } = useSelect( ( select ) => {
const { supportsTemplatePartsMode } =
select( editSiteStore ).getSettings();
return {
postType: select( coreStore ).getPostType( 'wp_template_part' ),
canCreate: ! supportsTemplatePartsMode,
};
} );

const columns = [
{
header: __( 'Template Part' ),
cell: ( templatePart ) => (
<VStack>
<Heading level={ 5 }>
<Link
params={ {
postId: templatePart.id,
postType: templatePart.type,
canvas: 'view',
} }
state={ { backPath: '/wp_template_part/all' } }
>
{ decodeEntities(
templatePart.title?.rendered ||
templatePart.slug
) }
</Link>
</Heading>
</VStack>
),
maxWidth: 400,
},
{
header: __( 'Added by' ),
cell: ( templatePart ) => (
<AddedBy
postType={ templatePart.type }
postId={ templatePart.id }
/>
),
},
{
header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
cell: ( templatePart ) => (
<TemplateActions
postType={ templatePart.type }
postId={ templatePart.id }
/>
),
},
];

return (
<Page
title={ __( 'Template Parts' ) }
actions={
canCreate && (
<AddNewTemplate
templateType={ 'wp_template_part' }
showIcon={ false }
toggleProps={ { variant: 'primary' } }
/>
)
}
>
{ templateParts && (
<Table data={ templateParts } columns={ columns } />
) }
</Page>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
import CategoryItem from './category-item';
import { DEFAULT_CATEGORY, DEFAULT_TYPE } from '../page-library/utils';
import { store as editSiteStore } from '../../store';
import { useLink } from '../routes/link';
import usePatternCategories from './use-pattern-categories';
import useTemplatePartAreas from './use-template-part-areas';

Expand All @@ -46,6 +47,22 @@ export default function SidebarNavigationScreenLibrary() {
return !! settings.supportsTemplatePartsMode;
}, [] );

const templatePartsLink = useLink( { path: '/wp_template_part/all' } );
const footer = ! isMobileViewport ? (
<ItemGroup>
<SidebarNavigationItem withChevron { ...templatePartsLink }>
{ __( 'Manage all template parts' ) }
</SidebarNavigationItem>
<SidebarNavigationItem
as="a"
href="edit.php?post_type=wp_block"
withChevron
>
{ __( 'Manage all custom patterns' ) }
</SidebarNavigationItem>
</ItemGroup>
) : undefined;

return (
<SidebarNavigationScreen
isRoot={ isTemplatePartsMode }
Expand All @@ -54,19 +71,7 @@ export default function SidebarNavigationScreenLibrary() {
'Manage what patterns are available when editing your site.'
) }
actions={ <AddNewPattern /> }
footer={
<ItemGroup>
{ ! isMobileViewport && (
<SidebarNavigationItem
as="a"
href="edit.php?post_type=wp_block"
withChevron
>
{ __( 'Manage all custom patterns' ) }
</SidebarNavigationItem>
) }
</ItemGroup>
}
footer={ footer }
content={
<>
{ isLoading && __( 'Loading library' ) }
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
import { useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { pencil } from '@wordpress/icons';
import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
import { getQueryArgs } from '@wordpress/url';

/**
* Internal dependencies
Expand All @@ -19,6 +20,7 @@ import { unlock } from '../../lock-unlock';

export default function SidebarNavigationScreenPattern() {
const { params } = useNavigator();
const { categoryType } = getQueryArgs( window.location.href );
const { postType, postId } = params;
const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );

Expand All @@ -27,6 +29,14 @@ export default function SidebarNavigationScreenPattern() {
const patternDetails = usePatternDetails( postType, postId );
const content = useNavigationMenuContent( postType, postId );

// The absence of a category type in the query params for template parts
// indicates the user has arrived at the template part via the "manage all"
// page and the back button should return them to that list page.
const backPath =
! categoryType && postType === 'wp_template_part'
? '/wp_template_part/all'
: '/library';

return (
<SidebarNavigationScreen
actions={
Expand All @@ -36,7 +46,7 @@ export default function SidebarNavigationScreenPattern() {
icon={ pencil }
/>
}
backPath={ '/library' }
backPath={ backPath }
content={ content }
{ ...patternDetails }
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const config = {
description: __(
'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'
),
backPath: '/library',
},
};

Expand All @@ -32,6 +33,7 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
<SidebarNavigationScreen
title={ config[ postType ].title }
description={ config[ postType ].description }
backPath={ config[ postType ].backPath }
/>
);
}
6 changes: 3 additions & 3 deletions packages/edit-site/src/components/sidebar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,12 @@ function SidebarScreens() {
<NavigatorScreen path="/library">
<SidebarNavigationScreenLibrary />
</NavigatorScreen>
<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
<SidebarNavigationScreenTemplatesBrowse />
</NavigatorScreen>
<NavigatorScreen path="/:postType(wp_template_part|wp_block)/:postId">
<SidebarNavigationScreenPattern />
</NavigatorScreen>
<NavigatorScreen path="/:postType(wp_template)/all">
<SidebarNavigationScreenTemplatesBrowse />
</NavigatorScreen>
<NavigatorScreen path="/:postType(wp_template)/:postId">
<SidebarNavigationScreenTemplate />
</NavigatorScreen>
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/utils/get-is-list-page.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export default function getIsListPage(
) {
return (
path === '/wp_template/all' ||
path === '/wp_template_part/all' ||
( path === '/library' &&
// Don't treat "/library" without categoryType and categoryId as a list page
// in mobile because the sidebar covers the whole page.
Expand Down

1 comment on commit bfb1dcb

@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 bfb1dcb.
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/5398646517
📝 Reported issues:

Please sign in to comment.