Skip to content

Commit

Permalink
Background images: resolve theme.json dynamic ref values and ensure a…
Browse files Browse the repository at this point in the history 
…ppropriate 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




git-svn-id: https://develop.svn.wordpress.org/trunk@58936 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information
@ramonjd
ramonjd committed Aug 26, 2024
1 parent a3520d2 commit 830d66c
Show file tree
Hide file tree
Showing 4 changed files with 258 additions and 26 deletions.
2 changes: 1 addition & 1 deletion src/wp-includes/block-supports/background.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%';
}
}

Expand Down
57 changes: 50 additions & 7 deletions src/wp-includes/class-wp-theme-json.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2295,14 +2295,15 @@ protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
*
* array(
* 'name' => 'property_name',
* 'value' => 'property_value,
* 'value' => 'property_value',
* )
*
* @since 5.8.0
* @since 5.9.0 Added the `$settings` and `$properties` parameters.
* @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.
Expand Down Expand Up @@ -2356,10 +2357,27 @@ protected static function compute_style_properties( $styles, $settings = array()
}
}

// 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.
Expand Down Expand Up @@ -2421,6 +2439,7 @@ protected static function compute_style_properties( $styles, $settings = array()
* 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.
Expand All @@ -2437,14 +2456,18 @@ protected static function get_property_value( $styles, $path, $theme_json = null

/*
* 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;
}

Expand Down Expand Up @@ -3083,6 +3106,7 @@ protected static function get_metadata_boolean( $data, $path, $default_value = f
*
* @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.
*/
Expand Down Expand Up @@ -3206,6 +3230,25 @@ public function merge( $incoming ) {
}
}
}

/*
* 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 );
}
}
}

/**
Expand Down
3 changes: 2 additions & 1 deletion tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ public function filter_set_theme_root() {
* @ticket 60175
* @ticket 61123
* @ticket 61720
* @ticket 61858
*
* @covers ::wp_render_background_support
*
Expand Down Expand Up @@ -154,7 +155,7 @@ public function data_background_block_support() {
'backgroundSize' => 'contain',
'backgroundAttachment' => 'fixed',
),
'expected_wrapper' => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:center;background-repeat:no-repeat;background-size:contain;background-attachment:fixed;">Content</div>',
'expected_wrapper' => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;background-attachment:fixed;">Content</div>',
'wrapper' => '<div>Content</div>',
),
'background image style is appended if a style attribute already exists' => array(
Expand Down
Loading

0 comments on commit 830d66c

Please sign in to comment.