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

Timestamp:

06/21/2023 07:54:01 AM (16 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:

• trunk/src/wp-includes/class-wp-theme-json.php (modified) (5 diffs)

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

@@ -780 +780 @@
                 unset( $output[ $subtree ] );
             } else {
-                $output[ $subtree ] = $result;
+                $output[ $subtree ] = static::resolve_custom_css_format( $result );
             }
         }
@@ -1959 +1959 @@
      * 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.
@@ -1970 +1966 @@
      * @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.
@@ -2017 +2017 @@
         if ( is_array( $value ) ) {
             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)";
         }
 
@@ -3489 +3475 @@
         _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;
+    }
+
 }