Allow creating custom block templates in classic themes

docs/how-to-guides/themes/block-based-themes.md

@@ -124,6 +124,16 @@ As we're still early in the process, the number of blocks specifically dedicated
 
 One of the most important aspects of themes (if not the most important) is the styling. While initially you'll be able to provide styles and enqueue them using the same hooks themes have always used, the [Global Styles](/docs/how-to-guides/themes/theme-json.md) effort will provide a scaffolding for adding many theme styles in the future.
 
+## Classic Themes
+
+Users of classic themes can also build custom block templates and use theme in their Pages and Custom Post Types that supports Page Templates.
+
+Theme authors can opt-out of this feature by removing the `block-templates` theme support in their `functions.php` file.
+
+```php
+remove_theme_support( 'block-templates' );
+```
+
 ## Resources
 
 -   [Full Site Editing](https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Full%20Site%20Editing) label.

lib/client-assets.php

@@ -646,7 +646,7 @@ function gutenberg_extend_block_editor_styles( $settings ) {
 	}
 
 	// Remove the default font editor styles for FSE themes.
-	if ( gutenberg_is_fse_theme() ) {
+	if ( gutenberg_supports_block_templates() ) {
 		foreach ( $settings['styles'] as $j => $style ) {
 			if ( 0 === strpos( $style['css'], 'body { font-family:' ) ) {
 				unset( $settings['styles'][ $j ] );
@@ -666,7 +666,7 @@ function gutenberg_extend_block_editor_styles( $settings ) {
  * @return array Filtered editor settings.
  */
 function gutenberg_extend_block_editor_settings_with_fse_theme_flag( $settings ) {
-	$settings['isFSETheme'] = gutenberg_is_fse_theme();
+	$settings['supportsTemplateMode'] = gutenberg_supports_block_templates();
 
 	// Enable the new layout options for themes with a theme.json file.
 	$settings['supportsLayout'] = WP_Theme_JSON_Resolver::theme_has_support();

lib/compat.php

@@ -14,7 +14,7 @@
  * @return bool
  */
 function gutenberg_should_load_separate_block_assets() {
-	$load_separate_styles = gutenberg_is_fse_theme();
+	$load_separate_styles = gutenberg_supports_block_templates();
 	/**
 	 * Determine if separate styles will be loaded for blocks on-render or not.
 	 *

lib/editor-settings.php

@@ -39,7 +39,7 @@ function gutenberg_get_common_block_editor_settings() {
 	};
 
 	$settings = array(
-		'__unstableEnableFullSiteEditingBlocks' => gutenberg_is_fse_theme(),
+		'__unstableEnableFullSiteEditingBlocks' => gutenberg_supports_block_templates(),
 		'disableCustomColors'                   => get_theme_support( 'disable-custom-colors' ),
 		'disableCustomFontSizes'                => get_theme_support( 'disable-custom-font-sizes' ),
 		'disableCustomGradients'                => get_theme_support( 'disable-custom-gradients' ),
@@ -81,7 +81,7 @@ function gutenberg_extend_post_editor_settings( $settings ) {
 	$image_sizes        = wp_list_pluck( $settings['imageSizes'], 'slug' );
 
 	$settings['imageDefaultSize']                      = in_array( $image_default_size, $image_sizes, true ) ? $image_default_size : 'large';
-	$settings['__unstableEnableFullSiteEditingBlocks'] = gutenberg_is_fse_theme();
+	$settings['__unstableEnableFullSiteEditingBlocks'] = gutenberg_supports_block_templates();
 
 	return $settings;
 }

lib/full-site-editing/full-site-editing.php

@@ -14,6 +14,15 @@ function gutenberg_is_fse_theme() {
 	return is_readable( get_stylesheet_directory() . '/block-templates/index.html' );
 }
 
+/**
+ * Returns whether the current theme is FSE-enabled or not.
+ *
+ * @return boolean Whether the current theme is FSE-enabled or not.
+ */
+function gutenberg_supports_block_templates() {
+	return gutenberg_is_fse_theme() || current_theme_supports( 'block-templates' );
+}
+
 /**
  * Show a notice when a Full Site Editing theme is used.
  */

lib/full-site-editing/page-templates.php

@@ -15,22 +15,16 @@
  * @return array (Maybe) modified page templates array.
  */
 function gutenberg_load_block_page_templates( $templates, $theme, $post, $post_type ) {
-	if ( ! gutenberg_is_fse_theme() ) {
+	if ( ! gutenberg_supports_block_templates() ) {
 		return $templates;
 	}
 
-	$data             = WP_Theme_JSON_Resolver::get_theme_data()->get_custom_templates();
-	$custom_templates = array();
-	if ( isset( $data ) ) {
-		foreach ( $data  as $key => $template ) {
-			if ( ( ! isset( $template['postTypes'] ) && 'page' === $post_type ) ||
-				( isset( $template['postTypes'] ) && in_array( $post_type, $template['postTypes'], true ) )
-			) {
-				$custom_templates[ $key ] = $template['title'];
-			}
-		}
+	$block_templates = gutenberg_get_block_templates( array(), 'wp_template' );
+	foreach ( $block_templates as $template ) {
+		// TODO: exclude templates that are not concerned by the current post type.
+		$templates[ $template->slug ] = $template->title;
 	}
 
-	return $custom_templates;
+	return $templates;
 }
 add_filter( 'theme_templates', 'gutenberg_load_block_page_templates', 10, 4 );

lib/full-site-editing/template-loader.php

@@ -9,7 +9,7 @@
  * Adds necessary filters to use 'wp_template' posts instead of theme template files.
  */
 function gutenberg_add_template_loader_filters() {
-	if ( ! gutenberg_is_fse_theme() ) {
+	if ( ! gutenberg_supports_block_templates() ) {
 		return;
 	}
 
@@ -71,9 +71,18 @@ function gutenberg_override_query_template( $template, $type, array $templates =
 	foreach ( $templates as $template_item ) {
 		$template_item_slug = gutenberg_strip_php_suffix( $template_item );
 
+		// Is this a custom template?
+		// This check should be removed when merged in core.
+		// Instead, wp_templates should be considered valid in locate_template.
+		$is_custom_template = 0 === strpos( $current_block_template_slug, 'wp-custom-template-' );
+
 		// Don't override the template if we find a template matching the slug we look for
 		// and which does not match a block template slug.
-		if ( $current_template_slug !== $current_block_template_slug && $current_template_slug === $template_item_slug ) {
+		if (
+			! $is_custom_template &&
+			$current_template_slug !== $current_block_template_slug &&
+			$current_template_slug === $template_item_slug
+		) {
 			return $template;
 		}
 	}

lib/full-site-editing/template-parts.php

@@ -9,7 +9,7 @@
  * Registers block editor 'wp_template_part' post type.
  */
 function gutenberg_register_template_part_post_type() {
-	if ( ! gutenberg_is_fse_theme() ) {
+	if ( ! gutenberg_supports_block_templates() ) {
 		return;
 	}
 
@@ -64,7 +64,7 @@ function gutenberg_register_template_part_post_type() {
  * Registers the 'wp_template_part_area' taxonomy.
  */
 function gutenberg_register_wp_template_part_area_taxonomy() {
-	if ( ! gutenberg_is_fse_theme() ) {
+	if ( ! gutenberg_supports_block_templates() ) {
 		return;
 	}
 
@@ -107,7 +107,7 @@ function gutenberg_register_wp_template_part_area_taxonomy() {
  * Fixes the label of the 'wp_template_part' admin menu entry.
  */
 function gutenberg_fix_template_part_admin_menu_entry() {
-	if ( ! gutenberg_is_fse_theme() ) {
+	if ( ! gutenberg_supports_block_templates() ) {
 		return;
 	}
 

lib/full-site-editing/templates.php

@@ -28,7 +28,7 @@ function gutenberg_get_template_paths() {
  * Registers block editor 'wp_template' post type.
  */
 function gutenberg_register_template_post_type() {
-	if ( ! gutenberg_is_fse_theme() ) {
+	if ( ! gutenberg_supports_block_templates() ) {
 		return;
 	}
 
@@ -84,7 +84,7 @@ function gutenberg_register_template_post_type() {
  * Registers block editor 'wp_theme' taxonomy.
  */
 function gutenberg_register_wp_theme_taxonomy() {
-	if ( ! gutenberg_is_fse_theme() ) {
+	if ( ! gutenberg_supports_block_templates() ) {
 		return;
 	}
 
@@ -139,7 +139,7 @@ function gutenberg_grant_template_caps( array $allcaps ) {
  * Fixes the label of the 'wp_template' admin menu entry.
  */
 function gutenberg_fix_template_admin_menu_entry() {
-	if ( ! gutenberg_is_fse_theme() ) {
+	if ( ! gutenberg_supports_block_templates() ) {
 		return;
 	}
 	global $submenu;

lib/global-styles.php

@@ -198,7 +198,7 @@ function gutenberg_experimental_global_styles_settings( $settings ) {
 	$origin = 'theme';
 	if (
 		WP_Theme_JSON_Resolver::theme_has_support() &&
-		gutenberg_is_fse_theme()
+		gutenberg_supports_block_templates()
 	) {
 		// Only lookup for the user data if we need it.
 		$origin = 'user';
@@ -224,7 +224,7 @@ function gutenberg_experimental_global_styles_settings( $settings ) {
 		function_exists( 'gutenberg_is_edit_site_page' ) &&
 		gutenberg_is_edit_site_page( $screen->id ) &&
 		WP_Theme_JSON_Resolver::theme_has_support() &&
-		gutenberg_is_fse_theme()
+		gutenberg_supports_block_templates()
 	) {
 		$user_cpt_id = WP_Theme_JSON_Resolver::get_user_custom_post_type_id();
 		$base_styles = WP_Theme_JSON_Resolver::get_merged_data( $theme_support_data, 'theme' )->get_raw_data();

lib/init.php

@@ -177,3 +177,4 @@ function register_site_icon_url( $response ) {
 add_filter( 'rest_index', 'register_site_icon_url' );
 
 add_theme_support( 'widgets-block-editor' );
+add_theme_support( 'block-templates' );

packages/core-data/src/resolvers.js

@@ -385,13 +385,18 @@ export function* __experimentalGetTemplateForLink( link ) {
 	// Ideally this should be using an apiFetch call
 	// We could potentially do so by adding a "filter" to the `wp_template` end point.
 	// Also it seems the returned object is not a regular REST API post type.
-	const template = yield regularFetch(
-		addQueryArgs( link, {
-			'_wp-find-template': true,
-		} )
-	);
+	let template;
+	try {
+		template = yield regularFetch(
+			addQueryArgs( link, {
+				'_wp-find-template': true,
+			} )
+		);
+	} catch ( e ) {
+		// For non-FSE themes, it is possible that this request returns an error.
+	}
 
-	if ( template === null ) {
+	if ( ! template ) {
 		return;
 	}
 
@@ -410,3 +415,12 @@ export function* __experimentalGetTemplateForLink( link ) {
 		} );
 	}
 }
+
+__experimentalGetTemplateForLink.shouldInvalidate = ( action ) => {
+	return (
+		( action.type === 'RECEIVE_ITEMS' || action.type === 'REMOVE_ITEMS' ) &&
+		action.invalidateCache &&
+		action.kind === 'postType' &&
+		action.name === 'wp_template'
+	);
+};

packages/e2e-test-utils/src/preview.js

@@ -14,6 +14,9 @@ import { last } from 'lodash';
 export async function openPreviewPage( editorPage = page ) {
 	let openTabs = await browser.pages();
 	const expectedTabsCount = openTabs.length + 1;
+	await page.waitForSelector(
+		'.block-editor-post-preview__button-toggle:not([disabled])'
+	);
 	await editorPage.click( '.block-editor-post-preview__button-toggle' );
 	await editorPage.waitForSelector(
 		'.edit-post-header-preview__button-external'

packages/e2e-tests/specs/experiments/__snapshots__/post-editor-template-mode.test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Post Editor Template mode Allow creating custom block templates in classic themes 1`] = `
+"<h1 class=\\"wp-block-site-title\\"><a href=\\"http://localhost:8889\\" rel=\\"home\\">gutenberg</a></h1>
+
+<p class=\\"wp-block-site-tagline\\">Just another WordPress site</p>
+
+
+<hr class=\\"wp-block-separator\\">
+
+
+<h2 class=\\"wp-block-post-title\\">Another FSE Post</h2>
+
+<div class=\\"entry-content wp-block-post-content\\">
+<p>Hello World</p>
+</div>
+
+
+<p>Just a random paragraph added to the template</p>
+"
+`;

packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js

@@ -13,7 +13,6 @@ import {
 
 describe( 'Post Editor Template mode', () => {
 	beforeAll( async () => {
-		await activateTheme( 'tt1-blocks' );
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template_part' );
 	} );
@@ -22,11 +21,9 @@ describe( 'Post Editor Template mode', () => {
 		await activateTheme( 'twentytwentyone' );
 	} );
 
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
 	it( 'Allow to switch to template mode, edit the template and check the result', async () => {
+		await activateTheme( 'tt1-blocks' );
+		await createNewPost();
 		// Create a random post.
 		await page.type( '.editor-post-title__input', 'Just an FSE Post' );
 		await page.keyboard.press( 'Enter' );
@@ -45,9 +42,9 @@ describe( 'Post Editor Template mode', () => {
 
 		// Switch to template mode.
 		await openDocumentSettingsSidebar();
-		const switchLink = await page.waitForSelector(
-			'.edit-post-post-template button'
-		);
+		const editTemplateXPath =
+			"//*[contains(@class, 'edit-post-post-template__actions')]//button[contains(text(), 'Edit')]";
+		const switchLink = await page.waitForXPath( editTemplateXPath );
 		await switchLink.click();
 
 		// Check that we switched properly to edit mode.
@@ -82,4 +79,68 @@ describe( 'Post Editor Template mode', () => {
 			'//p[contains(text(), "Just a random paragraph added to the template")]'
 		);
 	} );
+
+	it( 'Allow creating custom block templates in classic themes', async () => {
+		await activateTheme( 'twentytwentyone' );
+		await createNewPost();
+		// Create a random post.
+		await page.type( '.editor-post-title__input', 'Another FSE Post' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Hello World' );
+
+		// Unselect the blocks.
+		await page.evaluate( () => {
+			wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
+		} );
+
+		// Save the post
+		// Saving shouldn't be necessary but unfortunately,
+		// there's a template resolution bug forcing us to do so.
+		await saveDraft();
+		await page.reload();
+
+		// Create a new custom template.
+		await openDocumentSettingsSidebar();
+		const newTemplateXPath =
+			"//*[contains(@class, 'edit-post-post-template__actions')]//button[contains(text(), 'New')]";
+		const newButton = await page.waitForXPath( newTemplateXPath );
+		await newButton.click();
+
+		// Fill the template title and submit.
+		const templateNameInputSelector =
+			'.edit-post-post-template__modal .components-text-control__input';
+		await page.click( templateNameInputSelector );
+		await page.keyboard.type( 'Blank Template' );
+		await page.keyboard.press( 'Enter' );
+
+		// Check that we switched properly to edit mode.
+		await page.waitForXPath(
+			'//*[contains(@class, "components-snackbar")]/*[text()="Custom template created. You\'re in template mode now."]'
+		);
+
+		// Edit the template
+		await insertBlock( 'Paragraph' );
+		await page.keyboard.type(
+			'Just a random paragraph added to the template'
+		);
+
+		// Save changes
+		const doneButton = await page.waitForXPath(
+			`//button[contains(text(), 'Apply')]`
+		);
+		await doneButton.click();
+		const saveButton = await page.waitForXPath(
+			`//div[contains(@class, "entities-saved-states__panel-header")]/button[contains(text(), 'Save')]`
+		);
+		await saveButton.click();
+
+		// Preview changes
+		const previewPage = await openPreviewPage();
+		await previewPage.waitForSelector( '.wp-site-blocks' );
+		const content = await previewPage.evaluate(
+			() => document.querySelector( '.wp-site-blocks' ).innerHTML
+		);
+
+		expect( content ).toMatchSnapshot();
+	} );
 } );