From ef422efcebb7c7e3aef68671920c9dce0a740519 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 13 Aug 2024 11:12:51 +1000 Subject: [PATCH] Flips the default position from "center" to "50% 50%" - the same effect, but the latter will appear in the UI controls. --- src/wp-includes/block-supports/background.php | 2 +- .../wpRenderBackgroundSupport.php | 3 +- tests/phpunit/tests/theme/wpThemeJson.php | 74 ++++++++++++++++++- 3 files changed, 73 insertions(+), 6 deletions(-) diff --git a/src/wp-includes/block-supports/background.php b/src/wp-includes/block-supports/background.php index 4e7995f53f92f..6ef9bbb9a6c21 100644 --- a/src/wp-includes/block-supports/background.php +++ b/src/wp-includes/block-supports/background.php @@ -75,7 +75,7 @@ function wp_render_background_support( $block_content, $block ) { // If the background size is set to `contain` and no position is set, set the position to `center`. if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) { - $background_styles['backgroundPosition'] = 'center'; + $background_styles['backgroundPosition'] = '50% 50%'; } } diff --git a/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php b/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php index 1f965cdc3f323..4de405eec883d 100644 --- a/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php +++ b/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php @@ -70,6 +70,7 @@ public function filter_set_theme_root() { * @ticket 60175 * @ticket 61123 * @ticket 61720 + * @ticket 61858 * * @covers ::wp_render_background_support * @@ -154,7 +155,7 @@ public function data_background_block_support() { 'backgroundSize' => 'contain', 'backgroundAttachment' => 'fixed', ), - 'expected_wrapper' => '
Content
', + 'expected_wrapper' => '
Content
', 'wrapper' => '
Content
', ), 'background image style is appended if a style attribute already exists' => array( diff --git a/tests/phpunit/tests/theme/wpThemeJson.php b/tests/phpunit/tests/theme/wpThemeJson.php index 3d7cacd16d000..15d101f485c2a 100644 --- a/tests/phpunit/tests/theme/wpThemeJson.php +++ b/tests/phpunit/tests/theme/wpThemeJson.php @@ -5006,12 +5006,15 @@ public function test_get_shadow_styles_for_blocks() { } /** - * Tests that theme background image styles are correctly generated. + * Tests that theme background image styles are correctly generated, + * and that default background size of "cover" isn't + * applied (it's only applied to blocks). * * @ticket 61123 * @ticket 61165 * @ticket 61720 * @ticket 61704 + * @ticket 61858 */ public function test_get_top_level_background_image_styles() { $theme_json = new WP_Theme_JSON( @@ -5044,7 +5047,6 @@ public function test_get_top_level_background_image_styles() { 'styles' => array( 'background' => array( 'backgroundImage' => "url('http://example.org/image.png')", - 'backgroundSize' => 'contain', 'backgroundRepeat' => 'no-repeat', 'backgroundPosition' => 'center center', 'backgroundAttachment' => 'fixed', @@ -5053,13 +5055,16 @@ public function test_get_top_level_background_image_styles() { ) ); - $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->assertSame( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_stylesheet()" with top-level background image as string type do not match expectations' ); } /** + * Block-level global background image styles. + * * @ticket 61588 * @ticket 61720 + * @ticket 61858 */ public function test_get_block_background_image_styles() { $theme_json = new WP_Theme_JSON( @@ -5118,7 +5123,7 @@ 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;background-size: contain;}"; + $quote_styles = ":root :where(.wp-block-quote){background-image: url('http://example.org/quote.png');background-position: 50% 50%;background-size: contain;}"; $this->assertSame( $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.' ); $verse_node = array( @@ -5134,6 +5139,67 @@ public function test_get_block_background_image_styles() { $this->assertSame( $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.' ); } + /** + * Testing background dynamic properties in theme.json. + * + * @ticket 61858 + */ + public function test_get_resolved_background_image_styles() { + $theme_json = new WP_Theme_JSON( + array( + 'version' => WP_Theme_JSON::LATEST_SCHEMA, + 'styles' => array( + 'background' => array( + 'backgroundImage' => array( + 'url' => 'http://example.org/top.png', + ), + 'backgroundSize' => 'contain', + 'backgroundRepeat' => 'repeat', + 'backgroundPosition' => '10% 20%', + 'backgroundAttachment' => 'scroll', + ), + 'blocks' => array( + 'core/group' => array( + 'background' => array( + 'backgroundImage' => array( + /* + * Merged theme.json and global styles retain the "ref" value, + * even though the URL is provided in the global styles. + */ + 'id' => 123, + 'ref' => 'styles.background.backgroundImage', + 'url' => 'http://example.org/group.png', + ), + ), + ), + 'core/post-content' => array( + 'background' => array( + 'backgroundImage' => array( + 'ref' => 'styles.background.backgroundImage', + ), + 'backgroundSize' => array( + 'ref' => 'styles.background.backgroundSize', + ), + 'backgroundRepeat' => array( + 'ref' => 'styles.background.backgroundRepeat', + ), + 'backgroundPosition' => array( + 'ref' => 'styles.background.backgroundPosition', + ), + 'backgroundAttachment' => array( + 'ref' => 'styles.background.backgroundAttachment', + ), + ), + ), + ), + ), + ) + ); + + $expected = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/top.png');background-position: 10% 20%;background-repeat: repeat;background-size: contain;background-attachment: scroll;}:root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-size: cover;}:root :where(.wp-block-post-content){background-image: url('http://example.org/top.png');background-position: 10% 20%;background-repeat: repeat;background-size: contain;background-attachment: scroll;}"; + $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) ); + } + /** * Tests that base custom CSS is generated correctly. *