diff --git a/packages/edit-site/src/components/page-main/index.js b/packages/edit-site/src/components/page-main/index.js
index ebcf35dfb0c1f..a6c05886888c4 100644
--- 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 ;
+ } else if ( path === '/wp_template_part/all' ) {
+ return ;
} else if ( path === '/library' ) {
return ;
}
diff --git a/packages/edit-site/src/components/page-template-parts/index.js b/packages/edit-site/src/components/page-template-parts/index.js
new file mode 100644
index 0000000000000..0a50f83927979
--- /dev/null
+++ 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 ) => (
+
+
+
+ { decodeEntities(
+ templatePart.title?.rendered ||
+ templatePart.slug
+ ) }
+
+
+
+ ),
+ maxWidth: 400,
+ },
+ {
+ header: __( 'Added by' ),
+ cell: ( templatePart ) => (
+
+ ),
+ },
+ {
+ header: { __( 'Actions' ) },
+ cell: ( templatePart ) => (
+
+ ),
+ },
+ ];
+
+ return (
+
+ )
+ }
+ >
+ { templateParts && (
+
+ ) }
+
+ );
+}
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
index d3cfcbece6be0..270e0ed59afed 100644
--- 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 ? (
+
+
+ { __( 'Manage all template parts' ) }
+
+
+ { __( 'Manage all custom patterns' ) }
+
+
+ ) : undefined;
+
return (
}
- footer={
-
- { ! isMobileViewport && (
-
- { __( 'Manage all custom patterns' ) }
-
- ) }
-
- }
+ 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
index 279b5a0de298d..182a570d8a95d 100644
--- 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 (
}
- 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
index 67e979c26e2ce..b5a0e4d195885 100644
--- 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() {
);
}
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index eef37a4433995..df6a566503140 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -59,12 +59,12 @@ function SidebarScreens() {
+
+
+
-
-
-
diff --git a/packages/edit-site/src/utils/get-is-list-page.js b/packages/edit-site/src/utils/get-is-list-page.js
index 963287308ac9a..11827432071bd 100644
--- 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.