From f9c9dca6510757decbdebb80da57d84ed632c1a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Tue, 6 Jun 2023 13:13:31 +0200 Subject: [PATCH 1/4] Update wp_get_global_styles PHP doc block --- src/wp-includes/global-styles-and-settings.php | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/wp-includes/global-styles-and-settings.php b/src/wp-includes/global-styles-and-settings.php index 082370e7b9720..a6b608a3d3cd4 100644 --- a/src/wp-includes/global-styles-and-settings.php +++ b/src/wp-includes/global-styles-and-settings.php @@ -92,6 +92,8 @@ function wp_get_global_settings( $path = array(), $context = array() ) { * Gets the styles resulting of merging core, theme, and user data. * * @since 5.9.0 + * @since 6.3.0 the internal format "var:preset|color|secondary" is always resolved + * to the standard form "var(--wp--preset--font-size--small)". * * @param array $path Path to the specific style to retrieve. Optional. * If empty, will return all styles. @@ -115,7 +117,6 @@ function wp_get_global_styles( $path = array(), $context = array() ) { if ( isset( $context['origin'] ) && 'base' === $context['origin'] ) { $origin = 'theme'; } - $styles = WP_Theme_JSON_Resolver::get_merged_data( $origin )->get_raw_data()['styles']; return _wp_array_get( $styles, $path, $styles ); From ab256a56846e84fa29a4858b12d80528456a2d81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Tue, 6 Jun 2023 13:14:56 +0200 Subject: [PATCH 2/4] Add test --- tests/phpunit/tests/theme/wpThemeJson.php | 65 +++++++++++++++++++++++ 1 file changed, 65 insertions(+) diff --git a/tests/phpunit/tests/theme/wpThemeJson.php b/tests/phpunit/tests/theme/wpThemeJson.php index ddbceeadd1994..265658042870a 100644 --- a/tests/phpunit/tests/theme/wpThemeJson.php +++ b/tests/phpunit/tests/theme/wpThemeJson.php @@ -4744,4 +4744,69 @@ public function data_process_blocks_custom_css() { ), ); } + + public function test_internal_syntax_is_converted_to_css_variables() { + $result = new WP_Theme_JSON( + array( + 'version' => WP_Theme_JSON::LATEST_SCHEMA, + 'styles' => array( + 'color' => array( + 'background' => 'var:preset|color|primary', + 'text' => 'var(--wp--preset--color--secondary)', + ), + 'elements' => array( + 'link' => array( + 'color' => array( + 'background' => 'var:preset|color|pri', + 'text' => 'var(--wp--preset--color--sec)', + ), + ), + ), + 'blocks' => array( + 'core/post-terms' => array( + 'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--small)' ), + 'color' => array( 'background' => 'var:preset|color|secondary' ), + ), + 'core/navigation' => array( + 'elements' => array( + 'link' => array( + 'color' => array( + 'background' => 'var:preset|color|p', + 'text' => 'var(--wp--preset--color--s)', + ), + ), + ), + ), + 'core/quote' => array( + 'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--d)' ), + 'color' => array( 'background' => 'var:preset|color|d' ), + 'variations' => array( + 'plain' => array( + 'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--s)' ), + 'color' => array( 'background' => 'var:preset|color|s' ), + ), + ), + ), + ), + ), + ) + ); + $styles = $result->get_raw_data()['styles']; + + $this->assertEquals( 'var(--wp--preset--color--primary)', $styles['color']['background'], 'Top level: Assert the originally correct values are still correct.' ); + $this->assertEquals( 'var(--wp--preset--color--secondary)', $styles['color']['text'], 'Top level: Assert the originally correct values are still correct.' ); + + $this->assertEquals( 'var(--wp--preset--color--pri)', $styles['elements']['link']['color']['background'], 'Element top level: Assert the originally correct values are still correct.' ); + $this->assertEquals( 'var(--wp--preset--color--sec)', $styles['elements']['link']['color']['text'], 'Element top level: Assert the originally correct values are still correct.' ); + + $this->assertEquals( 'var(--wp--preset--font-size--small)', $styles['blocks']['core/post-terms']['typography']['fontSize'], 'Top block level: Assert the originally correct values are still correct.' ); + $this->assertEquals( 'var(--wp--preset--color--secondary)', $styles['blocks']['core/post-terms']['color']['background'], 'Top block level: Assert the internal variables are convert to CSS custom variables.' ); + + $this->assertEquals( 'var(--wp--preset--color--p)', $styles['blocks']['core/navigation']['elements']['link']['color']['background'], 'Elements block level: Assert the originally correct values are still correct.' ); + $this->assertEquals( 'var(--wp--preset--color--s)', $styles['blocks']['core/navigation']['elements']['link']['color']['text'], 'Elements block level: Assert the originally correct values are still correct.' ); + + $this->assertEquals( 'var(--wp--preset--font-size--s)', $styles['blocks']['core/quote']['variations']['plain']['typography']['fontSize'], 'Style variations: Assert the originally correct values are still correct.' ); + $this->assertEquals( 'var(--wp--preset--color--s)', $styles['blocks']['core/quote']['variations']['plain']['color']['background'], 'Style variations: Assert the internal variables are convert to CSS custom variables.' ); + + } } From fa0b644f234acb5b69df2071018d3550ff766ee8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Tue, 6 Jun 2023 13:21:03 +0200 Subject: [PATCH 3/4] Port changes to class-wp-theme-json.php --- src/wp-includes/class-wp-theme-json.php | 72 ++++++++++++++++++------- 1 file changed, 53 insertions(+), 19 deletions(-) diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php index f21a32fa41cc1..1d990557fae32 100644 --- a/src/wp-includes/class-wp-theme-json.php +++ b/src/wp-includes/class-wp-theme-json.php @@ -766,7 +766,7 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n if ( empty( $result ) ) { unset( $output[ $subtree ] ); } else { - $output[ $subtree ] = $result; + $output[ $subtree ] = static::resolve_custom_css_format( $result ); } } @@ -1913,10 +1913,6 @@ protected static function compute_style_properties( $styles, $settings = array() /** * Returns the style property for the given path. * - * It also converts CSS Custom Property stored as - * "var:preset|color|secondary" to the form - * "--wp--preset--color--secondary". - * * It also converts references to a path to the value * stored at that location, e.g. * { "ref": "style.color.background" } => "#fff". @@ -1924,6 +1920,10 @@ protected static function compute_style_properties( $styles, $settings = array() * @since 5.8.0 * @since 5.9.0 Added support for values of array type, which are returned as is. * @since 6.1.0 Added the `$theme_json` parameter. + * @since 6.3.0 It no longer converts the internal format "var:preset|color|secondary" + * to the standard form "--wp--preset--color--secondary". + * This is already done by the sanitize method, + * so every property will be in the standard form. * * @param array $styles Styles subtree. * @param array $path Which property to process. @@ -1973,20 +1973,6 @@ protected static function get_property_value( $styles, $path, $theme_json = null return $value; } - // Convert custom CSS properties. - $prefix = 'var:'; - $prefix_len = strlen( $prefix ); - $token_in = '|'; - $token_out = '--'; - if ( 0 === strncmp( $value, $prefix, $prefix_len ) ) { - $unwrapped_name = str_replace( - $token_in, - $token_out, - substr( $value, $prefix_len ) - ); - $value = "var(--wp--$unwrapped_name)"; - } - return $value; } @@ -3435,4 +3421,52 @@ public function set_spacing_sizes() { _wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes ); } + + /** + * This is used to convert the internal representation of variables to the CSS representation. + * For example, `var:preset|color|vivid-green-cyan` becomes `var(--wp--preset--color--vivid-green-cyan)`. + * + * @since 6.3.0 + * @param string $value The variable such as var:preset|color|vivid-green-cyan to convert. + * @return string The converted variable. + */ + private static function convert_custom_properties( $value ) { + $prefix = 'var:'; + $prefix_len = strlen( $prefix ); + $token_in = '|'; + $token_out = '--'; + if ( 0 === strpos( $value, $prefix ) ) { + $unwrapped_name = str_replace( + $token_in, + $token_out, + substr( $value, $prefix_len ) + ); + $value = "var(--wp--$unwrapped_name)"; + } + + return $value; + } + + /** + * Given a tree, converts the internal representation of variables to the CSS representation. + * It is recursive and modifies the input in-place. + * + * @since 6.3.0 + * @param array $tree Input to process. + * @return array The modified $tree. + */ + private static function resolve_custom_css_format( $tree ) { + $prefix = 'var:'; + + foreach ( $tree as $key => $data ) { + if ( is_string( $data ) && 0 === strpos( $data, $prefix ) ) { + $tree[ $key ] = self::convert_custom_properties( $data ); + } elseif ( is_array( $data ) ) { + $tree[ $key ] = self::resolve_custom_css_format( $data ); + } + } + + return $tree; + } + } From a087a740260c9b2f4087765b417151b8bae70330 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Tue, 6 Jun 2023 13:49:49 +0200 Subject: [PATCH 4/4] Update test data --- tests/phpunit/tests/theme/wpThemeJson.php | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/tests/phpunit/tests/theme/wpThemeJson.php b/tests/phpunit/tests/theme/wpThemeJson.php index 265658042870a..88df5c64485e2 100644 --- a/tests/phpunit/tests/theme/wpThemeJson.php +++ b/tests/phpunit/tests/theme/wpThemeJson.php @@ -1971,30 +1971,30 @@ public function test_remove_insecure_properties_removes_unsafe_styles() { 'version' => WP_Theme_JSON::LATEST_SCHEMA, 'styles' => array( 'color' => array( - 'text' => 'var:preset|color|dark-red', + 'text' => 'var(--wp--preset--color--dark-red)', ), 'elements' => array( 'link' => array( 'color' => array( - 'text' => 'var:preset|color|dark-pink', - 'background' => 'var:preset|color|dark-red', + 'text' => 'var(--wp--preset--color--dark-pink)', + 'background' => 'var(--wp--preset--color--dark-red)', ), ), ), 'blocks' => array( 'core/image' => array( 'filter' => array( - 'duotone' => 'var:preset|duotone|blue-red', + 'duotone' => 'var(--wp--preset--duotone--blue-red)', ), ), 'core/group' => array( 'color' => array( - 'text' => 'var:preset|color|dark-gray', + 'text' => 'var(--wp--preset--color--dark-gray)', ), 'elements' => array( 'link' => array( 'color' => array( - 'text' => 'var:preset|color|dark-pink', + 'text' => 'var(--wp--preset--color--dark-pink)', ), ), ),