Site Editor: Fix routing for Classic themes using block-based templat…

…e parts (#48343)

* Site Editor: Fix routing for Classic themes using block-based template parts
* Add basic e2e tests
* Update theme stylesheet name

lib/compat/wordpress-6.2/menu.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * Admin menu overrides for WP 6.2.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Updates "Template Parts" menu URL to include `path` query argument.
+ *
+ * Note: Remove when the minimum required WP version is 6.2.
+ * No need to backport in core. Changes are applied in wp-admin/menu.php.
+ */
+function gutenberg_update_template_parts_menu_url() {
+	if ( wp_is_block_theme() ) {
+		return;
+	}
+
+	if ( ! current_theme_supports( 'block-template-parts' ) ) {
+		return;
+	}
+
+	global $submenu;
+	if ( ! isset( $submenu['themes.php'] ) ) {
+		return;
+	}
+
+	foreach ( $submenu['themes.php'] as $index => $menu_item ) {
+		if ( str_contains( $menu_item[2], 'site-editor.php?postType=wp_template_part' ) && ! str_contains( $menu_item[2], 'path=' ) ) {
+			$submenu['themes.php'][ $index ][2] = 'site-editor.php?postType=wp_template_part&path=/wp_template_part/all';
+			break;
+		}
+	}
+}
+add_action( 'admin_menu', 'gutenberg_update_template_parts_menu_url' );

lib/load.php

@@ -91,6 +91,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.2/block-editor-settings.php';
 require __DIR__ . '/compat/wordpress-6.2/theme.php';
 require __DIR__ . '/compat/wordpress-6.2/widgets.php';
+require __DIR__ . '/compat/wordpress-6.2/menu.php';
 
 if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
 	require __DIR__ . '/compat/wordpress-6.2/html-api/class-wp-html-attribute-token.php';

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

@@ -8,6 +8,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -18,6 +19,7 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import AddNewTemplate from '../add-new-template';
+import { store as editSiteStore } from '../../store';
 
 const config = {
 	wp_template: {
@@ -51,6 +53,11 @@ export default function SidebarNavigationScreenTemplates() {
 		params: { postType },
 	} = useNavigator();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
 
 	const { records: templates, isResolving: isLoading } = useEntityRecords(
 		'postType',
@@ -64,11 +71,14 @@ export default function SidebarNavigationScreenTemplates() {
 		path: '/' + postType + '/all',
 	} );
 
+	const canCreate = ! isMobileViewport && ! isTemplatePartsMode;
+
 	return (
 		<SidebarNavigationScreen
+			isRoot={ isTemplatePartsMode }
 			title={ config[ postType ].labels.title }
 			actions={
-				! isMobileViewport && (
+				canCreate && (
 					<AddNewTemplate
 						templateType={ postType }
 						toggleProps={ {

test/e2e/specs/site-editor/template-parts-mode.spec.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Template Parts for Classic themes', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptyhybrid' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'can access template parts list page', async ( { admin, page } ) => {
+		await admin.visitAdminPage(
+			'site-editor.php',
+			'postType=wp_template_part&path=/wp_template_part/all'
+		);
+
+		await expect(
+			page.getByRole( 'table' ).getByRole( 'link', { name: 'header' } )
+		).toBeVisible();
+	} );
+
+	test( 'can view a template part', async ( { admin, editor, page } ) => {
+		await admin.visitAdminPage(
+			'site-editor.php',
+			'postType=wp_template_part&path=/wp_template_part/all'
+		);
+
+		const templatePart = page
+			.getByRole( 'table' )
+			.getByRole( 'link', { name: 'header' } );
+
+		await expect( templatePart ).toBeVisible();
+		await templatePart.click();
+
+		await expect(
+			page.getByRole( 'region', { name: 'Editor content' } )
+		).toBeVisible();
+
+		await editor.canvas.click( 'body' );
+
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Site Title',
+			} )
+		).toBeVisible();
+	} );
+} );

test/gutenberg-test-themes/emptyhybrid/functions.php

@@ -0,0 +1,25 @@
+<?php
+
+if ( ! function_exists( 'emptyhybrid_support' ) ) :
+	function emptyhybrid_support() {
+
+		// Adding support for core block visual styles.
+		add_theme_support( 'wp-block-styles' );
+
+		// Enqueue editor styles.
+		add_editor_style( 'style.css' );
+
+		// Enable block-based template parts support.
+		add_theme_support( 'block-template-parts' );
+	}
+	add_action( 'after_setup_theme', 'emptyhybrid_support' );
+endif;
+
+/**
+ * Enqueue scripts and styles.
+ */
+function emptyhybrid_scripts() {
+	// Enqueue theme stylesheet.
+	wp_enqueue_style( 'emptyhybrid-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
+}
+add_action( 'wp_enqueue_scripts', 'emptyhybrid_scripts' );

test/gutenberg-test-themes/emptyhybrid/index.php

@@ -0,0 +1,15 @@
+<!doctype html>
+<html <?php language_attributes(); ?>>
+<head>
+	<meta charset="<?php bloginfo( 'charset' ); ?>" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<?php wp_head(); ?>
+</head>
+
+<body <?php body_class(); ?>>
+<?php wp_body_open(); ?>
+<div id="page" class="site">
+	<?php block_template_part( 'header' ); ?>
+</div>
+</body>
+</html>

test/gutenberg-test-themes/emptyhybrid/parts/header.html

@@ -0,0 +1,3 @@
+<!-- wp:site-title /-->
+
+<!-- wp:site-tagline /-->

test/gutenberg-test-themes/emptyhybrid/style.css

@@ -0,0 +1,15 @@
+/*
+Theme Name: Emptyhybrid
+Theme URI: https://github.com/wordpress/gutenberg/
+Author: the WordPress team
+Description: The testing hybrid theme.
+Requires at least: 6.0
+Tested up to: 6.2
+Requires PHP: 5.6
+Version: 1.0
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: Emptyhybrid
+Emptytheme WordPress Theme, (C) 2021 WordPress.org
+Emptytheme is distributed under the terms of the GNU GPL.
+*/