WordPress.org
Get WordPress

Make WordPress Core

Changeset 55959


Ignore:
Timestamp:
06/21/2023 07:54:01 AM (3 years ago)
Author:
oandregal
Message:

wp_get_global_styles: return the standard format for CSS Custom Properties.

Props samnajian, hellofromtonya, isabel_brison.
Fixes #58467.

Location:
trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/class-wp-theme-json.php

    r55958 r55959  
    780780                                unset( $output[ $subtree ] );
    781781                        } else {
    782                                 $output[ $subtree ] = $result;
     782                                $output[ $subtree ] = static::resolve_custom_css_format( $result );
    783783                        }
    784784                }
    … …  
    19591959         * Returns the style property for the given path.
    19601960         *
    1961          * It also converts CSS Custom Property stored as
    1962          * "var:preset|color|secondary" to the form
    1963          * "--wp--preset--color--secondary".
    1964          *
    19651961         * It also converts references to a path to the value
    19661962         * stored at that location, e.g.
    … …  
    19701966         * @since 5.9.0 Added support for values of array type, which are returned as is.
    19711967         * @since 6.1.0 Added the `$theme_json` parameter.
     1968         * @since 6.3.0 It no longer converts the internal format "var:preset|color|secondary"
     1969         *              to the standard form "--wp--preset--color--secondary".
     1970         *              This is already done by the sanitize method,
     1971         *              so every property will be in the standard form.
    19721972         *
    19731973         * @param array $styles Styles subtree.
    … …  
    20172017                if ( is_array( $value ) ) {
    20182018                        return $value;
    2019                 }
    2020 
    2021                 // Convert custom CSS properties.
    2022                 $prefix     = 'var:';
    2023                 $prefix_len = strlen( $prefix );
    2024                 $token_in   = '|';
    2025                 $token_out  = '--';
    2026                 if ( 0 === strncmp( $value, $prefix, $prefix_len ) ) {
    2027                         $unwrapped_name = str_replace(
    2028                                 $token_in,
    2029                                 $token_out,
    2030                                 substr( $value, $prefix_len )
    2031                         );
    2032                         $value          = "var(--wp--$unwrapped_name)";
    20332019                }
    20342020
    … …  
    34893475                _wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes );
    34903476        }
     3477
     3478        /**
     3479         * This is used to convert the internal representation of variables to the CSS representation.
     3480         * For example, `var:preset|color|vivid-green-cyan` becomes `var(--wp--preset--color--vivid-green-cyan)`.
     3481         *
     3482         * @since 6.3.0
     3483         * @param string $value The variable such as var:preset|color|vivid-green-cyan to convert.
     3484         * @return string The converted variable.
     3485         */
     3486        private static function convert_custom_properties( $value ) {
     3487                $prefix     = 'var:';
     3488                $prefix_len = strlen( $prefix );
     3489                $token_in   = '|';
     3490                $token_out  = '--';
     3491                if ( 0 === strpos( $value, $prefix ) ) {
     3492                        $unwrapped_name = str_replace(
     3493                                $token_in,
     3494                                $token_out,
     3495                                substr( $value, $prefix_len )
     3496                        );
     3497                        $value          = "var(--wp--$unwrapped_name)";
     3498                }
     3499
     3500                return $value;
     3501        }
     3502
     3503        /**
     3504         * Given a tree, converts the internal representation of variables to the CSS representation.
     3505         * It is recursive and modifies the input in-place.
     3506         *
     3507         * @since 6.3.0
     3508         * @param array $tree   Input to process.
     3509         * @return array The modified $tree.
     3510         */
     3511        private static function resolve_custom_css_format( $tree ) {
     3512                $prefix = 'var:';
     3513
     3514                foreach ( $tree as $key => $data ) {
     3515                        if ( is_string( $data ) && 0 === strpos( $data, $prefix ) ) {
     3516                                $tree[ $key ] = self::convert_custom_properties( $data );
     3517                        } elseif ( is_array( $data ) ) {
     3518                                $tree[ $key ] = self::resolve_custom_css_format( $data );
     3519                        }
     3520                }
     3521
     3522                return $tree;
     3523        }
     3524
    34913525}

  • trunk/src/wp-includes/global-styles-and-settings.php

    r55926 r55959  
    9393 *
    9494 * @since 5.9.0
     95 * @since 6.3.0 the internal format "var:preset|color|secondary" is always resolved
     96 *              to the standard form "var(--wp--preset--font-size--small)".
    9597 *
    9698 * @param array $path    Path to the specific style to retrieve. Optional.
    … …  
    116118                $origin = 'theme';
    117119        }
    118 
    119120        $styles = WP_Theme_JSON_Resolver::get_merged_data( $origin )->get_raw_data()['styles'];
    120121

  • trunk/tests/phpunit/tests/theme/wpThemeJson.php

    r55956 r55959  
    19731973                        'styles'  => array(
    19741974                                'color'    => array(
    1975                                         'text' => 'var:preset|color|dark-red',
     1975                                        'text' => 'var(--wp--preset--color--dark-red)',
    19761976                                ),
    19771977                                'elements' => array(
    19781978                                        'link' => array(
    19791979                                                'color' => array(
    1980                                                         'text'       => 'var:preset|color|dark-pink',
    1981                                                         'background' => 'var:preset|color|dark-red',
     1980                                                        'text'       => 'var(--wp--preset--color--dark-pink)',
     1981                                                        'background' => 'var(--wp--preset--color--dark-red)',
    19821982                                                ),
    19831983                                        ),
    … …  
    19861986                                        'core/image' => array(
    19871987                                                'filter' => array(
    1988                                                         'duotone' => 'var:preset|duotone|blue-red',
     1988                                                        'duotone' => 'var(--wp--preset--duotone--blue-red)',
    19891989                                                ),
    19901990                                        ),
    19911991                                        'core/group' => array(
    19921992                                                'color'    => array(
    1993                                                         'text' => 'var:preset|color|dark-gray',
     1993                                                        'text' => 'var(--wp--preset--color--dark-gray)',
    19941994                                                ),
    19951995                                                'elements' => array(
    19961996                                                        'link' => array(
    19971997                                                                'color' => array(
    1998                                                                         'text' => 'var:preset|color|dark-pink',
     1998                                                                        'text' => 'var(--wp--preset--color--dark-pink)',
    19991999                                                                ),
    20002000                                                        ),
    … …  
    47074707                );
    47084708        }
     4709
     4710        public function test_internal_syntax_is_converted_to_css_variables() {
     4711                $result = new WP_Theme_JSON(
     4712                        array(
     4713                                'version' => WP_Theme_JSON::LATEST_SCHEMA,
     4714                                'styles'  => array(
     4715                                        'color'    => array(
     4716                                                'background' => 'var:preset|color|primary',
     4717                                                'text'       => 'var(--wp--preset--color--secondary)',
     4718                                        ),
     4719                                        'elements' => array(
     4720                                                'link' => array(
     4721                                                        'color' => array(
     4722                                                                'background' => 'var:preset|color|pri',
     4723                                                                'text'       => 'var(--wp--preset--color--sec)',
     4724                                                        ),
     4725                                                ),
     4726                                        ),
     4727                                        'blocks'   => array(
     4728                                                'core/post-terms' => array(
     4729                                                        'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--small)' ),
     4730                                                        'color'      => array( 'background' => 'var:preset|color|secondary' ),
     4731                                                ),
     4732                                                'core/navigation' => array(
     4733                                                        'elements' => array(
     4734                                                                'link' => array(
     4735                                                                        'color' => array(
     4736                                                                                'background' => 'var:preset|color|p',
     4737                                                                                'text'       => 'var(--wp--preset--color--s)',
     4738                                                                        ),
     4739                                                                ),
     4740                                                        ),
     4741                                                ),
     4742                                                'core/quote'      => array(
     4743                                                        'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--d)' ),
     4744                                                        'color'      => array( 'background' => 'var:preset|color|d' ),
     4745                                                        'variations' => array(
     4746                                                                'plain' => array(
     4747                                                                        'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--s)' ),
     4748                                                                        'color'      => array( 'background' => 'var:preset|color|s' ),
     4749                                                                ),
     4750                                                        ),
     4751                                                ),
     4752                                        ),
     4753                                ),
     4754                        )
     4755                );
     4756                $styles = $result->get_raw_data()['styles'];
     4757
     4758                $this->assertEquals( 'var(--wp--preset--color--primary)', $styles['color']['background'], 'Top level: Assert the originally correct values are still correct.' );
     4759                $this->assertEquals( 'var(--wp--preset--color--secondary)', $styles['color']['text'], 'Top level: Assert the originally correct values are still correct.' );
     4760
     4761                $this->assertEquals( 'var(--wp--preset--color--pri)', $styles['elements']['link']['color']['background'], 'Element top level: Assert the originally correct values are still correct.' );
     4762                $this->assertEquals( 'var(--wp--preset--color--sec)', $styles['elements']['link']['color']['text'], 'Element top level: Assert the originally correct values are still correct.' );
     4763
     4764                $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.' );
     4765                $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.' );
     4766
     4767                $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.' );
     4768                $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.' );
     4769
     4770                $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.' );
     4771                $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.' );
     4772
     4773        }
    47094774}
Note: See TracChangeset for help on using the changeset viewer.