diff --git a/backport-changelog/6.7/7137.md b/backport-changelog/6.7/7137.md new file mode 100644 index 00000000000000..834cb29a21e6d9 --- /dev/null +++ b/backport-changelog/6.7/7137.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7137 + +* https://github.com/WordPress/gutenberg/pull/64192 diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index cfe0c4d55ceed7..ad8722091c2d48 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2383,6 +2383,17 @@ 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 = gutenberg_style_engine_get_styles( array( 'background' => $styles['background'] ) ); $value = $background_styles['declarations'][ $css_property ] ?? $value; } diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index 7a99a46943dbc6..4650a238cd49a4 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -318,8 +318,12 @@ function BackgroundImageControls( { return; } - const sizeValue = style?.background?.backgroundSize; - const positionValue = style?.background?.backgroundPosition; + const sizeValue = + style?.background?.backgroundSize || + inheritedValue?.background?.backgroundSize; + const positionValue = + style?.background?.backgroundPosition || + inheritedValue?.background?.backgroundPosition; onChange( setImmutably( style, [ 'background' ], { @@ -334,6 +338,7 @@ function BackgroundImageControls( { ! positionValue && ( 'auto' === sizeValue || ! sizeValue ) ? '50% 0' : positionValue, + backgroundSize: sizeValue, } ) ); }; @@ -448,6 +453,9 @@ function BackgroundSizeControls( { const imageValue = style?.background?.backgroundImage?.url || inheritedValue?.background?.backgroundImage?.url; + const isUploadedImage = + style?.background?.backgroundImage?.id || + inheritedValue?.background?.backgroundImage?.id; const positionValue = style?.background?.backgroundPosition || inheritedValue?.background?.backgroundPosition; @@ -456,19 +464,15 @@ function BackgroundSizeControls( { inheritedValue?.background?.backgroundAttachment; /* - * An `undefined` value is replaced with any supplied - * default control value for the toggle group control. - * An empty string is treated as `auto` - this allows a user - * to select "Size" and then enter a custom value, with an - * empty value being treated as `auto`. + * Set default values for uploaded images. + * The default values are passed by the consumer. + * Block-level controls may have different defaults to root-level controls. + * A falsy value is treated by default as `auto` (Tile). */ const currentValueForToggle = - ( sizeValue !== undefined && - sizeValue !== 'cover' && - sizeValue !== 'contain' ) || - sizeValue === '' - ? 'auto' - : sizeValue || defaultValues?.backgroundSize; + ! sizeValue && isUploadedImage + ? defaultValues?.backgroundSize + : sizeValue || 'auto'; /* * If the current value is `cover` and the repeat value is `undefined`, then diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js index 3f7fb5462e377c..f648e1db845b87 100644 --- a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js @@ -1028,6 +1028,43 @@ describe( 'global styles renderer', () => { 'letter-spacing: 2px', ] ); } ); + it( 'should set default values for block background styles', () => { + const backgroundStyles = { + background: { + backgroundImage: { + url: 'https://wordpress.org/assets/image.jpg', + id: 123, + }, + }, + }; + expect( + getStylesDeclarations( backgroundStyles, '.wp-block-group' ) + ).toEqual( [ + "background-image: url( 'https://wordpress.org/assets/image.jpg' )", + 'background-size: cover', + ] ); + // Test with root-level styles. + expect( + getStylesDeclarations( backgroundStyles, ROOT_BLOCK_SELECTOR ) + ).toEqual( [ + "background-image: url( 'https://wordpress.org/assets/image.jpg' )", + ] ); + expect( + getStylesDeclarations( + { + background: { + ...backgroundStyles.background, + backgroundSize: 'contain', + }, + }, + '.wp-block-group' + ) + ).toEqual( [ + "background-image: url( 'https://wordpress.org/assets/image.jpg' )", + 'background-position: center', + 'background-size: contain', + ] ); + } ); } ); describe( 'processCSSNesting', () => { diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index 6d3e29f360200a..9190733d5b6607 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -404,7 +404,7 @@ export function getStylesDeclarations( * Set default values for block background styles. * Top-level styles are an exception as they are applied to the body. */ - if ( ! isRoot ) { + if ( ! isRoot && !! blockStyles.background?.backgroundImage?.id ) { blockStyles = { ...blockStyles, background: { diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 8d2f470efe60fe..b77b54ecc7d872 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -4808,7 +4808,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', @@ -4822,7 +4821,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));}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->assertSameCSS( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_styles_for_block()" with top-level background styles do not match expectations' ); $theme_json = new WP_Theme_JSON_Gutenberg( @@ -4853,7 +4852,6 @@ 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', @@ -4861,12 +4859,19 @@ public function test_get_block_background_image_styles() { ), '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', ), ), ), @@ -4874,6 +4879,18 @@ public function test_get_block_background_image_styles() { ) ); + $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->assertSameCSS( $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' ), @@ -4883,20 +4900,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->assertSameCSS( $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->assertSameCSS( $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->assertSameCSS( $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->assertSameCSS( $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' ); } /**