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

Timestamp:

08/26/2024 05:38:05 AM (17 months ago)

Author:

ramonopoly

Message:

Background images: resolve theme.json dynamic ref values and ensure appropriate style default values

The commit syncs the following changes from Gutenberg:

• Background images: add support for theme.json ref value resolution gutenberg#64128
• Background images: ensure appropriate default values gutenberg#64192
• Background image: ensure consistency with defaults and fix reset/remove functionality gutenberg#64328

These changes brings consistency to the default background image styles WordPress applies to user uploaded images, and adds support for ref resolution to "background" style properties.

Props andrewserong, aaronrobertshaw.

Fixes #61858

File:

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

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

@@ -2296 +2296 @@
      *     array(
      *       'name'  => 'property_name',
-     *       'value' => 'property_value,
+     *       'value' => 'property_value',
      *     )
      *
@@ -2304 +2304 @@
      * @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set.
      * @since 6.6.0 Pass current theme JSON settings to wp_get_typography_font_size_value(), and process background properties.
+     * @since 6.7.0 `ref` resolution of background properties, and assigning custom default values.
      *
      * @param array   $styles Styles to process.
@@ -2357 +2358 @@
             }
 
-            // Processes background styles.
-            if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) {
-                $background_styles = wp_style_engine_get_styles( array( 'background' => $styles['background'] ) );
-                $value             = isset( $background_styles['declarations'][ $css_property ] ) ? $background_styles['declarations'][ $css_property ] : $value;
+            /*
+             * Processes background image styles.
+             * If the value is a URL, it will be converted to a CSS `url()` value.
+             * For uploaded image (images with a database ID), apply size and position defaults,
+             * equal to those applied in block supports in lib/background.php.
+             */
+            if ( 'background-image' === $css_property && ! empty( $value ) ) {
+                $background_styles = wp_style_engine_get_styles(
+                    array( 'background' => array( 'backgroundImage' => $value ) )
+                );
+                $value             = $background_styles['declarations'][ $css_property ];
+            }
+            if ( empty( $value ) && static::ROOT_BLOCK_SELECTOR !== $selector && ! empty( $styles['background']['backgroundImage']['id'] ) ) {
+                if ( 'background-size' === $css_property ) {
+                    $value = 'cover';
+                }
+                // If the background size is set to `contain` and no position is set, set the position to `center`.
+                if ( 'background-position' === $css_property ) {
+                    $background_size = $styles['background']['backgroundSize'] ?? null;
+                    $value           = 'contain' === $background_size ? '50% 50%' : null;
+                }
             }
 
@@ -2422 +2440 @@
      *              This is already done by the sanitize method,
      *              so every property will be in the standard form.
+     * @since 6.7.0 Added support for background image refs.
      *
      * @param array $styles Styles subtree.
@@ -2438 +2457 @@
         /*
          * This converts references to a path to the value at that path
-         * where the values is an array with a "ref" key, pointing to a path.
+         * where the value is an array with a "ref" key, pointing to a path.
          * For example: { "ref": "style.color.background" } => "#fff".
+         * In the case of backgroundImage, if both a ref and a URL are present in the value,
+         * the URL takes precedence and the ref is ignored.
          */
         if ( is_array( $value ) && isset( $value['ref'] ) ) {
             $value_path = explode( '.', $value['ref'] );
             $ref_value  = _wp_array_get( $theme_json, $value_path );
+            // Background Image refs can refer to a string or an array containing a URL string.
+            $ref_value_url = $ref_value['url'] ?? null;
             // Only use the ref value if we find anything.
-            if ( ! empty( $ref_value ) && is_string( $ref_value ) ) {
+            if ( ! empty( $ref_value ) && ( is_string( $ref_value ) || is_string( $ref_value_url ) ) ) {
                 $value = $ref_value;
             }
@@ -3084 +3107 @@
      * @since 5.8.0
      * @since 5.9.0 Duotone preset also has origins.
+     * @since 6.7.0 Replace background image objects during merge.
      *
      * @param WP_Theme_JSON $incoming Data to merge.
@@ -3205 +3229 @@
                     _wp_array_set( $this->theme_json, $path, $content );
                 }
+            }
+        }
+
+        /*
+         * Style values are merged at the leaf level, however
+         * some values provide exceptions, namely style values that are
+         * objects and represent unique definitions for the style.
+         */
+        $style_nodes = static::get_styles_block_nodes();
+        foreach ( $style_nodes as $style_node ) {
+            $path = $style_node['path'];
+            /*
+             * Background image styles should be replaced, not merged,
+             * as they themselves are specific object definitions for the style.
+             */
+            $background_image_path = array_merge( $path, static::PROPERTIES_METADATA['background-image'] );
+            $content               = _wp_array_get( $incoming_data, $background_image_path, null );
+            if ( isset( $content ) ) {
+                _wp_array_set( $this->theme_json, $background_image_path, $content );
             }
         }