REST API: Sync /themes endpoint with Core's (#23321)

In #21578, I added a few fields to Core's `/themes` endpoint, for use by the Site Editor's Template Switcher (see both #21578 and #21768). I then submitted those changes as a [PR](WordPress/wordpress-develop#222) against Core. That PR underwent a number of modifications and was eventually merged; the new fields will be part of the `/themes` endpoint exposed by Core starting from the next WP release.

This PR updates the fields added by Gutenberg to follow the same semantics, as well as the callsites that use that endpoint.

Author: ockham

lib/rest-api.php

@@ -55,34 +55,73 @@ function gutenberg_filter_oembed_result( $response, $handler, $request ) {
 /**
  * Add fields required for site editing to the /themes endpoint.
  *
- * @todo Remove once https://core.trac.wordpress.org/ticket/49906 is fixed.
+ * @todo Remove once Gutenberg's minimum required WordPress version is v5.5.
+ * @see https://core.trac.wordpress.org/ticket/49906
  * @see https://github.com/WordPress/wordpress-develop/pull/222
  *
  * @param WP_REST_Response $response The response object.
  * @param WP_Theme         $theme    Theme object used to create response.
  * @param WP_REST_Request  $request  Request object.
  */
 function gutenberg_filter_rest_prepare_theme( $response, $theme, $request ) {
-	$data           = $response->get_data();
-	$field_mappings = array(
+	$data   = $response->get_data();
+	$fields = array_keys( $data );
+
+	/**
+	 * The following is basically copied from Core's WP_REST_Themes_Controller::prepare_item_for_response()
+	 * (as of WP v5.5), with `rest_is_field_included()` replaced by `! in_array()`.
+	 * This makes sure that we add all the fields that are missing from Core.
+	 *
+	 * @see https://github.com/WordPress/WordPress/blob/019bc2d244c4d536338d2c634419583e928143df/wp-includes/rest-api/endpoints/class-wp-rest-themes-controller.php#L118-L167
+	 */
+	if ( ! in_array( 'stylesheet', $fields, true ) ) {
+		$data['stylesheet'] = $theme->get_stylesheet();
+	}
+
+	if ( ! in_array( 'template', $fields, true ) ) {
+		/**
+		 * Use the get_template() method, not the 'Template' header, for finding the template.
+		 * The 'Template' header is only good for what was written in the style.css, while
+		 * get_template() takes into account where WordPress actually located the theme and
+		 * whether it is actually valid.
+		 */
+		$data['template'] = $theme->get_template();
+	}
+
+	$plain_field_mappings = array(
+		'requires_php' => 'RequiresPHP',
+		'requires_wp'  => 'RequiresWP',
+		'textdomain'   => 'TextDomain',
+		'version'      => 'Version',
+	);
+
+	foreach ( $plain_field_mappings as $field => $header ) {
+		if ( ! in_array( $field, $fields, true ) ) {
+			$data[ $field ] = $theme->get( $header );
+		}
+	}
+
+	if ( ! in_array( 'screenshot', $fields, true ) ) {
+		// Using $theme->get_screenshot() with no args to get absolute URL.
+		$data['screenshot'] = $theme->get_screenshot() ? $theme->get_screenshot() : '';
+	}
+
+	$rich_field_mappings = array(
 		'author'      => 'Author',
-		'author_name' => 'Author Name',
-		'author_uri'  => 'Author URI',
+		'author_uri'  => 'AuthorURI',
 		'description' => 'Description',
 		'name'        => 'Name',
-		'stylesheet'  => 'Stylesheet',
-		'template'    => 'Template',
-		'theme_uri'   => 'Theme URI',
-		'version'     => 'Version',
+		'tags'        => 'Tags',
+		'theme_uri'   => 'ThemeURI',
 	);
 
-	foreach ( $field_mappings as $field => $theme_field ) {
-		$data[ $field ] = $theme[ $theme_field ];
+	foreach ( $rich_field_mappings as $field => $header ) {
+		if ( ! in_array( $field, $fields, true ) ) {
+			$data[ $field ]['raw']      = $theme->display( $header, false, true );
+			$data[ $field ]['rendered'] = $theme->display( $header );
+		}
 	}
 
-	// Using $theme->get_screenshot() with no args to get absolute URL.
-	$data['screenshot'] = $theme->get_screenshot();
-
 	$response->set_data( $data );
 	return $response;
 }

packages/edit-site/src/components/template-switcher/index.js

@@ -204,7 +204,7 @@ export default function TemplateSwitcher( {
 								onMouseEnter={ onMouseEnterTheme }
 								onMouseLeave={ onMouseLeaveTheme }
 							>
-								{ currentTheme.name }
+								{ currentTheme.name.raw }
 							</MenuItem>
 						</MenuGroup>
 						{ !! hoveredTemplate?.id && (

packages/edit-site/src/components/template-switcher/theme-preview.js

@@ -9,20 +9,24 @@ import { truncate } from 'lodash';
 import { __, sprintf } from '@wordpress/i18n';
 
 function ThemePreview( {
-	theme: { author_name: authorName, description, name, screenshot, version },
+	theme: { author, description, name, screenshot, version },
 } ) {
 	return (
 		<div className="edit-site-template-switcher__theme-preview">
-			<span className="edit-site-template-switcher__theme-preview-name">
-				{ name }
-			</span>{ ' ' }
+			<span
+				className="edit-site-template-switcher__theme-preview-name"
+				dangerouslySetInnerHTML={ {
+					/* name.rendered is sanitized on the server side. */
+					__html: name.rendered,
+				} }
+			/>{ ' ' }
 			<span className="edit-site-template-switcher__theme-preview-version">
 				{ 'v' + version }
 			</span>
 			<div className="edit-site-template-switcher__theme-preview-byline">
 				{
 					// translators: %s: theme author name.
-					sprintf( __( 'By %s' ), [ authorName ] )
+					sprintf( __( 'By %s' ), [ author.raw ] )
 				}
 			</div>
 			<img
@@ -31,10 +35,14 @@ function ThemePreview( {
 				alt={ 'Theme Preview' }
 			/>
 			<div className="edit-site-template-switcher__theme-preview-description">
-				{ truncate( description, {
-					length: 120,
-					separator: /\. +/,
-				} ) }
+				{ truncate(
+					/* Not using description.rendered here, as we might contain after an opening HTML tag. */
+					description.raw,
+					{
+						length: 120,
+						separator: /\. +/,
+					}
+				) }
 			</div>
 		</div>
 	);