Patterns: remove "Manage all parts" page & link

packages/edit-site/src/components/layout/router.js

@@ -12,7 +12,7 @@ import { useIsSiteEditorLoading } from './hooks';
 import Editor from '../editor';
 import PagePages from '../page-pages';
 import PagePatterns from '../page-patterns';
-import PageTemplatesTemplateParts from '../page-templates-template-parts';
+import PageTemplates from '../page-templates';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
@@ -24,10 +24,6 @@ import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
 import DataViewsSidebarContent from '../sidebar-dataviews';
-import {
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-} from '../../utils/constants';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -108,22 +104,12 @@ export default function useLayoutAreas() {
 		return {
 			key: 'templates-list',
 			areas: {
-				sidebar: (
-					<SidebarNavigationScreenTemplatesBrowse postType="wp_template" />
-				),
-				content: (
-					<PageTemplatesTemplateParts
-						postType={ TEMPLATE_POST_TYPE }
-					/>
-				),
+				sidebar: <SidebarNavigationScreenTemplatesBrowse />,
+				content: <PageTemplates />,
 				preview: isListLayout && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
-				mobile: (
-					<PageTemplatesTemplateParts
-						postType={ TEMPLATE_POST_TYPE }
-					/>
-				),
+				mobile: <PageTemplates />,
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -132,30 +118,19 @@ export default function useLayoutAreas() {
 	}
 
 	// Template parts
+	/*
+	 * This is for legacy reasons, as the template parts are now part of the patterns screen.
+	 * However, hybrid themes (classic themes that support template parts) still access this URL.
+	 * While there are plans to make them use the patterns screen instead, we cannot do it for now.
+	 * See discussion at https://github.com/WordPress/gutenberg/pull/60689
+	 */
 	if ( path === '/wp_template_part/all' ) {
-		const isListLayout = isCustom !== 'true' && layout === 'list';
 		return {
 			key: 'template-parts',
 			areas: {
-				sidebar: (
-					<SidebarNavigationScreenTemplatesBrowse postType="wp_template_part" />
-				),
-				content: (
-					<PageTemplatesTemplateParts
-						postType={ TEMPLATE_PART_POST_TYPE }
-					/>
-				),
-				preview: isListLayout && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
-				mobile: (
-					<PageTemplatesTemplateParts
-						postType={ TEMPLATE_PART_POST_TYPE }
-					/>
-				),
-			},
-			widths: {
-				content: isListLayout ? 380 : undefined,
+				sidebar: <SidebarNavigationScreenPatterns />,
+				content: <PagePatterns />,
+				mobile: <PagePatterns />,
 			},
 		};
 	}

packages/edit-site/src/components/page-patterns/index.js

@@ -50,6 +50,7 @@ import {
 	LAYOUT_LIST,
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_PART_ALL_AREAS_CATEGORY,
 	PATTERN_SYNC_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
 	ENUMERATION_TYPE,
@@ -68,7 +69,7 @@ import { unlock } from '../../lock-unlock';
 import usePatterns from './use-patterns';
 import PatternsHeader from './header';
 import { useLink } from '../routes/link';
-import { useAddedBy } from '../page-templates-template-parts/hooks';
+import { useAddedBy } from '../page-templates/hooks';
 
 const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
@@ -310,9 +311,21 @@ function Title( { item, categoryId } ) {
 }
 
 export default function DataviewsPatterns() {
-	const { categoryType, categoryId = PATTERN_DEFAULT_CATEGORY } =
-		getQueryArgs( window.location.href );
-	const type = categoryType || PATTERN_TYPES.theme;
+	const {
+		categoryType,
+		categoryId: categoryIdFromURL,
+		path,
+	} = getQueryArgs( window.location.href );
+	const type =
+		categoryType ||
+		( path === '/wp_template_part/all'
+			? TEMPLATE_PART_POST_TYPE
+			: PATTERN_TYPES.theme );
+	const categoryId =
+		categoryIdFromURL ||
+		( path === '/wp_template_part/all'
+			? TEMPLATE_PART_ALL_AREAS_CATEGORY
+			: PATTERN_DEFAULT_CATEGORY );
 	const [ view, setView ] = useState( DEFAULT_VIEW );
 	const isUncategorizedThemePatterns =
 		type === PATTERN_TYPES.theme && categoryId === 'uncategorized';

packages/edit-site/src/components/page-templates-template-parts/index.js → packages/edit-site/src/components/page-templates/index.js

@@ -44,7 +44,6 @@ import {
 
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
-import AddNewTemplatePart from './add-new-template-part';
 
 const { usePostActions } = unlock( editorPrivateApis );
 
@@ -175,10 +174,7 @@ function Preview( { item, viewType } ) {
 						onClick={ onClick }
 						aria-label={ item.title?.rendered || item.title }
 					>
-						{ isEmpty &&
-							( item.type === TEMPLATE_POST_TYPE
-								? __( 'Empty template' )
-								: __( 'Empty template part' ) ) }
+						{ isEmpty && __( 'Empty template' ) }
 						{ ! isEmpty && (
 							<Async>
 								<BlockPreview blocks={ blocks } />
@@ -199,7 +195,7 @@ const TEMPLATE_ACTIONS = [
 	'delete-template',
 ];
 
-export default function PageTemplatesTemplateParts( { postType } ) {
+export default function PageTemplates() {
 	const { params } = useLocation();
 	const { activeView = 'all', layout } = params;
 	const defaultView = useMemo( () => {
@@ -239,7 +235,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 
 	const { records, isResolving: isLoadingData } = useEntityRecords(
 		'postType',
-		postType,
+		TEMPLATE_POST_TYPE,
 		{
 			per_page: -1,
 		}
@@ -271,8 +267,8 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 		} ) );
 	}, [ records ] );
 
-	const fields = useMemo( () => {
-		const _fields = [
+	const fields = useMemo(
+		() => [
 			{
 				header: __( 'Preview' ),
 				id: 'preview',
@@ -284,10 +280,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				enableSorting: false,
 			},
 			{
-				header:
-					postType === TEMPLATE_POST_TYPE
-						? __( 'Template' )
-						: __( 'Template Part' ),
+				header: __( 'Template' ),
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered,
 				render: ( { item } ) => (
@@ -297,9 +290,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				enableHiding: false,
 				enableGlobalSearch: true,
 			},
-		];
-		if ( postType === TEMPLATE_POST_TYPE ) {
-			_fields.push( {
+			{
 				header: __( 'Description' ),
 				id: 'description',
 				render: ( { item } ) => {
@@ -324,23 +315,21 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 				minWidth: 320,
 				enableSorting: false,
 				enableGlobalSearch: true,
-			} );
-		}
-		// TODO: The plan is to support fields reordering, which would require an API like `order` or something
-		// similar. With the aforementioned API we wouldn't need to construct the fields array like this.
-		_fields.push( {
-			header: __( 'Author' ),
-			id: 'author',
-			getValue: ( { item } ) => item.author_text,
-			render: ( { item } ) => {
-				return <AuthorField viewType={ view.type } item={ item } />;
 			},
-			type: ENUMERATION_TYPE,
-			elements: authors,
-			width: '1%',
-		} );
-		return _fields;
-	}, [ postType, authors, view.type ] );
+			{
+				header: __( 'Author' ),
+				id: 'author',
+				getValue: ( { item } ) => item.author_text,
+				render: ( { item } ) => {
+					return <AuthorField viewType={ view.type } item={ item } />;
+				},
+				type: ENUMERATION_TYPE,
+				elements: authors,
+				width: '1%',
+			},
+		],
+		[ authors, view.type ]
+	);
 
 	const { data, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( records, view, fields );
@@ -385,19 +374,9 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 
 	return (
 		<Page
-			className="edit-site-page-template-template-parts-dataviews"
-			title={
-				postType === TEMPLATE_POST_TYPE
-					? __( 'Templates' )
-					: __( 'Template Parts' )
-			}
-			actions={
-				postType === TEMPLATE_POST_TYPE ? (
-					<AddNewTemplate />
-				) : (
-					<AddNewTemplatePart />
-				)
-			}
+			className="edit-site-page-templates"
+			title={ __( 'Templates' ) }
+			actions={ <AddNewTemplate /> }
 		>
 			<DataViews
 				paginationInfo={ paginationInfo }

packages/edit-site/src/components/page-templates-template-parts/style.scss → packages/edit-site/src/components/page-templates/style.scss

@@ -59,7 +59,7 @@
 	white-space: normal;
 }
 
-.edit-site-page-template-template-parts-dataviews {
+.edit-site-page-templates {
 	.dataviews-pagination {
 		z-index: z-index(".edit-site-templates__dataviews-list-pagination");
 	}

packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js

@@ -1,11 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { pencil } from '@wordpress/icons';
-import { getQueryArgs } from '@wordpress/url';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -17,7 +17,6 @@ import usePatternDetails from './use-pattern-details';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import TemplateActions from '../template-actions';
-import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -27,20 +26,18 @@ export default function SidebarNavigationScreenPattern() {
 	const {
 		params: { postType, postId },
 	} = location;
-	const { categoryType } = getQueryArgs( window.location.href );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 
 	useInitEditedEntityFromURL();
 
 	const patternDetails = usePatternDetails( 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 === TEMPLATE_PART_POST_TYPE
-			? { path: '/wp_template_part/all' }
-			: { path: '/patterns' };
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+	const backPath = isBlockBasedTheme
+		? { path: '/patterns' }
+		: { path: '/wp_template_part/all' };
 
 	return (
 		<SidebarNavigationScreen

packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js

@@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { useAddedBy } from '../page-templates-template-parts/hooks';
+import { useAddedBy } from '../page-templates/hooks';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import useNavigationMenuContent from './use-navigation-menu-content';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';