Background images: ensure appropriate default values (#64192)

* First commit: - ensure that global styles background image blocks with user-uploaded images receive default values * First commit: - ensure that global styles background image blocks with user-uploaded images receive default values * Linterino * Add Core changelog Co-authored-by: ramonjd <[email protected]> Co-authored-by: andrewserong <[email protected]>
WordPress · Aug 7, 2024 · c384bb6 · c384bb6
1 parent 879a2a3
commit c384bb6
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 30 deletions.
diff --git a/backport-changelog/6.7/7137.md b/backport-changelog/6.7/7137.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7137
+
+* https://github.com/WordPress/gutenberg/pull/64192
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
@@ -2383,6 +2383,17 @@ 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'] && empty( $styles['background']['backgroundPosition'] ) ) {
+						$styles['background']['backgroundPosition'] = 'center';
+					}
+				}
 				$background_styles = gutenberg_style_engine_get_styles( array( 'background' => $styles['background'] ) );
 				$value             = $background_styles['declarations'][ $css_property ] ?? $value;
 			}

diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -318,8 +318,12 @@ function BackgroundImageControls( {
 			return;
 		}
 
-		const sizeValue = style?.background?.backgroundSize;
-		const positionValue = style?.background?.backgroundPosition;
+		const sizeValue =
+			style?.background?.backgroundSize ||
+			inheritedValue?.background?.backgroundSize;
+		const positionValue =
+			style?.background?.backgroundPosition ||
+			inheritedValue?.background?.backgroundPosition;
 
 		onChange(
 			setImmutably( style, [ 'background' ], {
@@ -334,6 +338,7 @@ function BackgroundImageControls( {
 					! positionValue && ( 'auto' === sizeValue || ! sizeValue )
 						? '50% 0'
 						: positionValue,
+				backgroundSize: sizeValue,
 			} )
 		);
 	};
@@ -448,6 +453,9 @@ function BackgroundSizeControls( {
 	const imageValue =
 		style?.background?.backgroundImage?.url ||
 		inheritedValue?.background?.backgroundImage?.url;
+	const isUploadedImage =
+		style?.background?.backgroundImage?.id ||
+		inheritedValue?.background?.backgroundImage?.id;
 	const positionValue =
 		style?.background?.backgroundPosition ||
 		inheritedValue?.background?.backgroundPosition;
@@ -456,19 +464,15 @@ function BackgroundSizeControls( {
 		inheritedValue?.background?.backgroundAttachment;
 
 	/*
-	 * An `undefined` value is replaced with any supplied
-	 * default control value for the toggle group control.
-	 * An empty string is treated as `auto` - this allows a user
-	 * to select "Size" and then enter a custom value, with an
-	 * empty value being treated as `auto`.
+	 * Set default values for uploaded images.
+	 * The default values are passed by the consumer.
+	 * Block-level controls may have different defaults to root-level controls.
+	 * A falsy value is treated by default as `auto` (Tile).
 	 */
 	const currentValueForToggle =
-		( sizeValue !== undefined &&
-			sizeValue !== 'cover' &&
-			sizeValue !== 'contain' ) ||
-		sizeValue === ''
-			? 'auto'
-			: sizeValue || defaultValues?.backgroundSize;
+		! sizeValue && isUploadedImage
+			? defaultValues?.backgroundSize
+			: sizeValue || 'auto';
 
 	/*
 	 * If the current value is `cover` and the repeat value is `undefined`, then

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/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -404,7 +404,7 @@ export function getStylesDeclarations(
 		 * Set default values for block background styles.
 		 * Top-level styles are an exception as they are applied to the body.
 		 */
-		if ( ! isRoot ) {
+		if ( ! isRoot && !! blockStyles.background?.backgroundImage?.id ) {
 			blockStyles = {
 				...blockStyles,
 				background: {

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,27 +4852,45 @@ 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',
 							),
 						),
 						'core/quote' => array(
 							'background' => array(
-								'backgroundImage'    => array(
+								'backgroundImage' => array(
 									'url' => 'http://example.org/quote.png',
+									'id'  => 321,
+								),
+								'backgroundSize'  => 'contain',
+							),
+						),
+						'core/verse' => array(
+							'background' => array(
+								'backgroundImage' => array(
+									'url' => 'http://example.org/verse.png',
+									'id'  => 123,
 								),
-								'backgroundSize'     => 'cover',
-								'backgroundRepeat'   => 'no-repeat',
-								'backgroundPosition' => 'center center',
 							),
 						),
 					),
 				),
 			)
 		);
 
+		$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,20 @@ 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' );
 	}
 
 	/**