From 05fda73814838cf1b83b6c94124581fce08bfecf Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 2 May 2024 17:04:39 +1000 Subject: [PATCH] Initial commit: Syncing changes for Global styles: background UI controls #59454 Global styles: add background image to top-level theme.json styles #59354 Background block supports: move block support defaults to gutenberg_render_background_support and revert gutenberg_get_background_support_styles #59889 --- src/wp-includes/block-supports/background.php | 47 +++++-------------- src/wp-includes/class-wp-theme-json.php | 23 +++++++++ 2 files changed, 34 insertions(+), 36 deletions(-) diff --git a/src/wp-includes/block-supports/background.php b/src/wp-includes/block-supports/background.php index 9b82e6a9d598d..c1b3d4d0940fa 100644 --- a/src/wp-includes/block-supports/background.php +++ b/src/wp-includes/block-supports/background.php @@ -54,52 +54,27 @@ function wp_render_background_support( $block_content, $block ) { if ( ! $has_background_image_support || - wp_should_skip_block_supports_serialization( $block_type, 'background', 'backgroundImage' ) + wp_should_skip_block_supports_serialization( $block_type, 'background', 'backgroundImage' ) || + ! isset( $block_attributes['style']['background'] ) ) { return $block_content; } - $background_image_source = isset( $block_attributes['style']['background']['backgroundImage']['source'] ) - ? $block_attributes['style']['background']['backgroundImage']['source'] - : null; - $background_image_url = isset( $block_attributes['style']['background']['backgroundImage']['url'] ) - ? $block_attributes['style']['background']['backgroundImage']['url'] - : null; + $background_styles = array(); + $background_styles['backgroundSize'] = isset( $block_attributes['style']['background']['backgroundSize'] ) ? $block_attributes['style']['background']['backgroundSize'] : 'cover'; + $background_styles['backgroundImage'] = isset( $block_attributes['style']['background']['backgroundImage'] ) ? $block_attributes['style']['background']['backgroundImage'] : array(); - if ( ! $background_image_source && ! $background_image_url ) { - return $block_content; - } - - $background_size = isset( $block_attributes['style']['background']['backgroundSize'] ) - ? $block_attributes['style']['background']['backgroundSize'] - : 'cover'; - $background_position = isset( $block_attributes['style']['background']['backgroundPosition'] ) - ? $block_attributes['style']['background']['backgroundPosition'] - : null; - $background_repeat = isset( $block_attributes['style']['background']['backgroundRepeat'] ) - ? $block_attributes['style']['background']['backgroundRepeat'] - : null; - - $background_block_styles = array(); - - if ( - 'file' === $background_image_source && - $background_image_url - ) { - // Set file based background URL. - $background_block_styles['backgroundImage']['url'] = $background_image_url; - // Only output the background size and repeat when an image url is set. - $background_block_styles['backgroundSize'] = $background_size; - $background_block_styles['backgroundRepeat'] = $background_repeat; - $background_block_styles['backgroundPosition'] = $background_position; + if ( isset( $background_styles['backgroundImage']['source'] ) && 'file' === $background_styles['backgroundImage']['source'] && isset( $background_styles['backgroundImage']['url'] ) ) { + $background_styles['backgroundPosition'] = isset( $block_attributes['style']['background']['backgroundPosition'] ) ? $block_attributes['style']['background']['backgroundPosition'] : null; + $background_styles['backgroundRepeat'] = isset( $block_attributes['style']['background']['backgroundRepeat'] ) ? $block_attributes['style']['background']['backgroundRepeat'] : null; // If the background size is set to `contain` and no position is set, set the position to `center`. - if ( 'contain' === $background_size && ! isset( $background_position ) ) { - $background_block_styles['backgroundPosition'] = 'center'; + if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) { + $background_styles['backgroundPosition'] = 'center'; } } - $styles = wp_style_engine_get_styles( array( 'background' => $background_block_styles ) ); + $styles = wp_style_engine_get_styles( array( 'background' => $background_styles ) ); if ( ! empty( $styles['css'] ) ) { // Inject background styles to the first element, presuming it's the wrapper, if it exists. diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php index 39e3581c18765..ca79bc98a3fa7 100644 --- a/src/wp-includes/class-wp-theme-json.php +++ b/src/wp-includes/class-wp-theme-json.php @@ -205,6 +205,7 @@ class WP_Theme_JSON { * @since 6.3.0 Added `column-count` property. * @since 6.4.0 Added `writing-mode` property. * @since 6.5.0 Added `aspect-ratio` property. + * @since 6.6.0 Added `background-[image|position|repeat|size]` properties. * * @var array */ @@ -212,6 +213,10 @@ class WP_Theme_JSON { 'aspect-ratio' => array( 'dimensions', 'aspectRatio' ), 'background' => array( 'color', 'gradient' ), 'background-color' => array( 'color', 'background' ), + 'background-image' => array( 'background', 'backgroundImage' ), + 'background-position' => array( 'background', 'backgroundPosition' ), + 'background-repeat' => array( 'background', 'backgroundRepeat' ), + 'background-size' => array( 'background', 'backgroundSize' ), 'border-radius' => array( 'border', 'radius' ), 'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ), 'border-top-right-radius' => array( 'border', 'radius', 'topRight' ), @@ -278,6 +283,7 @@ class WP_Theme_JSON { * property is used to validate whether or not a style value is allowed. * * @since 6.2.0 + * @since 6.6.0 Added background-image properties. * * @var array */ @@ -295,6 +301,10 @@ class WP_Theme_JSON { array( 'layout', 'contentSize' ), array( 'layout', 'wideSize' ), ), + 'background-image' => array( + array( 'background', 'backgroundImage', 'url' ), + array( 'background', 'backgroundImage', 'source' ), + ), ); /** @@ -474,10 +484,17 @@ class WP_Theme_JSON { * @since 6.2.0 Added `outline`, and `minHeight` properties. * @since 6.3.0 Added support for `typography.textColumns`. * @since 6.5.0 Added support for `dimensions.aspectRatio`. + * @since 6.6.0 Added `background` sub properties to top-level only. * * @var array */ const VALID_STYLES = array( + 'background' => array( + 'backgroundImage' => 'top', + 'backgroundPosition' => 'top', + 'backgroundRepeat' => 'top', + 'backgroundSize' => 'top', + ), 'border' => array( 'color' => null, 'radius' => null, @@ -2094,6 +2111,12 @@ 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 = $background_styles['declarations'][ $css_property ] ?? $value; + } + // Skip if empty and not "0" or value represents array of longhand values. $has_missing_value = empty( $value ) && ! is_numeric( $value ); if ( $has_missing_value || is_array( $value ) ) {