From 21ba2d8eb98f4a83b786b2350d4ee1402f12711c Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 23 Feb 2023 16:56:29 +0400
Subject: [PATCH] Site Editor: Fix routing for Classic themes using block-based
 template 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             | 35 +++++++++++++
 lib/load.php                                  |  1 +
 .../index.js                                  | 12 ++++-
 .../site-editor/template-parts-mode.spec.js   | 51 +++++++++++++++++++
 .../emptyhybrid/functions.php                 | 25 +++++++++
 .../emptyhybrid/index.php                     | 15 ++++++
 .../emptyhybrid/parts/header.html             |  3 ++
 .../emptyhybrid/style.css                     | 15 ++++++
 8 files changed, 156 insertions(+), 1 deletion(-)
 create mode 100644 lib/compat/wordpress-6.2/menu.php
 create mode 100644 test/e2e/specs/site-editor/template-parts-mode.spec.js
 create mode 100644 test/gutenberg-test-themes/emptyhybrid/functions.php
 create mode 100644 test/gutenberg-test-themes/emptyhybrid/index.php
 create mode 100644 test/gutenberg-test-themes/emptyhybrid/parts/header.html
 create mode 100644 test/gutenberg-test-themes/emptyhybrid/style.css

diff --git a/lib/compat/wordpress-6.2/menu.php b/lib/compat/wordpress-6.2/menu.php
new file mode 100644
index 00000000000000..e0d582ad3dc988
--- /dev/null
+++ b/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' );
diff --git a/lib/load.php b/lib/load.php
index 481956240ef7c6..cf752d4c4290ab 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -89,6 +89,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';
 
 // Experimental features.
 remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
index d096709261433f..28e31727d9b533 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
+++ b/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',
@@ -66,11 +73,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={ {
diff --git a/test/e2e/specs/site-editor/template-parts-mode.spec.js b/test/e2e/specs/site-editor/template-parts-mode.spec.js
new file mode 100644
index 00000000000000..a8945794ae6a8d
--- /dev/null
+++ b/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();
+	} );
+} );
diff --git a/test/gutenberg-test-themes/emptyhybrid/functions.php b/test/gutenberg-test-themes/emptyhybrid/functions.php
new file mode 100644
index 00000000000000..6a7da4c918c732
--- /dev/null
+++ b/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' );
diff --git a/test/gutenberg-test-themes/emptyhybrid/index.php b/test/gutenberg-test-themes/emptyhybrid/index.php
new file mode 100644
index 00000000000000..d705808546827b
--- /dev/null
+++ b/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>
diff --git a/test/gutenberg-test-themes/emptyhybrid/parts/header.html b/test/gutenberg-test-themes/emptyhybrid/parts/header.html
new file mode 100644
index 00000000000000..388c223268a37a
--- /dev/null
+++ b/test/gutenberg-test-themes/emptyhybrid/parts/header.html
@@ -0,0 +1,3 @@
+<!-- wp:site-title /-->
+
+<!-- wp:site-tagline /-->
\ No newline at end of file
diff --git a/test/gutenberg-test-themes/emptyhybrid/style.css b/test/gutenberg-test-themes/emptyhybrid/style.css
new file mode 100644
index 00000000000000..956b544b86f7b3
--- /dev/null
+++ b/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.
+*/