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. git-svn-id: https://develop.svn.wordpress.org/trunk@57254 602fd350-edb4-49c9-b593-d223f7449a82
2025-10-16 12:05:38 +00:00 · 2024-01-09 06:10:09 +00:00 · 2024-01-09 06:10:09 +00:00 · 15b5be2acd
commit 15b5be2acd
parent 2d764b4101
6 changed files with 77 additions and 15 deletions
--- a/src/wp-includes/block-supports/background.php
+++ b/src/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();
--- a/src/wp-includes/class-wp-theme-json.php
+++ b/src/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' ),
--- a/src/wp-includes/style-engine/class-wp-style-engine.php
+++ b/src/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',
 				),
--- a/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
+++ b/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
@ -67,6 +67,7 @@ class Tests_Block_Supports_WpRenderBackgroundSupport extends WP_UnitTestCase {
 	 * Tests that background image block support works as expected.
 	 *
 	 * @ticket 59357
+	 * @ticket 60175
 	 *
 	 * @covers ::wp_render_background_support
 	 *
@ -135,7 +136,24 @@ class Tests_Block_Supports_WpRenderBackgroundSupport extends WP_UnitTestCase {
 						'source' => 'file',
 					),
 				),
-				'expected_wrapper'    => '<div style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
+				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
+				'wrapper'             => '<div>Content</div>',
+			),
+			'background image style with contain, position, and repeat is applied' => array(
+				'theme_name'          => 'block-theme-child-with-fluid-typography',
+				'block_name'          => 'test/background-rules-are-output',
+				'background_settings' => array(
+					'backgroundImage' => true,
+				),
+				'background_style'    => array(
+					'backgroundImage'  => array(
+						'url'    => 'https://example.com/image.jpg',
+						'source' => 'file',
+					),
+					'backgroundRepeat' => 'no-repeat',
+					'backgroundSize'   => 'contain',
+				),
+				'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;">Content</div>',
 				'wrapper'             => '<div>Content</div>',
 			),
 			'background image style is appended if a style attribute already exists' => array(
@ -150,8 +168,8 @@ class Tests_Block_Supports_WpRenderBackgroundSupport extends WP_UnitTestCase {
 						'source' => 'file',
 					),
 				),
-				'expected_wrapper'    => '<div classname="wp-block-test" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
-				'wrapper'             => '<div classname="wp-block-test" style="color: red">Content</div>',
+				'expected_wrapper'    => '<div class="wp-block-test has-background" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
+				'wrapper'             => '<div class="wp-block-test" style="color: red">Content</div>',
 			),
 			'background image style is appended if a style attribute containing multiple styles already exists' => array(
 				'theme_name'          => 'block-theme-child-with-fluid-typography',
@ -165,8 +183,8 @@ class Tests_Block_Supports_WpRenderBackgroundSupport extends WP_UnitTestCase {
 						'source' => 'file',
 					),
 				),
-				'expected_wrapper'    => '<div classname="wp-block-test" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
-				'wrapper'             => '<div classname="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
+				'expected_wrapper'    => '<div class="wp-block-test has-background" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
+				'wrapper'             => '<div class="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
 			),
 			'background image style is not applied if the block does not support background image' => array(
 				'theme_name'          => 'block-theme-child-with-fluid-typography',
--- a/tests/phpunit/tests/style-engine/styleEngine.php
+++ b/tests/phpunit/tests/style-engine/styleEngine.php
@ -27,6 +27,7 @@ class Tests_wpStyleEngine extends WP_UnitTestCase {
 	 * @ticket 56467
 	 * @ticket 58549
 	 * @ticket 58590
+	 * @ticket 60175
 	 *
 	 * @covers ::wp_style_engine_get_styles
 	 *
@ -520,18 +521,22 @@ class Tests_wpStyleEngine extends WP_UnitTestCase {
 			'inline_background_image_url_with_background_size' => array(
 				'block_styles'    => array(
 					'background' => array(
-						'backgroundImage' => array(
+						'backgroundImage'    => array(
 							'url' => 'https://example.com/image.jpg',
 						),
-						'backgroundSize'  => 'cover',
+						'backgroundPosition' => 'center',
+						'backgroundRepeat'   => 'no-repeat',
+						'backgroundSize'     => 'cover',
 					),
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => "background-image:url('https://example.com/image.jpg');background-size:cover;",
+					'css'          => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;",
 					'declarations' => array(
-						'background-image' => "url('https://example.com/image.jpg')",
-						'background-size'  => 'cover',
+						'background-image'    => "url('https://example.com/image.jpg')",
+						'background-position' => 'center',
+						'background-repeat'   => 'no-repeat',
+						'background-size'     => 'cover',
 					),
 				),
 			),
--- a/tests/phpunit/tests/theme/wpThemeJson.php
+++ b/tests/phpunit/tests/theme/wpThemeJson.php
@ -264,6 +264,7 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
 		$expected = array(
 			'background' => array(
 				'backgroundImage' => true,
+				'backgroundSize'  => true,
 			),
 			'border'     => array(
 				'width'  => true,
@ -300,6 +301,7 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
 				'core/group'     => array(
 					'background' => array(
 						'backgroundImage' => true,
+						'backgroundSize'  => true,
 					),
 					'border'     => array(
 						'width'  => true,