Classic Theme: Expose new Patterns page and remove Template Parts submenu

lib/compat/wordpress-6.6/compat.php

@@ -0,0 +1,27 @@
+<?php
+/**
+ * WordPress 6.6 compatibility functions.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Change the Patterns submenu link and remove the Template Parts submenu for
+ * the Classic theme. This function should not be backported to core, and should be
+ * removed when the required WP core version for Gutenberg is >= 6.6.0.
+ *
+ * @global array $submenu
+ */
+function gutenberg_change_patterns_link_and_remove_template_parts_submenu_item() {
+	if ( ! wp_is_block_theme() ) {
+		global $submenu;
+		foreach ( $submenu['themes.php'] as $key => $item ) {
+			if ( 'edit.php?post_type=wp_block' === $item[2] ) {
+				$submenu['themes.php'][ $key ][2] = 'site-editor.php?path=/patterns';
+			} elseif ( 'site-editor.php?path=/wp_template_part/all' === $item[2] ) {
+				unset( $submenu['themes.php'][ $key ] );
+			}
+		}
+	}
+}
+add_action( 'admin_init', 'gutenberg_change_patterns_link_and_remove_template_parts_submenu_item' );

lib/load.php

@@ -125,6 +125,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.5/script-loader.php';
 
 // WordPress 6.6 compat.
+require __DIR__ . '/compat/wordpress-6.6/compat.php';
 require __DIR__ . '/compat/wordpress-6.6/resolve-patterns.php';
 require __DIR__ . '/compat/wordpress-6.6/block-bindings/pattern-overrides.php';
 require __DIR__ . '/compat/wordpress-6.6/block-template-utils.php';

packages/core-commands/src/admin-navigation-commands.js

