Make WordPress Core


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

wp_get_global_styles: return the standard format for CSS Custom Properties.

Props samnajian, hellofromtonya, isabel_brison.
Fixes #58467.

File:
1 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}
Note: See TracChangeset for help on using the changeset viewer.