-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow to extend the WP_Theme_JSON_Gutenberg
class
#38671
Conversation
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 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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
@ramonjd I don't understand why the addition of @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. |
@oandregal Definitely an oversight on my part. I didn't extend Edit: After testing again, I think what I was experiencing was that the plugin version of wp_get_global_settings() in So if I comment the above method out, things work fine. Does that sound right to you? I was following the |
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. |
2a052e0
to
89fedaf
Compare
@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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! Thanks!
Sounds perfect, thank you!! 🙇 |
@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.
From what I can test so far it appears that the base config retrieved from the Any help will be greatly appreciated, thanks 🙇 |
…classes. This change updates methods visibility from `private` to `protected` and adds late static binding. Original PRs from Gutenberg repository: - WordPress/gutenberg#38625 - WordPress/gutenberg#38671 Props oandregal, Mamaduka, kapilpaul. Fixes #55178. See #55179. git-svn-id: https://develop.svn.wordpress.org/trunk@52744 602fd350-edb4-49c9-b593-d223f7449a82
…classes. This change updates methods visibility from `private` to `protected` and adds late static binding. Original PRs from Gutenberg repository: - WordPress/gutenberg#38625 - WordPress/gutenberg#38671 Props oandregal, Mamaduka, kapilpaul. Fixes #55178. See #55179. Built from https://develop.svn.wordpress.org/trunk@52744 git-svn-id: http://core.svn.wordpress.org/trunk@52333 1a063a9b-81f0-0310-95a4-ce76da25c4cd
…classes. This change updates methods visibility from `private` to `protected` and adds late static binding. Original PRs from Gutenberg repository: - WordPress/gutenberg#38625 - WordPress/gutenberg#38671 Props oandregal, Mamaduka, kapilpaul. Fixes #55178. See #55179. Built from https://develop.svn.wordpress.org/trunk@52744 git-svn-id: https://core.svn.wordpress.org/trunk@52333 1a063a9b-81f0-0310-95a4-ce76da25c4cd
…classes. This change updates methods visibility from `private` to `protected` and adds late static binding. Original PRs from Gutenberg repository: - WordPress/gutenberg#38625 - WordPress/gutenberg#38671 Props oandregal, Mamaduka, kapilpaul. Merges [52744] to the 5.9 branch. Fixes #55178. See #55179. git-svn-id: https://develop.svn.wordpress.org/branches/5.9@52746 602fd350-edb4-49c9-b593-d223f7449a82
…classes. This change updates methods visibility from `private` to `protected` and adds late static binding. Original PRs from Gutenberg repository: - WordPress/gutenberg#38625 - WordPress/gutenberg#38671 Props oandregal, Mamaduka, kapilpaul. Merges [52744] to the 5.9 branch. Fixes #55178. See #55179. Built from https://develop.svn.wordpress.org/branches/5.9@52746 git-svn-id: http://core.svn.wordpress.org/branches/5.9@52335 1a063a9b-81f0-0310-95a4-ce76da25c4cd
…classes. This change updates methods visibility from `private` to `protected` and adds late static binding. Original PRs from Gutenberg repository: - WordPress/gutenberg#38625 - WordPress/gutenberg#38671 Props oandregal, Mamaduka, kapilpaul. Merges [52744] to the 5.9 branch. Fixes #55178. See #55179. Built from https://develop.svn.wordpress.org/branches/5.9@52746 git-svn-id: https://core.svn.wordpress.org/branches/5.9@52335 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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. |
…ECTOR` made it in. It should be static to retain the inheritance powers introduced in #38671
…ECTOR` made it in. It should be static to retain the inheritance powers introduced in #38671
…classes. This change updates methods visibility from `private` to `protected` and adds late static binding. Original PRs from Gutenberg repository: - WordPress/gutenberg#38625 - WordPress/gutenberg#38671 Props oandregal, Mamaduka, kapilpaul. Merges [52744] to the 5.9 branch. Fixes #55178. See #55179. Built from https://develop.svn.wordpress.org/branches/5.9@52746
…classes. This change updates methods visibility from `private` to `protected` and adds late static binding. Original PRs from Gutenberg repository: - WordPress/gutenberg#38625 - WordPress/gutenberg#38671 Props oandregal, Mamaduka, kapilpaul. Merges [52744] to the 5.9 branch. Fixes #55178. See #55179. Built from https://develop.svn.wordpress.org/branches/5.9@52746 git-svn-id: http://core.svn.wordpress.org/branches/5.9@52335 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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 ofself::
for accessing variables and functions.How to tests