Edit Site: Add multiple template loading (#19141)

* Template Loader: Don't capitalize template post titles. * Templates: Bypass slug deduplication. * Lib: Load all available templates in the site editor. * Edit Site: Make sure template title is set when publishing. * Edit Site: Implement template switcher component. * Edit Site: Add a sidebar slot/fill for templates. * Edit Site: Implement template switching. * Edit Site: Add component for adding templates. * Edit Site: Implement template adding in the sidebar. * Edit Site: Change save text from "Customize" to "Update Design". * Edit Site: Keep track of template part IDs and load them in the site editor. * Edit Site: Refactor template switcher to be a dropdown menu and allow switching to template parts. * Edit Site: Move template switcher to the header. * Edit Site: Show active choice in template switcher. * Edit Site: Move template creation to the template switcher. * Edit Site: Switch to new template after creation. * Edit Site: Move template switcher to the left. * Edit Site: Fix header position. * Edit Site: Fix template creation padding. * Edit Site: Remove unnecessary class name. * Edit Site: Remove template switcher padding. * Edit Site: Add theme exporter. * Edit Site: Mark customized templates and template parts. * Edit Site: Move theme exporter into a header dropdown. * Edit Site: Rotate more-menu icon. * Edit Site: Update theme exporter label. * Edit Site Page: Fix comment typo. * Template Loader: Add API for finding the current template for a given path. * Edit Site: Enable link viewer template navigation. * Edit Site: Add block navigation and tool selector. * Edit Site: Fix template part placeholder preview style conflicts. * Template Loader: Fix template part post ID reference. * Edit Site: Use `useEntityBlockEditor`. * Template Loader: Dedupe resolved templates and template parts. * Edit Site: Remove theme exporter. * Fix linting and snapshots.
WordPress · Feb 21, 2020 · 320f460 · 320f460
1 parent 2f85f89
commit 320f460
Show file tree

Hide file tree

Showing 20 changed files with 667 additions and 88 deletions.
diff --git a/lib/demo-block-template-parts/header.html b/lib/demo-block-template-parts/header.html
@@ -0,0 +1,3 @@
+<!-- wp:paragraph -->
+<p>Header Template Part</p>
+<!-- /wp:paragraph -->
diff --git a/lib/demo-block-templates/front-page.html b/lib/demo-block-templates/front-page.html
@@ -1,3 +1,4 @@
+<!-- wp:template-part {"slug":"header","theme":"twentytwenty"} /-->
 <!-- wp:columns {"align":"wide"} -->
 <div class="wp-block-columns alignwide">
 	<!-- wp:column -->

diff --git a/lib/edit-site-page.php b/lib/edit-site-page.php
@@ -28,7 +28,12 @@ class="edit-site"
  * @param string $hook Page.
  */
 function gutenberg_edit_site_init( $hook ) {
-	global $_wp_current_template_id;
+	global
+		$_wp_current_template_id,
+		$_wp_current_template_name,
+		$_wp_current_template_content,
+		$_wp_current_template_hierarchy,
+		$_wp_current_template_part_ids;
 	if ( 'gutenberg_page_gutenberg-edit-site' !== $hook ) {
 		return;
 	}
@@ -74,11 +79,53 @@ function gutenberg_edit_site_init( $hook ) {
 		$settings['fontSizes'] = $font_sizes;
 	}
 
-	// Get root template by trigerring `./template-loader.php`'s logic.
+	// Get all templates by triggering `./template-loader.php`'s logic.
+	$template_getters  = array(
+		'get_embed_template',
+		'get_404_template',
+		'get_search_template',
+		'get_home_template',
+		'get_privacy_policy_template',
+		'get_post_type_archive_template',
+		'get_taxonomy_template',
+		'get_attachment_template',
+		'get_single_template',
+		'get_page_template',
+		'get_singular_template',
+		'get_category_template',
+		'get_tag_template',
+		'get_author_template',
+		'get_date_template',
+		'get_archive_template',
+	);
+	$template_ids      = array();
+	$template_part_ids = array();
+	foreach ( $template_getters as $template_getter ) {
+		call_user_func( $template_getter );
+		apply_filters( 'template_include', null );
+		if ( isset( $_wp_current_template_id ) ) {
+			$template_ids[ $_wp_current_template_name ] = $_wp_current_template_id;
+		}
+		if ( isset( $_wp_current_template_part_ids ) ) {
+			$template_part_ids = $template_part_ids + $_wp_current_template_part_ids;
+		}
+		$_wp_current_template_id        = null;
+		$_wp_current_template_name      = null;
+		$_wp_current_template_content   = null;
+		$_wp_current_template_hierarchy = null;
+		$_wp_current_template_part_ids  = null;
+	}
 	get_front_page_template();
 	get_index_template();
 	apply_filters( 'template_include', null );
-	$settings['templateId'] = $_wp_current_template_id;
+	$template_ids[ $_wp_current_template_name ] = $_wp_current_template_id;
+	if ( isset( $_wp_current_template_part_ids ) ) {
+		$template_part_ids = $template_part_ids + $_wp_current_template_part_ids;
+	}
+	$settings['templateId']      = $_wp_current_template_id;
+	$settings['templateType']    = 'wp_template';
+	$settings['templateIds']     = array_values( $template_ids );
+	$settings['templatePartIds'] = array_values( $template_part_ids );
 
 	// This is so other parts of the code can hook their own settings.
 	// Example: Global Styles.

diff --git a/lib/template-loader.php b/lib/template-loader.php
@@ -81,24 +81,44 @@ function gutenberg_override_query_template( $template, $type, array $templates =
  * @param array $block The root block to start traversing from.
  */
 function create_auto_draft_for_template_part_block( $block ) {
-	if ( 'core/template-part' === $block['blockName'] && ! isset( $block['attrs']['id'] ) ) {
-		$template_part_file_path =
-			get_stylesheet_directory() . '/block-template-parts/' . $block['attrs']['slug'] . '.html';
-		if ( ! file_exists( $template_part_file_path ) ) {
-			return;
+	global $_wp_current_template_part_ids;
+
+	if ( 'core/template-part' === $block['blockName'] ) {
+		if ( ! isset( $block['attrs']['postId'] ) ) {
+			$template_part_file_path =
+				get_stylesheet_directory() . '/block-template-parts/' . $block['attrs']['slug'] . '.html';
+			if ( ! file_exists( $template_part_file_path ) ) {
+				if ( gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing-demo' ) ) {
+					$template_part_file_path =
+						dirname( __FILE__ ) . '/demo-block-template-parts/' . $block['attrs']['slug'] . '.html';
+					if ( ! file_exists( $template_part_file_path ) ) {
+						return;
+					}
+				} else {
+					return;
+				}
+			}
+			$template_part_id = wp_insert_post(
+				array(
+					'post_content' => file_get_contents( $template_part_file_path ),
+					'post_title'   => $block['attrs']['slug'],
+					'post_status'  => 'auto-draft',
+					'post_type'    => 'wp_template_part',
+					'post_name'    => $block['attrs']['slug'],
+					'meta_input'   => array(
+						'theme' => $block['attrs']['theme'],
+					),
+				)
+			);
+		} else {
+			$template_part_id = $block['attrs']['postId'];
+		}
+
+		if ( isset( $_wp_current_template_part_ids ) ) {
+			$_wp_current_template_part_ids[ $block['attrs']['slug'] ] = $template_part_id;
+		} else {
+			$_wp_current_template_part_ids = array( $block['attrs']['slug'] => $template_part_id );
 		}
-		wp_insert_post(
-			array(
-				'post_content' => file_get_contents( $template_part_file_path ),
-				'post_title'   => ucfirst( $block['attrs']['slug'] ),
-				'post_status'  => 'auto-draft',
-				'post_type'    => 'wp_template_part',
-				'post_name'    => $block['attrs']['slug'],
-				'meta_input'   => array(
-					'theme' => $block['attrs']['theme'],
-				),
-			)
-		);
 	}
 
 	foreach ( $block['innerBlocks'] as $inner_block ) {
@@ -114,7 +134,7 @@ function create_auto_draft_for_template_part_block( $block ) {
  * @return string Path to the canvas file to include.
  */
 function gutenberg_find_template( $template_file ) {
-	global $_wp_current_template_id, $_wp_current_template_content, $_wp_current_template_hierarchy;
+	global $_wp_current_template_id, $_wp_current_template_name, $_wp_current_template_content, $_wp_current_template_hierarchy;
 
 	// Bail if no relevant template hierarchy was determined, or if the template file
 	// was overridden another way.
@@ -173,7 +193,7 @@ function gutenberg_find_template( $template_file ) {
 		$post_name             = basename( $higher_priority_block_template_path, '.html' );
 		$current_template_post = array(
 			'post_content' => file_get_contents( $higher_priority_block_template_path ),
-			'post_title'   => ucfirst( $post_name ),
+			'post_title'   => $post_name,
 			'post_status'  => 'auto-draft',
 			'post_type'    => 'wp_template',
 			'post_name'    => $post_name,
@@ -192,13 +212,22 @@ function gutenberg_find_template( $template_file ) {
 		}
 	}
 
+	if ( isset( $_GET['_wp-find-template'] ) ) {
+		if ( $current_template_post ) {
+			wp_send_json_success( $current_template_post );
+		} else {
+			wp_send_json_error( array( 'message' => __( 'No matching template found.', 'gutenberg' ) ) );
+		}
+	}
+
 	if ( $current_template_post ) {
 		if ( is_admin() ) {
 			foreach ( parse_blocks( $current_template_post->post_content ) as $block ) {
 				create_auto_draft_for_template_part_block( $block );
 			}
 		}
 		$_wp_current_template_id      = $current_template_post->ID;
+		$_wp_current_template_name    = $current_template_post->post_name;
 		$_wp_current_template_content = empty( $current_template_post->post_content ) ? __( 'Empty template.', 'gutenberg' ) : $current_template_post->post_content;
 	}
 

diff --git a/lib/templates.php b/lib/templates.php
@@ -85,6 +85,26 @@ function gutenberg_grant_template_caps( array $allcaps ) {
 }
 add_filter( 'user_has_cap', 'gutenberg_grant_template_caps' );
 
+/**
+ * Filters `wp_template` posts slug resolution to bypass deduplication logic as
+ * template slugs should be unique.
+ *
+ * @param string $slug          The resolved slug (post_name).
+ * @param int    $post_ID       Post ID.
+ * @param string $post_status   No uniqueness checks are made if the post is still draft or pending.
+ * @param string $post_type     Post type.
+ * @param int    $post_parent   Post parent ID.
+ * @param int    $original_slug The desired slug (post_name).
+ * @return string The original, desired slug.
+ */
+function gutenberg_filter_wp_template_wp_unique_post_slug( $slug, $post_ID, $post_status, $post_type, $post_parent, $original_slug ) {
+	if ( 'wp_template' === $post_type ) {
+		return $original_slug;
+	}
+	return $slug;
+}
+add_filter( 'wp_unique_post_slug', 'gutenberg_filter_wp_template_wp_unique_post_slug', 10, 6 );
+
 /**
  * Fixes the label of the 'wp_template' admin menu entry.
  */

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/src/components/url-popover/link-viewer.js b/packages/block-editor/src/components/url-popover/link-viewer.js
@@ -7,9 +7,12 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ExternalLink, Button } from '@wordpress/components';
-import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 import { pencil } from '@wordpress/icons';
+import { createSlotFill, ExternalLink, Button } from '@wordpress/components';
+import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
+import { useMemo } from '@wordpress/element';
+
+const { Slot, Fill } = createSlotFill( 'BlockEditorURLPopoverLinkViewer' );
 
 function LinkViewerUrl( { url, urlLabel, className } ) {
 	const linkClassName = classnames(
@@ -28,7 +31,7 @@ function LinkViewerUrl( { url, urlLabel, className } ) {
 	);
 }
 
-export default function LinkViewer( {
+function LinkViewer( {
 	className,
 	linkClassName,
 	onEditLinkClick,
@@ -56,6 +59,11 @@ export default function LinkViewer( {
 					onClick={ onEditLinkClick }
 				/>
 			) }
+			<Slot fillProps={ useMemo( () => ( { url } ), [ url ] ) } />
 		</div>
 	);
 }
+
+LinkViewer.Fill = Fill;
+
+export default LinkViewer;