Site Editor: Navigation templates (#25739)

lib/template-loader.php

@@ -255,18 +255,7 @@ function gutenberg_find_template_post_and_parts( $template_type, $template_hiera
 	// See if there is a theme block template with higher priority than the resolved template post.
 	$higher_priority_block_template_path     = null;
 	$higher_priority_block_template_priority = PHP_INT_MAX;
-	$block_template_files                    = glob( get_stylesheet_directory() . '/block-templates/*.html' );
-	$block_template_files                    = is_array( $block_template_files ) ? $block_template_files : array();
-	if ( is_child_theme() ) {
-		$child_block_template_files = glob( get_template_directory() . '/block-templates/*.html' );
-		$child_block_template_files = is_array( $child_block_template_files ) ? $child_block_template_files : array();
-		$block_template_files       = array_merge( $block_template_files, $child_block_template_files );
-	}
-	if ( gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing-demo' ) ) {
-		$demo_block_template_files = glob( dirname( __FILE__ ) . '/demo-block-templates/*.html' );
-		$demo_block_template_files = is_array( $demo_block_template_files ) ? $demo_block_template_files : array();
-		$block_template_files      = array_merge( $block_template_files, $demo_block_template_files );
-	}
+	$block_template_files                    = gutenberg_get_template_paths();
 	foreach ( $block_template_files as $path ) {
 		if ( ! isset( $slug_priorities[ basename( $path, '.html' ) ] ) ) {
 			continue;

lib/templates.php

@@ -5,6 +5,31 @@
  * @package gutenberg
  */
 
+/**
+ * Returns all block template file path of the current theme and its parent theme.
+ * Includes demo block template files if demo experiment is enabled.
+ *
+ * @return array $block_template_files A list of paths to all template files.
+ */
+function gutenberg_get_template_paths() {
+	$block_template_files = glob( get_stylesheet_directory() . '/block-templates/*.html' );
+	$block_template_files = is_array( $block_template_files ) ? $block_template_files : array();
+
+	if ( is_child_theme() ) {
+		$child_block_template_files = glob( get_template_directory() . '/block-templates/*.html' );
+		$child_block_template_files = is_array( $child_block_template_files ) ? $child_block_template_files : array();
+		$block_template_files       = array_merge( $block_template_files, $child_block_template_files );
+	}
+
+	if ( gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing-demo' ) ) {
+		$demo_block_template_files = glob( dirname( __FILE__ ) . '/demo-block-templates/*.html' );
+		$demo_block_template_files = is_array( $demo_block_template_files ) ? $demo_block_template_files : array();
+		$block_template_files      = array_merge( $block_template_files, $demo_block_template_files );
+	}
+
+	return $block_template_files;
+}
+
 /**
  * Registers block editor 'wp_template' post type.
  */
@@ -177,6 +202,13 @@ function filter_rest_wp_template_collection_params( $query_params ) {
  * @return array Filtered $args.
  */
 function filter_rest_wp_template_query( $args, $request ) {
+	// Create auto-drafts for each theme template files.
+	$block_template_files = gutenberg_get_template_paths();
+	foreach ( $block_template_files as $path ) {
+		$template_type = basename( $path, '.html' );
+		gutenberg_find_template_post_and_parts( $template_type, array( $template_type ) );
+	}
+
 	if ( $request['resolved'] ) {
 		$template_ids   = array( 0 ); // Return nothing by default (the 0 is needed for `post__in`).
 		$template_types = $request['slug'] ? $request['slug'] : get_template_types();

packages/e2e-tests/experimental-features.js

@@ -38,13 +38,55 @@ export function useExperimentalFeatures( features ) {
 	afterAll( () => setExperimentalFeaturesState( features, false ) );
 }
 
-export const openNavigation = async () => {
-	const isOpen = !! ( await page.$(
-		'.edit-site-navigation-toggle.is-open'
-	) );
-
-	if ( ! isOpen ) {
-		await page.click( '.edit-site-navigation-toggle__button' );
-		await page.waitForSelector( '.edit-site-navigation-panel' );
-	}
+export const navigationPanel = {
+	async open() {
+		const isOpen = !! ( await page.$(
+			'.edit-site-navigation-toggle.is-open'
+		) );
+
+		if ( ! isOpen ) {
+			await page.click( '.edit-site-navigation-toggle__button' );
+			await page.waitForSelector( '.edit-site-navigation-panel' );
+		}
+	},
+
+	async isRoot() {
+		const isBackToDashboardButtonVisible = !! ( await page.$(
+			'.edit-site-navigation-panel .edit-site-navigation-panel__back-to-dashboard'
+		) );
+
+		return isBackToDashboardButtonVisible;
+	},
+
+	async back() {
+		await page.click( '.components-navigation__back-button' );
+	},
+
+	async navigate( menus ) {
+		if ( ! Array.isArray( menus ) ) {
+			menus = [ menus ];
+		}
+
+		for ( const menu of menus ) {
+			( await this.getItemByText( menu ) ).click();
+		}
+	},
+
+	async backToRoot() {
+		while ( ! ( await this.isRoot() ) ) {
+			await this.back();
+		}
+	},
+
+	async getItemByText( text ) {
+		const selector = `//div[contains(@class, "edit-site-navigation-panel")]//button[contains(., "${ text }")]`;
+		await page.waitForXPath( selector );
+		const [ item ] = await page.$x( selector );
+		return item;
+	},
+
+	async clickItemByText( text ) {
+		const item = await this.getItemByText( text );
+		await item.click();
+	},
 };

packages/e2e-tests/specs/experiments/multi-entity-editing.test.js

@@ -20,7 +20,7 @@ import { addQueryArgs } from '@wordpress/url';
  */
 import {
 	useExperimentalFeatures,
-	openNavigation,
+	navigationPanel,
 } from '../../experimental-features';
 
 const visitSiteEditor = async () => {
@@ -34,12 +34,11 @@ const visitSiteEditor = async () => {
 	);
 };
 
-const getTemplateDropdownElement = async ( itemName ) => {
-	await openNavigation();
-	const selector = `//div[contains(@class, "edit-site-navigation-panel")]//button[contains(., "${ itemName }")]`;
-	await page.waitForXPath( selector );
-	const [ item ] = await page.$x( selector );
-	return item;
+const clickTemplateItem = async ( menus, itemName ) => {
+	await navigationPanel.open();
+	await navigationPanel.backToRoot();
+	await navigationPanel.navigate( menus );
+	await navigationPanel.clickItemByText( itemName );
 };
 
 const createTemplatePart = async (
@@ -169,17 +168,15 @@ describe( 'Multi-entity editor states', () => {
 	} );
 
 	it( 'should not dirty an entity by switching to it in the template dropdown', async () => {
-		const templatePartButton = await getTemplateDropdownElement( 'header' );
-		await templatePartButton.click();
+		await clickTemplateItem( 'Template parts', 'header' );
 
 		// Wait for blocks to load.
 		await page.waitForSelector( '.wp-block' );
 		expect( await isEntityDirty( 'header' ) ).toBe( false );
 		expect( await isEntityDirty( 'front-page' ) ).toBe( false );
 
 		// Switch back and make sure it is still clean.
-		const templateButton = await getTemplateDropdownElement( 'front-page' );
-		await templateButton.click();
+		await clickTemplateItem( 'Templates', 'Front page' );
 		await page.waitForSelector( '.wp-block' );
 		expect( await isEntityDirty( 'header' ) ).toBe( false );
 		expect( await isEntityDirty( 'front-page' ) ).toBe( false );

packages/e2e-tests/specs/experiments/multi-entity-saving.test.js

@@ -15,7 +15,7 @@ import { addQueryArgs } from '@wordpress/url';
  */
 import {
 	useExperimentalFeatures,
-	openNavigation,
+	navigationPanel,
 } from '../../experimental-features';
 
 describe( 'Multi-entity save flow', () => {
@@ -221,7 +221,6 @@ describe( 'Multi-entity save flow', () => {
 
 	describe( 'Site Editor', () => {
 		// Selectors - Site editor specific.
-		const demoTemplateSelector = '//button[contains(., "front-page")]';
 		const saveSiteSelector = '.edit-site-save-button__button';
 		const activeSaveSiteSelector = `${ saveSiteSelector }[aria-disabled=false]`;
 		const disabledSaveSiteSelector = `${ saveSiteSelector }[aria-disabled=true]`;
@@ -235,11 +234,10 @@ describe( 'Multi-entity save flow', () => {
 			await visitAdminPage( 'admin.php', query );
 
 			// Ensure we are on 'front-page' demo template.
-			await openNavigation();
-			const demoTemplateButton = await page.waitForXPath(
-				demoTemplateSelector
-			);
-			await demoTemplateButton.click();
+			await navigationPanel.open();
+			await navigationPanel.backToRoot();
+			await navigationPanel.navigate( 'Templates' );
+			await navigationPanel.clickItemByText( 'Front page' );
 
 			// Insert a new template part placeholder.
 			await insertBlock( 'Template Part' );

packages/e2e-tests/specs/experiments/template-part.test.js

@@ -15,7 +15,7 @@ import { addQueryArgs } from '@wordpress/url';
  */
 import {
 	useExperimentalFeatures,
-	openNavigation,
+	navigationPanel,
 } from '../../experimental-features';
 
 describe( 'Template Part', () => {
@@ -46,11 +46,10 @@ describe( 'Template Part', () => {
 
 		it( 'Should load customizations when in a template even if only the slug and theme attributes are set.', async () => {
 			// Switch to editing the header template part.
-			await openNavigation();
-			const switchToHeaderTemplatePartButton = await page.waitForXPath(
-				'//button[contains(text(), "header")]'
-			);
-			await switchToHeaderTemplatePartButton.click();
+			await navigationPanel.open();
+			await navigationPanel.backToRoot();
+			await navigationPanel.navigate( 'Template parts' );
+			await navigationPanel.clickItemByText( 'header' );
 
 			// Edit it.
 			await insertBlock( 'Paragraph' );
@@ -64,11 +63,10 @@ describe( 'Template Part', () => {
 			);
 
 			// Switch back to the front page template.
-			await openNavigation();
-			const [ switchToFrontPageTemplateButton ] = await page.$x(
-				'//button[contains(text(), "front-page")]'
-			);
-			await switchToFrontPageTemplateButton.click();
+			await navigationPanel.open();
+			await navigationPanel.backToRoot();
+			await navigationPanel.navigate( 'Templates' );
+			await navigationPanel.clickItemByText( 'Front page' );
 
 			// Verify that the header template part is updated.
 			const [ headerTemplatePart ] = await page.$x(

packages/edit-site/src/components/left-sidebar/navigation-panel/constants.js

@@ -0,0 +1,64 @@
+export const TEMPLATES_DEFAULT_DETAILS = {
+	// General
+	'front-page': {
+		title: 'Front page',
+		description: '',
+	},
+	archive: {
+		title: 'Archive',
+		description:
+			'Displays the content lists when no other template is found',
+	},
+	single: {
+		title: 'Single',
+		description: 'Displays the content of a single post',
+	},
+	singular: {
+		title: 'Singular',
+		description: 'Displays the content of a single page',
+	},
+	index: {
+		title: 'Default (index)',
+		description: 'Displays the content of a single page',
+	},
+	search: {
+		title: 'Search results',
+		description: '',
+	},
+	'404': {
+		title: '404',
+		description: 'Displayed when a non-existing page requested',
+	},
+
+	// Pages
+	page: {
+		title: 'Default (Page)',
+		description: 'Displays the content of a single page',
+	},
+
+	// Posts
+	home: {
+		title: 'Posts (home)',
+		description: 'Displayed on your homepage',
+	},
+	'archive-post': {
+		title: 'Default (Post archive)',
+		description: 'Displays a list of posts',
+	},
+	'single-post': {
+		title: 'Default (Single post)',
+		description: 'Displays the content of a single post',
+	},
+};
+
+export const TEMPLATES_GENERAL = [
+	'front-page',
+	'archive',
+	'single',
+	'singular',
+	'index',
+	'search',
+	'404',
+];
+
+export const TEMPLATES_POSTS = [ 'single-post', 'archive-post', 'home' ];