Edit Site: Fetch templates in Template Switcher from REST API

WordPress · May 25, 2020 · d8749dc · d8749dc
1 parent fb53dad
commit d8749dc
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 54 deletions.
diff --git a/lib/edit-site-page.php b/lib/edit-site-page.php
@@ -144,7 +144,6 @@ function gutenberg_edit_site_init( $hook ) {
 	}
 
 	$template_ids      = array();
-	$template_part_ids = array();
 	foreach ( get_template_types() as $template_type ) {
 		// Skip 'embed' for now because it is not a regular template type.
 		// Skip 'index' because it's a fallback that we handle differently.
@@ -155,17 +154,14 @@ function gutenberg_edit_site_init( $hook ) {
 		$current_template = gutenberg_find_template_post_and_parts( $template_type );
 		if ( isset( $current_template ) ) {
 			$template_ids[ $current_template['template_post']->post_name ] = $current_template['template_post']->ID;
-			$template_part_ids = $template_part_ids + $current_template['template_part_ids'];
 		}
 	}
 
 	$current_template_id = $template_ids['front-page'];
 
 	$settings['templateId']      = $current_template_id;
-	$settings['homeTemplateId']  = $current_template_id;
 	$settings['templateType']    = 'wp_template';
 	$settings['templateIds']     = array_values( $template_ids );
-	$settings['templatePartIds'] = array_values( $template_part_ids );
 	$settings['styles']          = gutenberg_get_editor_styles();
 
 	$settings['showOnFront'] = get_option( 'show_on_front' );

diff --git a/lib/template-loader.php b/lib/template-loader.php
@@ -321,7 +321,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,18 @@ 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` 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',
+		),
+		'theme'    => array(
 			'description' => __( 'The theme slug for the theme that created the template part.', 'gutenberg' ),
 			'type'        => 'string',
 		),
@@ -158,13 +162,31 @@ 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` 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 ) {
+	if ( $request['resolved'] ) {
+		$template_part_ids = array( 0 ); // Return nothing by default (the 0 is needed for `post__in`).
+
+		foreach ( get_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 +196,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
@@ -156,9 +156,7 @@ export default function Header( {
 					</div>
 					<TemplateSwitcher
 						ids={ settings.templateIds }
-						templatePartIds={ settings.templatePartIds }
 						activeId={ settings.templateId }
-						homeId={ settings.homeTemplateId }
 						isTemplatePart={
 							settings.templateType === 'wp_template_part'
 						}

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,9 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { useState, useCallback } from '@wordpress/element';
+import { addQueryArgs } from '@wordpress/url';
+import { select, useSelect } from '@wordpress/data';
+import { useEffect, useState, useCallback } from '@wordpress/element';
 import {
 	Tooltip,
 	DropdownMenu,
@@ -20,6 +21,11 @@ import AddTemplate from '../add-template';
 import TemplatePreview from './template-preview';
 import ThemePreview from './theme-preview';
 
+/**
+ * Browser dependencies
+ */
+const { fetch } = window;
+
 function TemplateLabel( { template, homeId } ) {
 	return (
 		<>
@@ -42,9 +48,7 @@ function TemplateLabel( { template, homeId } ) {
 
 export default function TemplateSwitcher( {
 	ids,
-	templatePartIds,
 	activeId,
-	homeId,
 	isTemplatePart,
 	onActiveIdChange,
 	onActiveTemplatePartIdChange,
@@ -67,49 +71,70 @@ export default function TemplateSwitcher( {
 		setThemePreviewVisible( () => false );
 	};
 
+	const [ homeId, setHomeId ] = useState();
+	useEffect( () => {
+		const effect = async () => {
+			try {
+				const { success, data } = await fetch(
+					addQueryArgs( '/', { '_wp-find-template': true } )
+				).then( ( res ) => res.json() );
+				if ( success ) {
+					let newHomeId = data.ID;
+					if ( newHomeId === null ) {
+						const { getEntityRecords } = select( 'core' );
+						newHomeId = getEntityRecords(
+							'postType',
+							'wp_template',
+							{
+								resolved: true,
+								slug: data.post_name,
+							}
+						)[ 0 ].id;
+					}
+					setHomeId( newHomeId );
+				} else {
+					throw new Error();
+				}
+			} catch ( err ) {
+				setHomeId( null );
+			}
+		};
+		effect();
+	}, [] );
+
 	const { currentTheme, templates, templateParts } = useSelect(
-		( select ) => {
-			const { getCurrentTheme, getEntityRecord } = select( 'core' );
+		( _select ) => {
+			const { getCurrentTheme, getEntityRecords } = _select( 'core' );
+
 			return {
 				currentTheme: getCurrentTheme(),
-				templates: ids.map( ( id ) => {
-					const template = getEntityRecord(
-						'postType',
-						'wp_template',
-						id
-					);
-					return {
-						label: template ? (
-							<TemplateLabel
-								template={ template }
-								homeId={ homeId }
-							/>
-						) : (
-							__( 'Loading…' )
-						),
-						value: id,
-						slug: template ? template.slug : __( 'Loading…' ),
-					};
-				} ),
-				templateParts: templatePartIds.map( ( id ) => {
-					const template = getEntityRecord(
-						'postType',
-						'wp_template_part',
-						id
-					);
-					return {
-						label: template ? (
-							<TemplateLabel template={ template } />
-						) : (
-							__( 'Loading…' )
-						),
-						value: id,
-						slug: template ? template.slug : __( 'Loading…' ),
-					};
-				} ),
+				templates: getEntityRecords( 'postType', 'wp_template', {
+					resolved: true,
+				} )?.map( ( template ) => ( {
+					label: (
+						<TemplateLabel
+							template={ template }
+							homeId={ homeId }
+						/>
+					),
+					value: template.id,
+					slug: template.slug,
+				} ) ),
+				templateParts: getEntityRecords(
+					'postType',
+					'wp_template_part',
+					{
+						resolved: true,
+						status: [ 'publish', 'auto-draft' ],
+						theme: getCurrentTheme()?.stylesheet,
+					}
+				)?.map( ( templatePart ) => ( {
+					label: <TemplateLabel template={ templatePart } />,
+					value: templatePart.id,
+					slug: templatePart.slug,
+				} ) ),
 			};
-		},
-		[ ids, templatePartIds, homeId ]
+		}
 	);
 	const [ isAddTemplateOpen, setIsAddTemplateOpen ] = useState( false );
 	return (
@@ -125,7 +150,7 @@ export default function TemplateSwitcher( {
 					children: ( isTemplatePart
 						? templateParts
 						: templates
-					).find( ( choice ) => choice.value === activeId ).slug,
+					)?.find( ( choice ) => choice.value === activeId ).slug,
 				} }
 			>
 				{ ( { onClose } ) => (