From 90088c4c922490876ef30f3f03997c0a0997161f Mon Sep 17 00:00:00 2001 From: isabel_brison <isabel_brison@git.wordpress.org> Date: Tue, 9 Jan 2024 06:12:18 +0000 Subject: [PATCH] Editor: add size and repeat to background image support. Adds background size and background repeat style processing to the background image block support and `WP_Style_Engine` definitions. Props andrewserong, mukesh27. Fixes #60175. Built from https://develop.svn.wordpress.org/trunk@57254 git-svn-id: http://core.svn.wordpress.org/trunk@56760 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/block-supports/background.php | 24 +++++++++++++++++-- wp-includes/class-wp-theme-json.php | 6 ++++- .../style-engine/class-wp-style-engine.php | 17 +++++++++++-- wp-includes/version.php | 2 +- 4 files changed, 43 insertions(+), 6 deletions(-) diff --git a/wp-includes/block-supports/background.php b/wp-includes/block-supports/background.php index a8de0c6b63..283833991f 100644 --- a/wp-includes/block-supports/background.php +++ b/wp-includes/block-supports/background.php @@ -40,6 +40,7 @@ function wp_register_background_support( $block_type ) { * it is also applied to non-server-rendered blocks. * * @since 6.4.0 + * @since 6.5.0 Added support for `backgroundPosition` and `backgroundRepeat` output. * @access private * * @param string $block_content Rendered block content. @@ -64,9 +65,20 @@ function wp_render_background_support( $block_content, $block ) { $background_image_url = isset( $block_attributes['style']['background']['backgroundImage']['url'] ) ? $block_attributes['style']['background']['backgroundImage']['url'] : null; + + 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(); @@ -76,8 +88,15 @@ function wp_render_background_support( $block_content, $block ) { ) { // Set file based background URL. $background_block_styles['backgroundImage']['url'] = $background_image_url; - // Only output the background size when an image url is set. - $background_block_styles['backgroundSize'] = $background_size; + // 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 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'; + } } $styles = wp_style_engine_get_styles( array( 'background' => $background_block_styles ) ); @@ -99,6 +118,7 @@ function wp_render_background_support( $block_content, $block ) { $updated_style .= $styles['css']; $tags->set_attribute( 'style', $updated_style ); + $tags->add_class( 'has-background' ); } return $tags->get_updated_html(); diff --git a/wp-includes/class-wp-theme-json.php b/wp-includes/class-wp-theme-json.php index 4826de8648..37f4d11ce9 100644 --- a/wp-includes/class-wp-theme-json.php +++ b/wp-includes/class-wp-theme-json.php @@ -344,7 +344,8 @@ class WP_Theme_JSON { * @since 6.3.0 Added support for `typography.textColumns`, removed `layout.definitions`. * @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`, * `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`. - * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`. + * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize` and + * `background.backgroundSize`. * @var array */ const VALID_SETTINGS = array( @@ -352,6 +353,7 @@ class WP_Theme_JSON { 'useRootPaddingAwareAlignments' => null, 'background' => array( 'backgroundImage' => null, + 'backgroundSize' => null, ), 'border' => array( 'color' => null, @@ -573,10 +575,12 @@ class WP_Theme_JSON { * @since 6.0.0 * @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`. * @since 6.4.0 Added `background.backgroundImage`. + * @since 6.5.0 Added `background.backgroundSize`. * @var array */ const APPEARANCE_TOOLS_OPT_INS = array( array( 'background', 'backgroundImage' ), + array( 'background', 'backgroundSize' ), array( 'border', 'color' ), array( 'border', 'radius' ), array( 'border', 'style' ), diff --git a/wp-includes/style-engine/class-wp-style-engine.php b/wp-includes/style-engine/class-wp-style-engine.php index 12a6ea8441..790e33f38c 100644 --- a/wp-includes/style-engine/class-wp-style-engine.php +++ b/wp-includes/style-engine/class-wp-style-engine.php @@ -23,6 +23,7 @@ * @since 6.1.0 * @since 6.3.0 Added support for text-columns. * @since 6.4.0 Added support for background.backgroundImage. + * @since 6.5.0 Added support for background.backgroundPosition and background.backgroundRepeat. */ #[AllowDynamicProperties] final class WP_Style_Engine { @@ -48,14 +49,26 @@ final class WP_Style_Engine { */ const BLOCK_STYLE_DEFINITIONS_METADATA = array( 'background' => array( - 'backgroundImage' => array( + 'backgroundImage' => array( 'property_keys' => array( 'default' => 'background-image', ), 'value_func' => array( self::class, 'get_url_or_value_css_declaration' ), 'path' => array( 'background', 'backgroundImage' ), ), - 'backgroundSize' => array( + 'backgroundPosition' => array( + 'property_keys' => array( + 'default' => 'background-position', + ), + 'path' => array( 'background', 'backgroundPosition' ), + ), + 'backgroundRepeat' => array( + 'property_keys' => array( + 'default' => 'background-repeat', + ), + 'path' => array( 'background', 'backgroundRepeat' ), + ), + 'backgroundSize' => array( 'property_keys' => array( 'default' => 'background-size', ), diff --git a/wp-includes/version.php b/wp-includes/version.php index e34e400a4b..5a4377a93b 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.5-alpha-57253'; +$wp_version = '6.5-alpha-57254'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.