diff --git a/src/wp-includes/block-supports/background.php b/src/wp-includes/block-supports/background.php
index a8de0c6b63b20..283833991f57b 100644
--- 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();
diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php
index 4826de8648acd..37f4d11ce9fb4 100644
--- 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 @@ public static function get_element_class_name( $element ) {
* @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/src/wp-includes/style-engine/class-wp-style-engine.php b/src/wp-includes/style-engine/class-wp-style-engine.php
index 121bac2d927ba..3be384d679f00 100644
--- 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',
),
diff --git a/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php b/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
index 4f38db87ab317..83ea7cd47c972 100644
--- a/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
+++ b/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
@@ -67,6 +67,7 @@ public function filter_set_theme_root() {
* Tests that background image block support works as expected.
*
* @ticket 59357
+ * @ticket 60175
*
* @covers ::wp_render_background_support
*
@@ -135,7 +136,24 @@ public function data_background_block_support() {
'source' => 'file',
),
),
- 'expected_wrapper' => 'Content
',
+ 'expected_wrapper' => 'Content
',
+ 'wrapper' => 'Content
',
+ ),
+ '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' => 'Content
',
'wrapper' => 'Content
',
),
'background image style is appended if a style attribute already exists' => array(
@@ -150,8 +168,8 @@ public function data_background_block_support() {
'source' => 'file',
),
),
- 'expected_wrapper' => 'Content
',
- 'wrapper' => 'Content
',
+ 'expected_wrapper' => 'Content
',
+ 'wrapper' => 'Content
',
),
'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 @@ public function data_background_block_support() {
'source' => 'file',
),
),
- 'expected_wrapper' => 'Content
',
- 'wrapper' => 'Content
',
+ 'expected_wrapper' => 'Content
',
+ 'wrapper' => 'Content
',
),
'background image style is not applied if the block does not support background image' => array(
'theme_name' => 'block-theme-child-with-fluid-typography',
diff --git a/tests/phpunit/tests/style-engine/styleEngine.php b/tests/phpunit/tests/style-engine/styleEngine.php
index b1a01563c2097..38ad106e2ca5e 100644
--- a/tests/phpunit/tests/style-engine/styleEngine.php
+++ b/tests/phpunit/tests/style-engine/styleEngine.php
@@ -27,6 +27,7 @@ public function tear_down() {
* @ticket 56467
* @ticket 58549
* @ticket 58590
+ * @ticket 60175
*
* @covers ::wp_style_engine_get_styles
*
@@ -513,18 +514,22 @@ public function data_wp_style_engine_get_styles() {
'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',
),
),
),
diff --git a/tests/phpunit/tests/theme/wpThemeJson.php b/tests/phpunit/tests/theme/wpThemeJson.php
index 6da723583ba45..49e1661844b10 100644
--- a/tests/phpunit/tests/theme/wpThemeJson.php
+++ b/tests/phpunit/tests/theme/wpThemeJson.php
@@ -264,6 +264,7 @@ public function test_get_settings_appearance_true_opts_in() {
$expected = array(
'background' => array(
'backgroundImage' => true,
+ 'backgroundSize' => true,
),
'border' => array(
'width' => true,
@@ -300,6 +301,7 @@ public function test_get_settings_appearance_true_opts_in() {
'core/group' => array(
'background' => array(
'backgroundImage' => true,
+ 'backgroundSize' => true,
),
'border' => array(
'width' => true,