From 9e650efbb8c28ba0fbc08e6d4def941ce767fa8f Mon Sep 17 00:00:00 2001 From: ramonopoly Date: Mon, 26 Aug 2024 05:40:16 +0000 Subject: [PATCH] Background images: resolve theme.json dynamic ref values and ensure appropriate style default values MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Built from https://develop.svn.wordpress.org/trunk@58936 git-svn-id: http://core.svn.wordpress.org/trunk@58332 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/block-supports/background.php | 2 +- wp-includes/class-wp-theme-json.php | 57 ++++++++++++++++++++--- wp-includes/version.php | 2 +- 3 files changed, 52 insertions(+), 9 deletions(-) diff --git a/wp-includes/block-supports/background.php b/wp-includes/block-supports/background.php index 4e7995f53f..6ef9bbb9a6 100644 --- a/wp-includes/block-supports/background.php +++ b/wp-includes/block-supports/background.php @@ -75,7 +75,7 @@ function wp_render_background_support( $block_content, $block ) { // If the background size is set to `contain` and no position is set, set the position to `center`. if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) { - $background_styles['backgroundPosition'] = 'center'; + $background_styles['backgroundPosition'] = '50% 50%'; } } diff --git a/wp-includes/class-wp-theme-json.php b/wp-includes/class-wp-theme-json.php index d05575b29d..cbe266bfad 100644 --- a/wp-includes/class-wp-theme-json.php +++ b/wp-includes/class-wp-theme-json.php @@ -2295,7 +2295,7 @@ class WP_Theme_JSON { * * array( * 'name' => 'property_name', - * 'value' => 'property_value, + * 'value' => 'property_value', * ) * * @since 5.8.0 @@ -2303,6 +2303,7 @@ class WP_Theme_JSON { * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters. * @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. * @param array $settings Theme settings. @@ -2356,10 +2357,27 @@ class WP_Theme_JSON { } } - // 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; + } } // Skip if empty and not "0" or value represents array of longhand values. @@ -2421,6 +2439,7 @@ class WP_Theme_JSON { * 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. + * @since 6.7.0 Added support for background image refs. * * @param array $styles Styles subtree. * @param array $path Which property to process. @@ -2437,14 +2456,18 @@ class WP_Theme_JSON { /* * 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; } @@ -3083,6 +3106,7 @@ class WP_Theme_JSON { * * @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. */ @@ -3206,6 +3230,25 @@ class WP_Theme_JSON { } } } + + /* + * 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 ); + } + } } /** diff --git a/wp-includes/version.php b/wp-includes/version.php index ce8d934093..38331689fd 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.7-alpha-58935'; +$wp_version = '6.7-alpha-58936'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.