Allow to extend the WP_Theme_JSON_Gutenberg class

[oandregal]

Follow up to #38625

This PR makes the necessary changes for #37770 to be able to override the theme.json classes. It extends the requirements of the existing PR to all cases, so we cover future needs as well. The changes boil down to: make the private functions protected and use static:: instead of self:: for accessing variables and functions.

How to tests

• Verify that unit tests pass.
• Using a block theme load the front and editors. Do some changes in the global styles sidebar within the site editor and save them.
• Using a block theme load the front and editors. Do some changes in the global styles sidebar within the site editor and save them.

[ramonjd]

Thanks @oandregal

This is working well for me.

I tested on top of #38319, which introduces a new typography block support.

As well as the changes from that PR, I extended WP_Theme_JSON_Gutenberg in compat/6.0 and ultimately had to ensure we were getting settings from gutenberg_get_global_settings() instead of wp_get_global_settings(). Changes in the diff below.

Diff

 diff --git a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php
index c7090ac7f2..2a7d564477 100644
--- a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php
+++ b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php
@@ -14,7 +14,7 @@
*
* @access private
*/
-class WP_Theme_JSON_Gutenberg {
+class WP_Theme_JSON_Gutenberg_5_9 {

  /**
   * Container of data in theme.json format.
diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php
index 8619cdbc8d..3f26edef29 100644
--- a/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php
+++ b/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php
@@ -1 +1,149 @@
-class WP_Theme_JSON_Gutenberg {}
+<?php
+/**
+ * WP_Theme_JSON_Gutenberg class
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Class that encapsulates the processing of structures that adhere to the theme.json spec.
+ *
+ * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
+ * This is a low-level API that may need to do breaking changes. Please,
+ * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
+ *
+ * @access private
+ */
+
+class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_Gutenberg_5_9 {
+    /**
+	 * Metadata for style properties.
+	 *
+	 * Each element is a direct mapping from the CSS property name to the
+	 * path to the value in theme.json & block attributes.
+	 */
+	const PROPERTIES_METADATA = array(
+		'background'                 => array( 'color', 'gradient' ),
+		'background-color'           => array( 'color', 'background' ),
+		'border-radius'              => array( 'border', 'radius' ),
+		'border-top-left-radius'     => array( 'border', 'radius', 'topLeft' ),
+		'border-top-right-radius'    => array( 'border', 'radius', 'topRight' ),
+		'border-bottom-left-radius'  => array( 'border', 'radius', 'bottomLeft' ),
+		'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ),
+		'border-color'               => array( 'border', 'color' ),
+		'border-width'               => array( 'border', 'width' ),
+		'border-style'               => array( 'border', 'style' ),
+		'color'                      => array( 'color', 'text' ),
+		'font-family'                => array( 'typography', 'fontFamily' ),
+		'font-size'                  => array( 'typography', 'fontSize' ),
+		'font-style'                 => array( 'typography', 'fontStyle' ),
+		'font-weight'                => array( 'typography', 'fontWeight' ),
+		'letter-spacing'             => array( 'typography', 'letterSpacing' ),
+		'line-height'                => array( 'typography', 'lineHeight' ),
+		'margin'                     => array( 'spacing', 'margin' ),
+		'margin-top'                 => array( 'spacing', 'margin', 'top' ),
+		'margin-right'               => array( 'spacing', 'margin', 'right' ),
+		'margin-bottom'              => array( 'spacing', 'margin', 'bottom' ),
+		'margin-left'                => array( 'spacing', 'margin', 'left' ),
+		'padding'                    => array( 'spacing', 'padding' ),
+		'padding-top'                => array( 'spacing', 'padding', 'top' ),
+		'padding-right'              => array( 'spacing', 'padding', 'right' ),
+		'padding-bottom'             => array( 'spacing', 'padding', 'bottom' ),
+		'padding-left'               => array( 'spacing', 'padding', 'left' ),
+		'--wp--style--block-gap'     => array( 'spacing', 'blockGap' ),
+		'text-decoration'            => array( 'typography', 'textDecoration' ),
+		'text-transform'             => array( 'typography', 'textTransform' ),
+		'filter'                     => array( 'filter', 'duotone' ),
+		'writing-mode'               => array( 'typography', 'writingMode' ),
+	);
+
+	/**
+	 * The valid properties under the styles key.
+	 *
+	 * @var array
+	 */
+	const VALID_STYLES = array(
+		'border'     => array(
+			'color'  => null,
+			'radius' => null,
+			'style'  => null,
+			'width'  => null,
+		),
+		'color'      => array(
+			'background' => null,
+			'gradient'   => null,
+			'text'       => null,
+		),
+		'filter'     => array(
+			'duotone' => null,
+		),
+		'spacing'    => array(
+			'margin'   => null,
+			'padding'  => null,
+			'blockGap' => 'top',
+		),
+		'typography' => array(
+			'fontFamily'     => null,
+			'fontSize'       => null,
+			'fontStyle'      => null,
+			'fontWeight'     => null,
+			'letterSpacing'  => null,
+			'lineHeight'     => null,
+			'textDecoration' => null,
+			'textTransform'  => null,
+			'writingMode'    => null,
+		),
+	);
+
+	/**
+	 * The valid properties under the settings key.
+	 *
+	 * @var array
+	 */
+	const VALID_SETTINGS = array(
+		'appearanceTools' => null,
+		'border'          => array(
+			'color'  => null,
+			'radius' => null,
+			'style'  => null,
+			'width'  => null,
+		),
+		'color'           => array(
+			'background'       => null,
+			'custom'           => null,
+			'customDuotone'    => null,
+			'customGradient'   => null,
+			'defaultGradients' => null,
+			'defaultPalette'   => null,
+			'duotone'          => null,
+			'gradients'        => null,
+			'link'             => null,
+			'palette'          => null,
+			'text'             => null,
+		),
+		'custom'          => null,
+		'layout'          => array(
+			'contentSize' => null,
+			'wideSize'    => null,
+		),
+		'spacing'         => array(
+			'blockGap' => null,
+			'margin'   => null,
+			'padding'  => null,
+			'units'    => null,
+		),
+		'typography'      => array(
+			'customFontSize' => null,
+			'dropCap'        => null,
+			'fontFamilies'   => null,
+			'fontSizes'      => null,
+			'fontStyle'      => null,
+			'fontWeight'     => null,
+			'letterSpacing'  => null,
+			'lineHeight'     => null,
+			'textDecoration' => null,
+			'textTransform'  => null,
+			'writingMode'    => null,
+		),
+	);
+}
diff --git a/lib/compat/wordpress-6.0/get-global-styles-and-settings.php b/lib/compat/wordpress-6.0/get-global-styles-and-settings.php
index 766e56ac84..6712ddd7a4 100644
--- a/lib/compat/wordpress-6.0/get-global-styles-and-settings.php
+++ b/lib/compat/wordpress-6.0/get-global-styles-and-settings.php
@@ -5,7 +5,7 @@
* @package gutenberg
*/

-if ( ! function_exists( 'wp_get_global_settings' ) ) {
+if ( ! function_exists( 'gutenberg_get_global_settings' ) ) {
  /**
   * Function to get the settings resulting of merging core, theme, and user data.
   *
@@ -23,7 +23,7 @@ if ( ! function_exists( 'wp_get_global_settings' ) ) {
   *
   * @return array The settings to retrieve.
   */
-	function wp_get_global_settings( $path = array(), $context = array() ) {
+	function gutenberg_get_global_settings( $path = array(), $context = array() ) {
  	if ( ! empty( $context['block_name'] ) ) {
  		$path = array_merge( array( 'blocks', $context['block_name'] ), $path );
  	}
@@ -38,139 +38,3 @@ if ( ! function_exists( 'wp_get_global_settings' ) ) {
  	return _wp_array_get( $settings, $path, $settings );
  }
}
-
-if ( ! function_exists( 'wp_get_global_styles' ) ) {
-	/**
-	 * Function to get the styles resulting of merging core, theme, and user data.
-	 *
-	 * @param array $path    Path to the specific style to retrieve. Optional.
-	 *                       If empty, will return all styles.
-	 * @param array $context {
-	 *     Metadata to know where to retrieve the $path from. Optional.
-	 *
-	 *     @type string $block_name Which block to retrieve the styles from.
-	 *                              If empty, it'll return the styles for the global context.
-	 *     @type string $origin     Which origin to take data from.
-	 *                              Valid values are 'all' (core, theme, and user) or 'base' (core and theme).
-	 *                              If empty or unknown, 'all' is used.
-	 * }
-	 *
-	 * @return array The styles to retrieve.
-	 */
-	function wp_get_global_styles( $path = array(), $context = array() ) {
-		if ( ! empty( $context['block_name'] ) ) {
-			$path = array_merge( array( 'blocks', $context['block_name'] ), $path );
-		}
-
-		$origin = 'custom';
-		if ( isset( $context['origin'] ) && 'base' === $context['origin'] ) {
-			$origin = 'theme';
-		}
-
-		$styles = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $origin )->get_raw_data()['styles'];
-
-		return _wp_array_get( $styles, $path, $styles );
-	}
-}
-
-if ( ! function_exists( 'wp_get_global_stylesheet' ) ) {
-	/**
-	 * Returns the stylesheet resulting of merging core, theme, and user data.
-	 *
-	 * @param array $types Types of styles to load. Optional.
-	 *                     It accepts 'variables', 'styles', 'presets' as values.
-	 *                     If empty, it'll load all for themes with theme.json support
-	 *                     and only [ 'variables', 'presets' ] for themes without theme.json support.
-	 *
-	 * @return string Stylesheet.
-	 */
-	function wp_get_global_stylesheet( $types = array() ) {
-		// Return cached value if it can be used and exists.
-		// It's cached by theme to make sure that theme switching clears the cache.
-		$can_use_cached = (
-			( empty( $types ) ) &&
-			( ! defined( 'WP_DEBUG' ) || ! WP_DEBUG ) &&
-			( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) &&
-			( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) &&
-			! is_admin()
-		);
-		$transient_name = 'gutenberg_global_styles_' . get_stylesheet();
-		if ( $can_use_cached ) {
-			$cached = get_transient( $transient_name );
-			if ( $cached ) {
-				return $cached;
-			}
-		}
-
-		$supports_theme_json = WP_Theme_JSON_Resolver_Gutenberg::theme_has_support();
-		$supports_link_color = get_theme_support( 'experimental-link-color' );
-		if ( empty( $types ) && ! $supports_theme_json ) {
-			$types = array( 'variables', 'presets' );
-		} elseif ( empty( $types ) ) {
-			$types = array( 'variables', 'styles', 'presets' );
-		}
-
-		$origins = array( 'default', 'theme', 'custom' );
-		if ( ! $supports_theme_json && ! $supports_link_color ) {
-			// In this case we only enqueue the core presets (CSS Custom Properties + the classes).
-			$origins = array( 'default' );
-		} elseif ( ! $supports_theme_json && $supports_link_color ) {
-			// For the legacy link color feature to work, the CSS Custom Properties
-			// should be in scope (either the core or the theme ones).
-			$origins = array( 'default', 'theme' );
-		}
-
-		$tree       = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
-		$stylesheet = $tree->get_stylesheet( $types, $origins );
-
-		if ( $can_use_cached ) {
-			// Cache for a minute.
-			// This cache doesn't need to be any longer, we only want to avoid spikes on high-traffic sites.
-			set_transient( $transient_name, $stylesheet, MINUTE_IN_SECONDS );
-		}
-
-		return $stylesheet;
-	}
-}
-
-if ( ! function_exists( 'wp_get_global_styles_svg_filters' ) ) {
-	/**
-	 * Returns a string containing the SVGs to be referenced as filters (duotone).
-	 *
-	 * @return string
-	 */
-	function wp_get_global_styles_svg_filters() {
-		// Return cached value if it can be used and exists.
-		// It's cached by theme to make sure that theme switching clears the cache.
-		$transient_name = 'gutenberg_global_styles_svg_filters_' . get_stylesheet();
-		$can_use_cached = (
-			( ! defined( 'WP_DEBUG' ) || ! WP_DEBUG ) &&
-			( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) &&
-			( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) &&
-			! is_admin()
-		);
-		if ( $can_use_cached ) {
-			$cached = get_transient( $transient_name );
-			if ( $cached ) {
-				return $cached;
-			}
-		}
-
-		$supports_theme_json = WP_Theme_JSON_Resolver_Gutenberg::theme_has_support();
-
-		$origins = array( 'default', 'theme', 'custom' );
-		if ( ! $supports_theme_json ) {
-			$origins = array( 'default' );
-		}
-
-		$tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
-		$svgs = $tree->get_svg_filters( $origins );
-
-		if ( $can_use_cached ) {
-			// Cache for a minute, same as gutenberg_get_global_stylesheet.
-			set_transient( $transient_name, $svgs, MINUTE_IN_SECONDS );
-		}
-
-		return $svgs;
-	}
-}
diff --git a/lib/global-styles.php b/lib/global-styles.php
index a543732884..66f4cdd213 100644
--- a/lib/global-styles.php
+++ b/lib/global-styles.php
@@ -82,8 +82,9 @@ function gutenberg_experimental_global_styles_settings( $settings ) {
  	$settings['styles'] = array_merge( $new_global_styles, $styles_without_existing_global_styles );
  }

-	// Copied from get_block_editor_settings() at wordpress-develop/block-editor.php.
-	$settings['__experimentalFeatures'] = wp_get_global_settings();
+	// For 5.9, copied from get_block_editor_settings() at wordpress-develop/block-editor.php.
+	// For 6.0 calling gutenberg_get_global_settings() in order to include new valid settings/properties/styles in theme.json.
+	$settings['__experimentalFeatures'] = gutenberg_get_global_settings();

  if ( isset( $settings['__experimentalFeatures']['color']['palette'] ) ) {
  	$colors_by_origin   = $settings['__experimentalFeatures']['color']['palette'];
diff --git a/lib/load.php b/lib/load.php
index 7b62bd40d9..c19edb0968 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -100,6 +100,8 @@ require __DIR__ . '/compat/wordpress-6.0/post-lock.php';
require __DIR__ . '/compat/wordpress-6.0/blocks.php';
require __DIR__ . '/compat/wordpress-6.0/class-gutenberg-rest-global-styles-controller.php';
require __DIR__ . '/compat/wordpress-6.0/rest-api.php';
+require __DIR__ . '/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php';
+require __DIR__ . '/compat/wordpress-6.0/get-global-styles-and-settings.php';
require __DIR__ . '/compat/experimental/blocks.php';

require __DIR__ . '/blocks.php';

All in all, extending WP_Theme_JSON_Gutenberg and adding the new block support properties to VALID_SETTINGS, VALID_STYLES and PROPERTIES_METADATA arrays worked a charm. The block support is working as expected in the editor and the frontend (vertical text orientation).

[aaronrobertshaw]

Thanks for continuing with this work @oandregal 👍

✅ All private functions were updated to protected
✅ All instances of self:: have been updated to static
✅ The unit tests pass.
✅ Theme.json edits are reflected correctly on the frontend, block and site editors.
✅ Edits made via Global Styles sidebar are reflected correctly in both editors and frontend
✅ Absorbing these changes into #37770 works smoothly

❓ I did encounter some issues trying to get the new height and width support PRs working again post 5.9.

After also applying Ramon's suggested updates, I could get these new supports working within the block editor only. I'm hoping I'm just missing something simple in terms of adding the new top level setting dimensions.

While digging into this I found that in the core/edit-site store, it initially does get the new dimensions settings however loses them somehow. I haven't been able to locate where or explain how this is happening yet.

Screen.Recording.2022-02-10.at.5.55.33.pm.mp4

[oandregal]

@ramonjd I don't understand why the addition of gutenberg_get_global_settings would be necessary. I don't see changes to their content and wp_get_global_settings calls directly WP_Theme_JSON_Resolver_Gutenberg (which would be the new child class in compat/6.0 with the overrides). Isn't that enough?

@aaronrobertshaw The site editor has some code to recreate styles & settings upon user changes, that may get us a lead to investigate. Would you think we could land this and investigate your issues separately? If we need to do more changes, we can in a follow-up PR.

[ramonjd]

I don't see changes to their content and wp_get_global_settings calls directly WP_Theme_JSON_Resolver_Gutenberg (which would be the new child class in compat/6.0 with the overrides). Isn't that enough?

@oandregal Definitely an oversight on my part. I didn't extend WP_Theme_JSON_Resolver_Gutenberg in compat/6.0. Thanks for the tip off! I'll test again.

Edit: After testing again, I think what I was experiencing was that the plugin version of wp_get_global_settings() in get-global-styles-and-settings.php wasn't being called at all, the equivalent method in 5.9 taking precedence.

So if I comment the above method out, things work fine.

Does that sound right to you?

I was following the gutenberg_ renaming precedence we reverted in #36907.

[aaronrobertshaw]

Would you think we could land this and investigate your issues separately? If we need to do more changes, we can in a follow-up PR.

I have no issues with addressing this in a follow-up. Thanks for the clue on where to look I'll pick that up early next week.

[oandregal]

@ramonjd I see. We'll need to do some other changes, but those don't need to be backported for 5.9.1. I can help with that pushing to your PR directly the fix if that's ok.

[ntsekouras]

LGTM! Thanks!

[ramonjd]

We'll need to do some other changes, but those don't need to be backported for 5.9.1. I can help with that pushing to your PR directly the fix if that's ok.

Sounds perfect, thank you!! 🙇

[aaronrobertshaw]

I see. We'll need to do some other changes,

@oandregal can you please expand on what other changes are required?

In addition to @ramonjd's PR, this issue is blocking several other PRs attempting to extend theme.json settings and classes. I haven't had much success trying to uncover what else is needed and it makes it tricky to confidently debug where the Site Editor is missing including new top level settings e.g. dimensions.

The site editor has some code to recreate styles & settings upon user changes, that may get us a lead to investigate.

From what I can test so far it appears that the base config retrieved from the GlobalStylesContext just isn't getting up-to-date settings.

Any help will be greatly appreciated, thanks 🙇

[oandregal]

I've used this PR #38039 (comment) to showcase how we can update global styles code in the plugin, as we need them. The same changes may be relevant to other PRs mentioned in this conversation. Because there are a few in-flight PRs that may need those changes and we don't know which one will land first, I've prepared #38883 to fast-track them.