Edit Site: Fetch template parts in Template Switcher from REST API (#…

…21878) This is to decouple `edit-site` even further from the `settings` variable that is at the moment directly passed from PHP, and will use the REST API instead. #21877 is complementary to this PR.
WordPress · Jun 9, 2020 · 670d800 · 670d800
1 parent aa46f40
commit 670d800
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 57 deletions.
diff --git a/lib/template-loader.php b/lib/template-loader.php
@@ -336,7 +336,7 @@ function gutenberg_find_template_post_and_parts( $template_type, $template_hiera
 
 	if ( $current_template_post ) {
 		$template_part_ids = array();
-		if ( is_admin() ) {
+		if ( is_admin() || defined( 'REST_REQUEST' ) ) {
 			foreach ( parse_blocks( $current_template_post->post_content ) as $block ) {
 				$template_part_ids = array_merge( $template_part_ids, create_auto_draft_for_template_part_block( $block ) );
 			}

diff --git a/lib/template-parts.php b/lib/template-parts.php
@@ -141,14 +141,22 @@ function gutenberg_render_template_part_list_table_column( $column_name, $post_i
 
 
 /**
- * Filter for adding a `theme` parameter to `wp_template_part` queries.
+ * Filter for adding a `resolved`, a `template`, and a `theme` parameter to `wp_template_part` queries.
  *
  * @param array $query_params The query parameters.
  * @return array Filtered $query_params.
  */
 function filter_rest_wp_template_part_collection_params( $query_params ) {
 	$query_params += array(
-		'theme' => array(
+		'resolved' => array(
+			'description' => __( 'Whether to filter for resolved template parts.', 'gutenberg' ),
+			'type'        => 'boolean',
+		),
+		'template' => array(
+			'description' => __( 'The template slug for the template that the template part is used by.', 'gutenberg' ),
+			'type'        => 'string',
+		),
+		'theme'    => array(
 			'description' => __( 'The theme slug for the theme that created the template part.', 'gutenberg' ),
 			'type'        => 'string',
 		),
@@ -158,13 +166,46 @@ function filter_rest_wp_template_part_collection_params( $query_params ) {
 apply_filters( 'rest_wp_template_part_collection_params', 'filter_rest_wp_template_part_collection_params', 99, 1 );
 
 /**
- * Filter for supporting the `theme` parameter in `wp_template_part` queries.
+ * Filter for supporting the `resolved`, `template`, and `theme` parameters in `wp_template_part` queries.
  *
  * @param array           $args    The query arguments.
  * @param WP_REST_Request $request The request object.
  * @return array Filtered $args.
  */
 function filter_rest_wp_template_part_query( $args, $request ) {
+	/**
+	 * Unlike `filter_rest_wp_template_query`, we resolve queries also if there's only a `template` argument set.
+	 * The difference is that in the case of templates, we can use the `slug` field that already exists (as part
+	 * of the entities endpoint, wheras for template parts, we have to register the extra `template` argument),
+	 * so we need the `resolved` flag to convey the different semantics (only return 'resolved' templates that match
+	 * the `slug` vs return _all_ templates that match it (e.g. including all auto-drafts)).
+	 *
+	 * A template parts query with a `template` arg but not a `resolved` one is conceivable, but probably wouldn't be
+	 * very useful: It'd be all template parts for all templates matching that `template` slug (including auto-drafts etc).
+	 *
+	 * @see filter_rest_wp_template_query
+	 * @see filter_rest_wp_template_part_collection_params
+	 * @see https://github.com/WordPress/gutenberg/pull/21878#discussion_r436961706
+	 */
+	if ( $request['resolved'] || $request['template'] ) {
+		$template_part_ids = array( 0 ); // Return nothing by default (the 0 is needed for `post__in`).
+		$template_types    = $request['template'] ? array( $request['template'] ) : get_template_types();
+
+		foreach ( $template_types as $template_type ) {
+			// Skip 'embed' for now because it is not a regular template type.
+			if ( in_array( $template_type, array( 'embed' ), true ) ) {
+				continue;
+			}
+
+			$current_template = gutenberg_find_template_post_and_parts( $template_type );
+			if ( isset( $current_template ) ) {
+				$template_part_ids = $template_part_ids + $current_template['template_part_ids'];
+			}
+		}
+		$args['post__in']    = $template_part_ids;
+		$args['post_status'] = array( 'publish', 'auto-draft' );
+	}
+
 	if ( $request['theme'] ) {
 		$meta_query   = isset( $args['meta_query'] ) ? $args['meta_query'] : array();
 		$meta_query[] = array(
@@ -174,6 +215,7 @@ function filter_rest_wp_template_part_query( $args, $request ) {
 
 		$args['meta_query'] = $meta_query;
 	}
+
 	return $args;
 }
 add_filter( 'rest_wp_template_part_query', 'filter_rest_wp_template_part_query', 99, 2 );
diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -36,33 +36,27 @@ export default function Header( {
 	const {
 		deviceType,
 		hasFixedToolbar,
-		homeTemplateId,
 		templateId,
 		templatePartId,
 		templateType,
-		templatePartIds,
 		page,
 		showOnFront,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
 			isFeatureActive,
-			getHomeTemplateId,
 			getTemplateId,
 			getTemplatePartId,
 			getTemplateType,
-			getTemplatePartIds,
 			getPage,
 			getShowOnFront,
 		} = select( 'core/edit-site' );
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
 			hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
-			homeTemplateId: getHomeTemplateId(),
 			templateId: getTemplateId(),
 			templatePartId: getTemplatePartId(),
 			templateType: getTemplateType(),
-			templatePartIds: getTemplatePartIds(),
 			page: getPage(),
 			showOnFront: getShowOnFront(),
 		};
@@ -116,11 +110,9 @@ export default function Header( {
 						/
 					</div>
 					<TemplateSwitcher
-						templatePartIds={ templatePartIds }
 						page={ page }
 						activeId={ templateId }
 						activeTemplatePartId={ templatePartId }
-						homeId={ homeTemplateId }
 						isTemplatePart={ templateType === 'wp_template_part' }
 						onActiveIdChange={ setTemplate }
 						onActiveTemplatePartIdChange={ setTemplatePart }

diff --git a/packages/edit-site/src/components/template-switcher/index.js b/packages/edit-site/src/components/template-switcher/index.js
@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useRegistry, useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
 import {
 	Tooltip,
 	DropdownMenu,
@@ -16,6 +16,7 @@ import { Icon, home, plus, undo } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import { findTemplate } from '../../utils';
 import TemplatePreview from './template-preview';
 import ThemePreview from './theme-preview';
 
@@ -46,11 +47,9 @@ function TemplateLabel( { template, homeId } ) {
 }
 
 export default function TemplateSwitcher( {
-	templatePartIds,
 	page,
 	activeId,
 	activeTemplatePartId,
-	homeId,
 	isTemplatePart,
 	onActiveIdChange,
 	onActiveTemplatePartIdChange,
@@ -70,52 +69,64 @@ export default function TemplateSwitcher( {
 		setThemePreviewVisible( () => false );
 	};
 
+	const registry = useRegistry();
+	const [ homeId, setHomeId ] = useState();
+
+	useEffect( () => {
+		findTemplate(
+			'/',
+			registry.__experimentalResolveSelect( 'core' ).getEntityRecords
+		).then(
+			( newHomeId ) => setHomeId( newHomeId ),
+			() => setHomeId( null )
+		);
+	}, [ registry ] );
+
 	const { currentTheme, template, templateParts } = useSelect(
 		( select ) => {
-			const { getCurrentTheme, getEntityRecord } = select( 'core' );
+			const {
+				getCurrentTheme,
+				getEntityRecord,
+				getEntityRecords,
+			} = select( 'core' );
+
 			const _template = getEntityRecord(
 				'postType',
 				'wp_template',
 				activeId
 			);
+
 			return {
 				currentTheme: getCurrentTheme(),
-				template: {
-					label: _template ? (
-						<TemplateLabel
-							template={ _template }
-							homeId={ homeId }
-						/>
-					) : (
-						__( 'Loading…' )
-					),
-					value: activeId,
-					slug: _template ? _template.slug : __( 'Loading…' ),
-					content: _template?.content,
-				},
-				templateParts: templatePartIds.map( ( id ) => {
-					const templatePart = getEntityRecord(
-						'postType',
-						'wp_template_part',
-						id
-					);
-					return {
-						label: templatePart ? (
-							<TemplateLabel template={ templatePart } />
-						) : (
-							__( 'Loading…' )
-						),
-						value: id,
-						slug: templatePart
-							? templatePart.slug
-							: __( 'Loading…' ),
-					};
-				} ),
+				template: _template,
+				templateParts: _template
+					? getEntityRecords( 'postType', 'wp_template_part', {
+							resolved: true,
+							template: _template.slug,
+					  } )
+					: null,
 			};
 		},
-		[ activeId, templatePartIds, homeId ]
+		[ activeId ]
 	);
 
+	const templateItem = {
+		label: template ? (
+			<TemplateLabel template={ template } homeId={ homeId } />
+		) : (
+			__( 'Loading…' )
+		),
+		value: activeId,
+		slug: template ? template.slug : __( 'Loading…' ),
+		content: template?.content,
+	};
+
+	const templatePartItems = templateParts?.map( ( templatePart ) => ( {
+		label: <TemplateLabel template={ templatePart } />,
+		value: templatePart.id,
+		slug: templatePart.slug,
+	} ) );
+
 	const overwriteSlug =
 		TEMPLATE_OVERRIDES[ page.type ] &&
 		page.slug &&
@@ -125,10 +136,10 @@ export default function TemplateSwitcher( {
 			slug: overwriteSlug,
 			title: overwriteSlug,
 			status: 'publish',
-			content: template.content.raw,
+			content: templateItem.content.raw,
 		} );
 	const revertToParent = async () => {
-		onRemoveTemplate( template.value );
+		onRemoveTemplate( activeId );
 	};
 	return (
 		<>
@@ -141,8 +152,8 @@ export default function TemplateSwitcher( {
 				label={ __( 'Switch Template' ) }
 				toggleProps={ {
 					children: ( isTemplatePart
-						? templateParts
-						: [ template ]
+						? templatePartItems
+						: [ templateItem ]
 					).find(
 						( choice ) =>
 							choice.value ===
@@ -156,18 +167,18 @@ export default function TemplateSwitcher( {
 							<MenuItem
 								onClick={ () => onActiveIdChange( activeId ) }
 							>
-								{ template.label }
+								{ templateItem.label }
 							</MenuItem>
 							{ overwriteSlug &&
-								overwriteSlug !== template.slug && (
+								overwriteSlug !== templateItem.slug && (
 									<MenuItem
 										icon={ plus }
 										onClick={ overwriteTemplate }
 									>
 										{ __( 'Overwrite Template' ) }
 									</MenuItem>
 								) }
-							{ overwriteSlug === template.slug && (
+							{ overwriteSlug === templateItem.slug && (
 								<MenuItem
 									icon={ undo }
 									onClick={ revertToParent }
@@ -178,7 +189,7 @@ export default function TemplateSwitcher( {
 						</MenuGroup>
 						<MenuGroup label={ __( 'Template Parts' ) }>
 							<MenuItemsChoice
-								choices={ templateParts }
+								choices={ templatePartItems }
 								value={
 									isTemplatePart
 										? activeTemplatePartId