@@ -10,15 +10,14 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import { useIsTemplatesAccessible, useIsBlockBasedTheme } from './hooks';
+import { useIsTemplatesAccessible } from './hooks';
 import { unlock } from './lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
 
 export function useAdminNavigationCommands() {
 	const history = useHistory();
 	const isTemplatesAccessible = useIsTemplatesAccessible();
-	const isBlockBasedTheme = useIsBlockBasedTheme();
 
 	const isSiteEditor = getPath( window.location.href )?.includes(
 		'site-editor.php'
@@ -45,7 +44,10 @@ export function useAdminNavigationCommands() {
 		label: __( 'Patterns' ),
 		icon: symbol,
 		callback: ( { close } ) => {
-			if ( isTemplatesAccessible && isBlockBasedTheme ) {
+			// The site editor and templates both check whether the user
+			// has edit_theme_options capabilities. We can leverage that here
+			// and omit the manage patterns link if the user can't access it.
+			if ( isTemplatesAccessible ) {
 				const args = {
 					path: '/patterns',
 				};

packages/edit-post/src/components/header/more-menu/manage-patterns-menu-item.js

@@ -3,17 +3,13 @@
  */
 import { MenuItem } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
 
 function ManagePatternsMenuItem() {
 	const url = useSelect( ( select ) => {
 		const { canUser } = select( coreStore );
-		const { getEditorSettings } = select( editorStore );
-
-		const isBlockTheme = getEditorSettings().__unstableIsBlockBasedTheme;
 		const defaultUrl = addQueryArgs( 'edit.php', {
 			post_type: 'wp_block',
 		} );
@@ -24,9 +20,7 @@ function ManagePatternsMenuItem() {
 		// The site editor and templates both check whether the user has
 		// edit_theme_options capabilities. We can leverage that here and not
 		// display the manage patterns link if the user can't access it.
-		return canUser( 'read', 'templates' ) && isBlockTheme
-			? patternsUrl
-			: defaultUrl;
+		return canUser( 'read', 'templates' ) ? patternsUrl : defaultUrl;
 	}, [] );
 
 	return (

packages/edit-site/src/components/add-new-pattern/index.js

@@ -5,13 +5,14 @@ import { DropdownMenu } from '@wordpress/components';
 import { useState, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { plus, symbol, symbolFilled, upload } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import {
 	privateApis as editPatternsPrivateApis,
 	store as patternsStore,
 } from '@wordpress/patterns';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -30,7 +31,7 @@ const { CreatePatternModal, useAddPatternCategory } = unlock(
 	editPatternsPrivateApis
 );
 
-export default function AddNewPattern( { canCreateParts, canCreatePatterns } ) {
+export default function AddNewPattern() {
 	const history = useHistory();
 	const { params } = useLocation();
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
@@ -40,6 +41,10 @@ export default function AddNewPattern( { canCreateParts, canCreatePatterns } ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const patternUploadInputRef = useRef();
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
 
 	function handleCreatePattern( { pattern, categoryId } ) {
 		setShowPatternModal( false );
@@ -71,31 +76,27 @@ export default function AddNewPattern( { canCreateParts, canCreatePatterns } ) {
 
 	const controls = [];
 
-	if ( canCreatePatterns ) {
-		controls.push( {
-			icon: symbol,
-			onClick: () => setShowPatternModal( true ),
-			title: __( 'Create pattern' ),
-		} );
-	}
+	controls.push( {
+		icon: symbol,
+		onClick: () => setShowPatternModal( true ),
+		title: __( 'Create pattern' ),
+	} );
 
-	if ( canCreateParts ) {
+	if ( isBlockBasedTheme ) {
 		controls.push( {
 			icon: symbolFilled,
 			onClick: () => setShowTemplatePartModal( true ),
 			title: __( 'Create template part' ),
 		} );
 	}
 
-	if ( canCreatePatterns ) {
-		controls.push( {
-			icon: upload,
-			onClick: () => {
-				patternUploadInputRef.current.click();
-			},
-			title: __( 'Import pattern from JSON' ),
-		} );
-	}
+	controls.push( {
+		icon: upload,
+		onClick: () => {
+			patternUploadInputRef.current.click();
+		},
+		title: __( 'Import pattern from JSON' ),
+	} );
 
 	const { categoryMap, findOrCreateTerm } = useAddPatternCategory();
 	return (

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

@@ -117,26 +117,11 @@ 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
+	/* Patterns and Template Parts
+	 * `/wp_template_part/all` path is no longer used, but uses Patterns page screens for
+	 * backwards compatibility.
 	 */
-	if ( path === '/wp_template_part/all' ) {
-		return {
-			key: 'template-parts',
-			areas: {
-				sidebar: <SidebarNavigationScreenPatterns />,
-				content: <PagePatterns />,
-				mobile: <PagePatterns />,
-			},
-		};
-	}
-
-	// Patterns
-	if ( path === '/patterns' ) {
+	if ( path === '/patterns' || path === '/wp_template_part/all' ) {
 		return {
 			key: 'patterns',
 			areas: {

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

@@ -43,7 +43,6 @@ import {
 	LAYOUT_LIST,
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
-	TEMPLATE_PART_ALL_AREAS_CATEGORY,
 	PATTERN_SYNC_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
 	ENUMERATION_TYPE,
@@ -253,21 +252,11 @@ function Title( { item, categoryId } ) {
 }
 
 export default function DataviewsPatterns() {
-	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 { categoryType, categoryId: categoryIdFromURL } = getQueryArgs(
+		window.location.href
+	);
+	const type = categoryType || PATTERN_TYPES.theme;
+	const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY;
 	const [ view, setView ] = useState( DEFAULT_VIEW );
 	const isUncategorizedThemePatterns =
 		type === PATTERN_TYPES.theme && categoryId === 'uncategorized';

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { pencil } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -30,28 +30,8 @@ export default function SidebarNavigationScreenPattern() {
 	useInitEditedEntityFromURL();
 
 	const patternDetails = usePatternDetails( postType, postId );
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		return !! select( editSiteStore ).getSettings()
-			.supportsTemplatePartsMode;
-	}, [] );
 
-	/**
-	 * This sidebar needs to temporarily accomodate two different "URLs" backpaths:
-	 *
-	 * 1. path = /patterns
-	 *    Block based themes. Also classic themes can access this URL, though it's not linked anywhere.
-	 *
-	 * 2. path = /wp_template_part/all
-	 *    Classic themes with support for block-template-parts. We need to list only Template Parts in this case.
-	 *    The URL is accessible from the Appearance > Template Parts menu.
-	 *
-	 * Depending on whether the theme supports block-template-parts, we go back to Patterns or Template screens.
-	 * This is temporary. We aim to consolidate to /patterns.
-	 */
-	const backPath =
-		isTemplatePartsMode && postType === 'wp_template_part'
-			? { path: '/wp_template_part/all' }
-			: { path: '/patterns' };
+	const backPath = { path: '/patterns' };
 
 	return (
 		<SidebarNavigationScreen

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

@@ -107,20 +107,12 @@ function CategoriesGroup( {
 	);
 }
 
-const EMPTY_ARRAY = [];
 export default function SidebarNavigationScreenPatterns() {
 	const { categoryType, categoryId, path } = getQueryArgs(
 		window.location.href
 	);
-	const isTemplatePartsPath = path === '/wp_template_part/all';
-	const currentCategory =
-		categoryId ||
-		( isTemplatePartsPath
-			? TEMPLATE_PART_ALL_AREAS_CATEGORY
-			: PATTERN_DEFAULT_CATEGORY );
-	const currentType =
-		categoryType ||
-		( isTemplatePartsPath ? TEMPLATE_PART_POST_TYPE : PATTERN_TYPES.theme );
+	const currentCategory = categoryId || PATTERN_DEFAULT_CATEGORY;
+	const currentType = categoryType || PATTERN_TYPES.theme;
 
 	const { templatePartAreas, hasTemplateParts, isLoading } =
 		useTemplatePartAreas();
@@ -145,28 +137,11 @@ export default function SidebarNavigationScreenPatterns() {
 	return (
 		<SidebarNavigationScreen
 			isRoot={ ! isBlockBasedTheme }
-			title={
-				isTemplatePartsPath
-					? __( 'Manage template parts' )
-					: __( 'Patterns' )
-			}
-			description={
-				isTemplatePartsPath
-					? __(
-							'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'
-					  )
-					: __(
-							'Manage what patterns are available when editing the site.'
-					  )
-			}
-			actions={
-				( isBlockBasedTheme || ! isTemplatePartsPath ) && (
-					<AddNewPattern
-						canCreateParts={ isBlockBasedTheme }
-						canCreatePatterns={ ! isTemplatePartsPath }
-					/>
-				)
-			}
+			title={ __( 'Patterns' ) }
+			description={ __(
+				'Manage what patterns are available when editing the site.'
+			) }
+			actions={ <AddNewPattern /> }
 			content={
 				<>
 					{ isLoading && __( 'Loading items…' ) }
@@ -180,11 +155,7 @@ export default function SidebarNavigationScreenPatterns() {
 							<CategoriesGroup
 								path={ path }
 								templatePartAreas={ templatePartAreas }
-								patternCategories={
-									isTemplatePartsPath
-										? EMPTY_ARRAY
-										: patternCategories
-								}
+								patternCategories={ patternCategories }
 								currentCategory={ currentCategory }
 								currentType={ currentType }
 							/>

packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -226,10 +226,6 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 		return { isReady: true, postType: 'wp_template', postId, context };
 	}
 
-	if ( path === '/wp_template_part/all' && postId ) {
-		return { isReady: true, postType: 'wp_template_part', postId, context };
-	}
-
 	if ( postTypesWithoutParentTemplate.includes( postType ) ) {
 		return { isReady: true, postType, postId, context };
 	}

packages/edit-site/src/utils/get-is-list-page.js

@@ -14,9 +14,7 @@ export default function getIsListPage(
 	isMobileViewport
 ) {
 	return (
-		[ '/wp_template', '/wp_template_part/all', '/pages' ].includes(
-			path
-		) ||
+		[ '/wp_template', '/pages' ].includes( path ) ||
 		( path === '/patterns' &&
 			// Don't treat "/patterns" without categoryType and categoryId as a
 			// list page in mobile because the sidebar covers the whole page.