Skip to content

Commit

Permalink
Flips the default position from "center" to "50% 50%" - the same effe…
Browse files Browse the repository at this point in the history 
…ct, but the latter will appear in the UI controls.
  • Loading branch information
@ramonjd
ramonjd committed Aug 15, 2024
1 parent c5d9e38 commit ef422ef
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 6 deletions.
2 changes: 1 addition & 1 deletion src/wp-includes/block-supports/background.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%';
}
}

Expand Down
3 changes: 2 additions & 1 deletion tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ public function filter_set_theme_root() {
* @ticket 60175
* @ticket 61123
* @ticket 61720
* @ticket 61858
*
* @covers ::wp_render_background_support
*
Expand Down Expand Up @@ -154,7 +155,7 @@ public function data_background_block_support() {
'backgroundSize' => 'contain',
'backgroundAttachment' => 'fixed',
),
'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;background-attachment:fixed;">Content</div>',
'expected_wrapper' => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;background-attachment:fixed;">Content</div>',
'wrapper' => '<div>Content</div>',
),
'background image style is appended if a style attribute already exists' => array(
Expand Down
74 changes: 70 additions & 4 deletions tests/phpunit/tests/theme/wpThemeJson.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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',
Expand All @@ -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(
Expand Down Expand Up @@ -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(
Expand All @@ -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.
*
Expand Down

0 comments on commit ef422ef

Please sign in to comment.