Changeset 55986 for trunk/src/wp-includes/class-wp-theme-json.php

Timestamp:

06/22/2023 08:42:42 AM (3 years ago)

Author:

oandregal

Message:

wp_get_global_styles: allow transforming the CSS Custom Properties into the values they represent.

Props samnajian, ramonopoly, isabel_brison.
Fixes #58588.

File:

• trunk/src/wp-includes/class-wp-theme-json.php (modified) (1 diff)

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

@@ -3530 +3530 @@
     }
 
+    /**
+     * Replaces CSS variables with their values in place.
+     *
+     * @since 6.3.0
+     * @param array $styles CSS declarations to convert.
+     * @param array $values key => value pairs to use for replacement.
+     * @return array
+     */
+    private static function convert_variables_to_value( $styles, $values ) {
+        foreach ( $styles as $key => $style ) {
+            if ( is_array( $style ) ) {
+                $styles[ $key ] = self::convert_variables_to_value( $style, $values );
+                continue;
+            }
+
+            if ( 0 <= strpos( $style, 'var(' ) ) {
+                // find all the variables in the string in the form of var(--variable-name, fallback), with fallback in the second capture group.
+
+                $has_matches = preg_match_all( '/var\(([^),]+)?,?\s?(\S+)?\)/', $style, $var_parts );
+
+                if ( $has_matches ) {
+                    $resolved_style = $styles[ $key ];
+                    foreach ( $var_parts[1] as $index => $var_part ) {
+                        $key_in_values   = 'var(' . $var_part . ')';
+                        $rule_to_replace = $var_parts[0][ $index ]; // the css rule to replace e.g. var(--wp--preset--color--vivid-green-cyan).
+                        $fallback        = $var_parts[2][ $index ]; // the fallback value.
+                        $resolved_style  = str_replace(
+                            array(
+                                $rule_to_replace,
+                                $fallback,
+                            ),
+                            array(
+                                isset( $values[ $key_in_values ] ) ? $values[ $key_in_values ] : $rule_to_replace,
+                                isset( $values[ $fallback ] ) ? $values[ $fallback ] : $fallback,
+                            ),
+                            $resolved_style
+                        );
+                    }
+                    $styles[ $key ] = $resolved_style;
+                }
+            }
+        }
+
+        return $styles;
+    }
+
+    /**
+     * Resolves the values of CSS variables in the given styles.
+     *
+     * @since 6.3.0
+     * @param WP_Theme_JSON $theme_json The theme json resolver.
+     *
+     * @return WP_Theme_JSON The $theme_json with resolved variables.
+     */
+    public static function resolve_variables( $theme_json ) {
+        $settings    = $theme_json->get_settings();
+        $styles      = $theme_json->get_raw_data()['styles'];
+        $preset_vars = static::compute_preset_vars( $settings, static::VALID_ORIGINS );
+        $theme_vars  = static::compute_theme_vars( $settings );
+        $vars        = array_reduce(
+            array_merge( $preset_vars, $theme_vars ),
+            function( $carry, $item ) {
+                $name                    = $item['name'];
+                $carry[ "var({$name})" ] = $item['value'];
+                return $carry;
+            },
+            array()
+        );
+
+        $theme_json->theme_json['styles'] = self::convert_variables_to_value( $styles, $vars );
+        return $theme_json;
+    }
+
 }