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.