[Reader Mode] Add theme support features from theme.json

src/ReaderThemeSupportFeatures.php

@@ -73,6 +73,48 @@ final class ReaderThemeSupportFeatures implements Service, Registerable {
 	 */
 	const KEY_GRADIENT = 'gradient';
 
+	/**
+	 * Key gradients.
+	 *
+	 * @var string
+	 */
+	const KEY_GRADIENTS = 'gradients';
+
+	/**
+	 * Key palette.
+	 *
+	 * @var string
+	 */
+	const KEY_PALETTE = 'palette';
+
+	/**
+	 * Key fontSizes.
+	 *
+	 * @var string
+	 */
+	const KEY_FONT_SIZES = 'fontSizes';
+
+	/**
+	 * Key typography.
+	 *
+	 * @var string
+	 */
+	const KEY_TYPOGRAPHY = 'typography';
+
+	/**
+	 * Key for `theme` presets in block editor.
+	 *
+	 * @var string
+	 */
+	const KEY_THEME = 'theme';
+
+	/**
+	 * Key for `default` presets in block editor.
+	 *
+	 * @var string
+	 */
+	const KEY_DEFAULT = 'default';
+
 	/**
 	 * Action fired when the cached primary_theme_support should be updated.
 	 *
@@ -91,6 +133,17 @@ final class ReaderThemeSupportFeatures implements Service, Registerable {
 		self::FEATURE_EDITOR_FONT_SIZES       => [ self::KEY_SLUG, self::KEY_SIZE ],
 	];
 
+	/**
+	 * The theme.json paths mapping to be fetched using `wp_get_global_settings()`.
+	 *
+	 * @var array[]
+	 */
+	const SUPPORTED_THEME_JSON_FEATURES = [
+		self::FEATURE_EDITOR_COLOR_PALETTE    => [ self::KEY_COLOR, self::KEY_PALETTE ],
+		self::FEATURE_EDITOR_GRADIENT_PRESETS => [ self::KEY_COLOR, self::KEY_GRADIENTS ],
+		self::FEATURE_EDITOR_FONT_SIZES       => [ self::KEY_TYPOGRAPHY, self::KEY_FONT_SIZES ],
+	];
+
 	/**
 	 * Reader theme loader.
 	 *
@@ -203,13 +256,35 @@ public function update_cached_theme_support() {
 	 */
 	public function get_theme_support_features( $reduced = false ) {
 		$features = [];
+
 		foreach ( array_keys( self::SUPPORTED_FEATURES ) as $feature_key ) {
-			$feature_value = current( (array) get_theme_support( $feature_key ) );
+			if ( $this->maybe_use_theme_json() ) {
+				$feature_value   = [];
+				$global_settings = wp_get_global_settings( self::SUPPORTED_THEME_JSON_FEATURES[ $feature_key ], 'theme' );
+
+				if ( isset( $global_settings[ self::KEY_THEME ] ) ) {
+					$feature_value = array_merge( $feature_value, $global_settings[ self::KEY_THEME ] );
+				}
+
+				if ( isset( $global_settings[ self::KEY_DEFAULT ] ) ) {
+					$feature_value = array_merge( $feature_value, $global_settings[ self::KEY_DEFAULT ] );
+				}
+			} else {
+				$feature_value = current( (array) get_theme_support( $feature_key ) );
+			}
+
 			if ( ! is_array( $feature_value ) || empty( $feature_value ) ) {
 				continue;
 			}
+
+			// Avoid reducing font sizes if theme.json is used for the sake of fluid typography.
+			if ( $this->maybe_use_theme_json() && self::FEATURE_EDITOR_FONT_SIZES === $feature_key ) {
+				$reduced = false;
+			}
+
 			if ( $reduced ) {
 				$features[ $feature_key ] = [];
+
 				foreach ( $feature_value as $item ) {
 					if ( $this->has_required_feature_props( $feature_key, $item ) ) {
 						$features[ $feature_key ][] = wp_array_slice_assoc( $item, self::SUPPORTED_FEATURES[ $feature_key ] );
@@ -219,9 +294,29 @@ public function get_theme_support_features( $reduced = false ) {
 				$features[ $feature_key ] = $feature_value;
 			}
 		}
+
 		return $features;
 	}
 
+	/**
+	 * Check if theme.json can be used to determine theme support.
+	 * Due to the lack of `wp_get_global_settings()`, this will always return false for WP < 5.9.
+	 *
+	 * @since 2.4.1
+	 *
+	 * @return bool Whether theme.json can be used to determine theme support.
+	 */
+	private function maybe_use_theme_json() {
+		// wp_get_global_settings() is only available in WP 5.9+.
+		if ( ! function_exists( 'wp_get_global_settings' ) ) {
+			return false;
+		}
+
+		// Do not rely on `wp_is_block_theme()` as theme.json can be used in non-block themes.
+		// See: https://developer.wordpress.org/themes/advanced-topics/theme-json/#a-theme-json-can-be-added-to-any-theme.
+		return ( is_readable( get_stylesheet_directory() . '/theme.json' ) ? true : is_readable( get_template_directory() . '/theme.json' ) );
+	}
+
 	/**
 	 * Determines whether the request is for an AMP page in Reader mode.
 	 *
@@ -327,10 +422,20 @@ private function print_editor_font_sizes_styles( array $font_sizes ) {
 			if ( ! $this->has_required_feature_props( self::FEATURE_EDITOR_FONT_SIZES, $font_size ) ) {
 				continue;
 			}
+
+			// Just in case the font size is not in the expected format.
+			$font_size[ self::KEY_SIZE ] = $this->get_typography_value_and_unit( $font_size[ self::KEY_SIZE ] );
+
+			if ( empty( $font_size[ self::KEY_SIZE ] ) ) {
+				continue;
+			}
+
 			printf(
-				':root .is-%1$s-text, :root .has-%1$s-font-size { font-size: %2$spx; }',
+				':root .is-%1$s-text, :root .has-%1$s-font-size { font-size: %2$s; }',
 				sanitize_key( $font_size[ self::KEY_SLUG ] ),
-				(float) $font_size[ self::KEY_SIZE ]
+				function_exists( 'wp_get_typography_font_size_value' )
+					? esc_attr( wp_get_typography_font_size_value( $font_size ) )
+					: esc_attr( $font_size[ self::KEY_SIZE ] )
 			);
 		}
 		echo '</style>';
@@ -385,4 +490,90 @@ public function get_relative_luminance_from_hex( $hex ) {
 		$lum = ( 0.2126 * $red ) + ( 0.7152 * $green ) + ( 0.0722 * $blue );
 		return (int) round( $lum );
 	}
+
+	/**
+	 * Checks a string for a unit and value and returns an array
+	 * consisting of `'value'` and `'unit'`, e.g. array( '42', 'rem' ).
+	 *
+	 * Copied from `wp_get_typography_value_and_unit()`
+	 *
+	 * @see https://github.com/WordPress/WordPress/blob/9caf1c4adeddff2577c24d622ebbbf278a671271/wp-includes/block-supports/typography.php#L297
+	 *
+	 * @since 2.4.1
+	 *
+	 * @param string|int|float $raw_value Raw size value from theme.json.
+	 * @param array            $options   {
+	 *     Optional. An associative array of options. Default is empty array.
+	 *
+	 *     @type string   $coerce_to        Coerce the value to rem or px. Default `'rem'`.
+	 *     @type int      $root_size_value  Value of root font size for rem|em <-> px conversion. Default `16`.
+	 *     @type string[] $acceptable_units An array of font size units. Default `array( 'rem', 'px', 'em' )`;
+	 * }
+	 * @return string|null The value and unit, or null if the value is empty.
+	 */
+	private function get_typography_value_and_unit( $raw_value, $options = [] ) {
+		if ( ! is_string( $raw_value ) && ! is_int( $raw_value ) && ! is_float( $raw_value ) ) {
+			_doing_it_wrong(
+				__METHOD__,
+				esc_html__( 'Raw size value must be a string, integer, or float.', 'default' ),
+				'2.4.1'
+			);
+			return null;
+		}
+
+		if ( empty( $raw_value ) ) {
+			return null;
+		}
+
+		// Converts numbers to pixel values by default.
+		if ( is_numeric( $raw_value ) ) {
+			$raw_value = $raw_value . 'px';
+		}
+
+		$defaults = [
+			'coerce_to'        => '',
+			'root_size_value'  => 16,
+			'acceptable_units' => [ 'rem', 'px', 'em' ],
+		];
+
+		$options = wp_parse_args( $options, $defaults );
+
+		$acceptable_units_group = implode( '|', $options['acceptable_units'] );
+		$pattern                = '/^(\d*\.?\d+)(' . $acceptable_units_group . '){1,1}$/';
+
+		preg_match( $pattern, $raw_value, $matches );
+
+		// Bails out if not a number value and a px or rem unit.
+		if ( ! isset( $matches[1] ) || ! isset( $matches[2] ) ) {
+			return null;
+		}
+
+		$value = $matches[1];
+		$unit  = $matches[2];
+
+		/*
+		 * Default browser font size. Later, possibly could inject some JS to
+		 * compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
+		 */
+		if ( 'px' === $options['coerce_to'] && ( 'em' === $unit || 'rem' === $unit ) ) {
+			$value = $value * $options['root_size_value'];
+			$unit  = $options['coerce_to'];
+		}
+
+		if ( 'px' === $unit && ( 'em' === $options['coerce_to'] || 'rem' === $options['coerce_to'] ) ) {
+			$value = $value / $options['root_size_value'];
+			$unit  = $options['coerce_to'];
+		}
+
+		/*
+		 * No calculation is required if swapping between em and rem yet,
+		 * since we assume a root size value. Later we might like to differentiate between
+		 * :root font size (rem) and parent element font size (em) relativity.
+		 */
+		if ( ( 'em' === $options['coerce_to'] || 'rem' === $options['coerce_to'] ) && ( 'em' === $unit || 'rem' === $unit ) ) {
+			$unit = $options['coerce_to'];
+		}
+
+		return round( $value, 3 ) . $unit;
+	}
 }

tests/php/src/ReaderThemeSupportFeaturesTest.php

@@ -13,6 +13,7 @@
 use AmpProject\AmpWP\ReaderThemeSupportFeatures;
 use AmpProject\AmpWP\Tests\Helpers\LoadsCoreThemes;
 use AmpProject\AmpWp\Tests\Helpers\PrivateAccess;
+use org\bovigo\vfs;
 
 /** @coversDefaultClass \AmpProject\AmpWP\ReaderThemeSupportFeatures */
 final class ReaderThemeSupportFeaturesTest extends DependencyInjectedTestCase {
@@ -428,6 +429,54 @@ public function test_get_relative_luminance_from_hex( $hex, $luminance ) {
 		);
 	}
 
+	/**
+	 * @covers ::maybe_use_theme_json()
+	 */
+	public function test_maybe_use_theme_json() {
+		if ( function_exists( 'wp_get_global_settings' ) ) {
+
+			$current_theme = wp_get_theme()->get_stylesheet();
+
+			switch_theme( 'twentytwentythree' );
+
+			if ( 'twentytwentythree' !== wp_get_theme()->get_stylesheet() ) {
+				$this->markTestSkipped( 'Twenty Twenty Three theme is not activated.' );
+			}
+
+			$this->assertTrue( file_exists( get_stylesheet_directory() . '/theme.json' ) );
+			$this->assertTrue( $this->call_private_method( $this->instance, 'maybe_use_theme_json' ) );
+
+			$themes_directory = 'themes';
+			$mock_theme       = 'example-theme';
+			$mock_directory   = vfs\vfsStream::setup( $themes_directory, null, [ $mock_theme => [] ] );
+
+			// Add filters so that get_template_directory() the theme in the mock filesystem.
+			add_filter(
+				'theme_root',
+				function() use ( $mock_directory ) {
+					return $mock_directory->url();
+				}
+			);
+
+			add_filter(
+				'template',
+				function() use ( $mock_theme ) {
+					return $mock_theme;
+				}
+			);
+
+			$mock_directory->getChild( $mock_theme )->addChild( vfs\vfsStream::newFile( 'theme.json' ) );
+
+			$this->assertTrue( file_exists( get_template_directory() . '/theme.json' ) );
+			$this->assertTrue( $this->call_private_method( $this->instance, 'maybe_use_theme_json' ) );
+
+			// Switch back to the current theme.
+			switch_theme( $current_theme );
+		} else {
+			$this->markTestSkipped( 'This test is only relevant for WordPress 5.9 and above.' );
+		}
+	}
+
 	/** @param array $features */
 	private function add_theme_supports( $features ) {
 		foreach ( $features as $feature => $supports ) {