Skip to content

Commit

Permalink
Library: Reinstate manage all template parts page (WordPress#51961)
Browse files Browse the repository at this point in the history
  • Loading branch information
aaronrobertshaw authored and sethrubenstein committed Jul 13, 2023
1 parent 33e2c84 commit 02cac31
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

0 comments on commit 02cac31

Please sign in to comment.