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,11 @@ export function useAdminNavigationCommands() {
 		label: __( 'Patterns' ),
 		icon: symbol,
 		callback: ( { close } ) => {
-			if ( isTemplatesAccessible && isBlockBasedTheme ) {
+			// The site editor and templates both check whether the user
+			// can read templates. We can leverage that here and this
+			// command links to the classic dashboard manage patterns page
+			// 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

@@ -42,7 +42,6 @@ import {
 	LAYOUT_LIST,
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
-	TEMPLATE_PART_ALL_AREAS_CATEGORY,
 	PATTERN_SYNC_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
 	OPERATOR_IS,
@@ -252,18 +251,10 @@ function Title( { item, categoryId } ) {
 
 export default function DataviewsPatterns() {
 	const {
-		params: { categoryType, categoryId: categoryIdFromURL, path },
+		params: { categoryType, categoryId: categoryIdFromURL },
 	} = useLocation();
-	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 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,31 +30,11 @@ 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 = {
 		categoryId,
 		categoryType,
-		path:
-			isTemplatePartsMode && postType === 'wp_template_part'
-				? '/wp_template_part/all'
-				: '/patterns',
+		path: '/patterns',
 	};
 
 	return (

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

@@ -110,20 +110,12 @@ function CategoriesGroup( {
 	);
 }
 
-const EMPTY_ARRAY = [];
 export default function SidebarNavigationScreenPatterns() {
 	const {
 		params: { categoryType, categoryId, path },
 	} = useLocation();
-	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();
@@ -148,28 +140,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…' ) }
@@ -183,11 +158,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/patterns/src/components/patterns-manage-button.js

@@ -18,11 +18,10 @@ import { unlock } from '../lock-unlock';
 function PatternsManageButton( { clientId } ) {
 	const { canRemove, isVisible, managePatternsUrl } = useSelect(
 		( select ) => {
-			const { getBlock, canRemoveBlock, getBlockCount, getSettings } =
+			const { getBlock, canRemoveBlock, getBlockCount } =
 				select( blockEditorStore );
 			const { canUser } = select( coreStore );
 			const reusableBlock = getBlock( clientId );
-			const isBlockTheme = getSettings().__unstableIsBlockBasedTheme;
 
 			return {
 				canRemove: canRemoveBlock( clientId ),
@@ -38,14 +37,13 @@ function PatternsManageButton( { clientId } ) {
 				// 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.
-				managePatternsUrl:
-					isBlockTheme && canUser( 'read', 'templates' )
-						? addQueryArgs( 'site-editor.php', {
-								path: '/patterns',
-						  } )
-						: addQueryArgs( 'edit.php', {
-								post_type: 'wp_block',
-						  } ),
+				managePatternsUrl: canUser( 'read', 'templates' )
+					? addQueryArgs( 'site-editor.php', {
+							path: '/patterns',
+					  } )
+					: addQueryArgs( 'edit.php', {
+							post_type: 'wp_block',
+					  } ),
 			};
 		},
 		[ clientId ]