WordPress.org
Get WordPress

Make WordPress Core

Changeset 55959


Ignore:
Timestamp:
06/21/2023 07:54:01 AM (15 months 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.