Skip to content

Commit

Permalink
Block background images have long had "default" values to optimize th…
Browse files Browse the repository at this point in the history 
…eir appearance.

For example, block styles receive a default background size of "cover" in the editor and the frontend. Or, where the background size is "contain" the background position is "center".

Defaults have always applied to images uploaded by the user in the editor.

The PR brings a bit of consistency to background image styles.

Block styles "inherit" values from global styles/theme.json and display the current value (whether the set, inherited or default value) in the editor controls.

In relation to default values:

- Site wide background images (uploaded or otherwise) do not receive any default values.
- Block background images defined in theme.json do not receive any default values.
- Block background images that have been uploaded (images with ids) receive background default values.
  • Loading branch information
@ramonjd
ramonjd committed Aug 5, 2024
1 parent 0a12ad2 commit e86b5b7
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 17 deletions.
13 changes: 12 additions & 1 deletion src/wp-includes/class-wp-theme-json.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2337,8 +2337,19 @@ 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 = wp_style_engine_get_styles( array( 'background' => $styles['background'] ) );
$value = isset( $background_styles['declarations'][ $css_property ] ) ? $background_styles['declarations'][ $css_property ] : $value;
$value = $background_styles['declarations'][ $css_property ] ?? $value;
}

// Skip if empty and not "0" or value represents array of longhand values.
Expand Down
50 changes: 34 additions & 16 deletions tests/phpunit/tests/theme/wpThemeJson.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5008,7 +5008,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',
Expand All @@ -5022,7 +5021,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));}:root :where(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));}:root :where(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 styles type do not match expectations' );

$theme_json = new WP_Theme_JSON(
Expand All @@ -5040,6 +5039,7 @@ public function test_get_top_level_background_image_styles() {
)
);

$expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;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' );
}

Expand All @@ -5056,27 +5056,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->assertSame( $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' ),
Expand All @@ -5086,20 +5104,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->assertSame( $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->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.' );

$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->assertSame( $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->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.' );
}

/**
Expand Down

0 comments on commit e86b5b7

Please sign in to comment.