First commit:

- ensure that global styles background image blocks with user-uploaded images receive default values
WordPress · Aug 2, 2024 · 22926ae · 22926ae
1 parent 5f5d2d4
commit 22926ae
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 16 deletions.
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
@@ -2383,10 +2383,14 @@ protected static function compute_style_properties( $styles, $settings = array()
 
 			// Processes background styles.
 			if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) {
+				/*
+				 * For user-uploaded images at the block level, assign defaults.
+				 * Matches defaults applied in the editor and in block supports: background.php.
+				 */
 				if ( static::ROOT_BLOCK_SELECTOR !== $selector && ! empty( $styles['background']['backgroundImage']['id'] ) ) {
 					$styles['background']['backgroundSize'] = $styles['background']['backgroundSize'] ?? 'cover';
 					// If the background size is set to `contain` and no position is set, set the position to `center`.
-					if ( 'contain' === $styles['background']['backgroundSize'] && ! $styles['background']['backgroundPosition'] ) {
+					if ( 'contain' === $styles['background']['backgroundSize'] && empty( $styles['background']['backgroundPosition'] ) ) {
 						$styles['background']['backgroundPosition'] = 'center';
 					}
 				}

diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
@@ -1028,6 +1028,43 @@ describe( 'global styles renderer', () => {
 				'letter-spacing: 2px',
 			] );
 		} );
+		it( 'should set default values for block background styles', () => {
+			const backgroundStyles = {
+				background: {
+					backgroundImage: {
+						url: 'https://wordpress.org/assets/image.jpg',
+						id: 123,
+					},
+				},
+			};
+			expect(
+				getStylesDeclarations( backgroundStyles, '.wp-block-group' )
+			).toEqual( [
+				"background-image: url( 'https://wordpress.org/assets/image.jpg' )",
+				'background-size: cover',
+			] );
+			// Test with root-level styles.
+			expect(
+				getStylesDeclarations( backgroundStyles, ROOT_BLOCK_SELECTOR )
+			).toEqual( [
+				"background-image: url( 'https://wordpress.org/assets/image.jpg' )",
+			] );
+			expect(
+				getStylesDeclarations(
+					{
+						background: {
+							...backgroundStyles.background,
+							backgroundSize: 'contain',
+						},
+					},
+					'.wp-block-group'
+				)
+			).toEqual( [
+				"background-image: url( 'https://wordpress.org/assets/image.jpg' )",
+				'background-position: center',
+				'background-size: contain',
+			] );
+		} );
 	} );
 
 	describe( 'processCSSNesting', () => {

diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
@@ -4808,7 +4808,6 @@ public function test_get_top_level_background_image_styles() {
 						'backgroundImage'      => array(
 							'url' => 'http://example.org/image.png',
 						),
-						'backgroundSize'       => 'contain',
 						'backgroundRepeat'     => 'no-repeat',
 						'backgroundPosition'   => 'center center',
 						'backgroundAttachment' => 'fixed',
@@ -4822,7 +4821,7 @@ public function test_get_top_level_background_image_styles() {
 			'selector' => 'body',
 		);
 
-		$expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;background-attachment: fixed;}";
+		$expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-attachment: fixed;}";
 		$this->assertSameCSS( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_styles_for_block()" with top-level background styles do not match expectations' );
 
 		$theme_json = new WP_Theme_JSON_Gutenberg(
@@ -4853,7 +4852,6 @@ public function test_get_block_background_image_styles() {
 						'core/group' => array(
 							'background' => array(
 								'backgroundImage'      => "url('http://example.org/group.png')",
-								'backgroundSize'       => 'cover',
 								'backgroundRepeat'     => 'no-repeat',
 								'backgroundPosition'   => 'center center',
 								'backgroundAttachment' => 'fixed',
@@ -4863,17 +4861,36 @@ public function test_get_block_background_image_styles() {
 							'background' => array(
 								'backgroundImage'    => array(
 									'url' => 'http://example.org/quote.png',
+									'id'  => 321,
 								),
-								'backgroundSize'     => 'cover',
-								'backgroundRepeat'   => 'no-repeat',
-								'backgroundPosition' => 'center center',
+								'backgroundSize'     => 'contain',
+							),
+						),
+						'core/verse' => array(
+							'background' => array(
+								'backgroundImage'    => array(
+									'url' => 'http://example.org/verse.png',
+									'id'  => 123,
+								)
 							),
 						),
 					),
 				),
 			)
 		);
 
+		$group_node = array(
+			'name'      => 'core/group',
+			'path'      => array( 'styles', 'blocks', 'core/group' ),
+			'selector'  => '.wp-block-group',
+			'selectors' => array(
+				'root' => '.wp-block-group',
+			),
+		);
+
+		$group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-attachment: fixed;}";
+		$this->assertSameCSS( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with core/group background styles as string type do not match expectations' );
+
 		$quote_node = array(
 			'name'      => 'core/quote',
 			'path'      => array( 'styles', 'blocks', 'core/quote' ),
@@ -4883,20 +4900,21 @@ public function test_get_block_background_image_styles() {
 			),
 		);
 
-		$quote_styles = ":root :where(.wp-block-quote){background-image: url('http://example.org/quote.png');background-position: center center;background-repeat: no-repeat;background-size: cover;}";
-		$this->assertSameCSS( $quote_styles, $theme_json->get_styles_for_block( $quote_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles do not match expectations' );
+		$quote_styles = ":root :where(.wp-block-quote){background-image: url('http://example.org/quote.png');background-position: center;background-size: contain;}";
+		$this->assertSameCSS( $quote_styles, $theme_json->get_styles_for_block( $quote_node ), 'Styles returned from "::get_styles_for_block()" with core/quote default background styles do not match expectations' );
 
-		$group_node = array(
-			'name'      => 'core/group',
-			'path'      => array( 'styles', 'blocks', 'core/group' ),
-			'selector'  => '.wp-block-group',
+
+		$verse_node = array(
+			'name'      => 'core/verse',
+			'path'      => array( 'styles', 'blocks', 'core/verse' ),
+			'selector'  => '.wp-block-verse',
 			'selectors' => array(
-				'root' => '.wp-block-group',
+				'root' => '.wp-block-verse',
 			),
 		);
 
-		$group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}";
-		$this->assertSameCSS( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles as string type do not match expectations' );
+		$verse_styles = ":root :where(.wp-block-verse){background-image: url('http://example.org/verse.png');background-size: cover;}";
+		$this->assertSameCSS( $verse_styles, $theme_json->get_styles_for_block( $verse_node ), 'Styles returned from "::get_styles_for_block()" with default core/verse background styles as string type do not match expectations' );
 	}
 
 	/**