Library: Reinstate manage all template parts page (WordPress#51961)

pewresearch · Jul 13, 2023 · 02cac31 · 02cac31
1 parent 33e2c84
commit 02cac31
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 20 deletions.
diff --git a/packages/edit-site/src/components/page-main/index.js b/packages/edit-site/src/components/page-main/index.js
@@ -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 );
@@ -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 />;
 	}

diff --git a/packages/edit-site/src/components/page-template-parts/index.js b/packages/edit-site/src/components/page-template-parts/index.js
@@ -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>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/index.js
@@ -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';
 
@@ -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 }
@@ -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' ) }

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
@@ -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
@@ -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 ) );
 
@@ -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={
@@ -36,7 +46,7 @@ export default function SidebarNavigationScreenPattern() {
 					icon={ pencil }
 				/>
 			}
-			backPath={ '/library' }
+			backPath={ backPath }
 			content={ content }
 			{ ...patternDetails }
 		/>

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
@@ -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',
 	},
 };
 
@@ -32,6 +33,7 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 		<SidebarNavigationScreen
 			title={ config[ postType ].title }
 			description={ config[ postType ].description }
+			backPath={ config[ postType ].backPath }
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
@@ -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>

diff --git a/packages/edit-site/src/utils/get-is-list-page.js b/packages/edit-site/src/utils/get-is-list-page.js
@@ -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.