Add has-background classname output

WordPress · Jan 7, 2024 · fc04c45 · fc04c45
1 parent 8c12b4b
commit fc04c45
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/src/wp-includes/block-supports/background.php b/src/wp-includes/block-supports/background.php
@@ -113,6 +113,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/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php b/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
@@ -136,7 +136,7 @@ public function data_background_block_support() {
 						'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(
@@ -153,7 +153,7 @@ public function data_background_block_support() {
 					'backgroundRepeat' => 'no-repeat',
 					'backgroundSize'   => 'contain',
 				),
-				'expected_wrapper'    => '<div style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:center;background-repeat:no-repeat;background-size:contain;">Content</div>',
+				'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(
@@ -168,8 +168,8 @@ public function data_background_block_support() {
 						'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',
@@ -183,8 +183,8 @@ public function data_background_block_support() {
 						'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',