diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php index 64a9dbaf7f2774..70957897229595 100644 --- a/lib/block-supports/background.php +++ b/lib/block-supports/background.php @@ -30,28 +30,6 @@ function gutenberg_register_background_support( $block_type ) { } } -/** - * Given a theme.json or block background styles, returns the background styles for a block. - * - * @since 6.6.0 - * - * @param array $background_styles Background style properties. - * @return array Style engine array of CSS string and style declarations. - */ -function gutenberg_get_background_support_styles( $background_styles = array() ) { - $background_image_source = isset( $background_styles['backgroundImage']['source'] ) ? $background_styles['backgroundImage']['source'] : null; - $background_styles['backgroundSize'] = ! empty( $background_styles['backgroundSize'] ) ? $background_styles['backgroundSize'] : 'cover'; - - if ( 'file' === $background_image_source && ! empty( $background_styles['backgroundImage']['url'] ) ) { - // If the background size is set to `contain` and no position is set, set the position to `center`. - if ( 'contain' === $background_styles['backgroundSize'] && ! isset( $background_styles['backgroundPosition'] ) ) { - $background_styles['backgroundPosition'] = 'center'; - } - } - - return gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) ); -} - /** * Renders the background styles to the block wrapper. * This block support uses the `render_block` hook to ensure that @@ -74,7 +52,21 @@ function gutenberg_render_background_support( $block_content, $block ) { return $block_content; } - $styles = gutenberg_get_background_support_styles( $block_attributes['style']['background'] ); + $background_styles = array(); + $background_styles['backgroundSize'] = isset( $block_attributes['style']['background']['backgroundSize'] ) ? $block_attributes['style']['background']['backgroundSize'] : 'cover'; + $background_styles['backgroundImage'] = isset( $block_attributes['style']['background']['backgroundImage'] ) ? $block_attributes['style']['background']['backgroundImage'] : array(); + + if ( isset( $background_styles['backgroundImage']['source'] ) && 'file' === $background_styles['backgroundImage']['source'] && isset( $background_styles['backgroundImage']['url'] ) ) { + $background_styles['backgroundPosition'] = isset( $block_attributes['style']['background']['backgroundPosition'] ) ? $block_attributes['style']['background']['backgroundPosition'] : null; + $background_styles['backgroundRepeat'] = isset( $block_attributes['style']['background']['backgroundRepeat'] ) ? $block_attributes['style']['background']['backgroundRepeat'] : null; + + // 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'; + } + } + + $styles = gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) ); if ( ! empty( $styles['css'] ) ) { // Inject background styles to the first element, presuming it's the wrapper, if it exists. diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index b4b63da3c339de..943338e2916b58 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2084,6 +2084,7 @@ protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) { * @since 5.9.0 Added the `$settings` and `$properties` parameters. * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters. * @since 6.5.0 Passing current theme JSON settings to wp_get_typography_font_size_value(). + * @since 6.6.0 Using style engine to correctly fetch background CSS values. * * @param array $styles Styles to process. * @param array $settings Theme settings. @@ -2135,7 +2136,7 @@ protected static function compute_style_properties( $styles, $settings = array() // Processes background styles. if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) { - $background_styles = gutenberg_get_background_support_styles( $styles['background'] ); + $background_styles = gutenberg_style_engine_get_styles( array( 'background' => $styles['background'] ) ); $value = $background_styles['declarations'][ $css_property ] ?? $value; } diff --git a/phpunit/block-supports/background-test.php b/phpunit/block-supports/background-test.php index a4ddb7da3f74af..165a65204793d1 100644 --- a/phpunit/block-supports/background-test.php +++ b/phpunit/block-supports/background-test.php @@ -213,71 +213,4 @@ public function data_background_block_support() { ), ); } - - /** - * Tests generating background styles. - * - * @covers ::gutenberg_get_background_support_styles - * - * @dataProvider data_get_background_support_styles - * - * @param mixed $background_style The background styles within the block attributes. - * @param string $expected_css Expected markup for the block wrapper. - */ - public function test_get_background_support_styles( $background_style, $expected_css ) { - $actual = gutenberg_get_background_support_styles( $background_style )['css']; - - $this->assertEquals( - $expected_css, - $actual, - 'Background CSS should be correct.' - ); - } - public function data_get_background_support_styles() { - return array( - 'css generated with file source' => array( - 'background_style' => array( - 'backgroundImage' => array( - 'url' => 'https://example.com/image.jpg', - 'source' => 'file', - ), - ), - 'expected_css' => "background-image:url('https://example.com/image.jpg');background-size:cover;", - ), - 'css generated where backgroundImage is a string' => array( - 'background_style' => array( - 'backgroundImage' => "url('https://example.com/image.jpg')", - ), - 'expected_css' => "background-image:url('https://example.com/image.jpg');background-size:cover;", - ), - 'css generated with escaped URL' => array( - 'background_style' => array( - 'backgroundImage' => array( - 'url' => 'https://example.com/image.jpg?q=pom-poms+%3Cscript%3Eevil_script()%3C/script%3E', - ), - 'backgroundSize' => 'cover', - ), - 'expected_css' => 'background-size:cover;', - ), - 'css generated with expected properties' => array( - 'background_style' => array( - 'backgroundImage' => "url('https://example.com/image.jpg')", - 'backgroundSize' => '6px, auto, contain', - 'backgroundPosition' => 'bottom 10px right 20px', - 'backgroundRepeat' => 'repeat space', - ), - 'expected_css' => "background-image:url('https://example.com/image.jpg');background-position:bottom 10px right 20px;background-repeat:repeat space;background-size:6px, auto, contain;", - ), - 'css generated for file source with contain size should add center position' => array( - 'background_style' => array( - 'backgroundImage' => array( - 'url' => 'https://example.com/image.jpg', - 'source' => 'file', - ), - 'backgroundSize' => 'contain', - ), - 'expected_css' => "background-image:url('https://example.com/image.jpg');background-position:center;background-size:contain;", - ), - ); - } } diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 31f0d7e38c0955..f92e8aa81a8473 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -4836,7 +4836,24 @@ public function test_get_top_level_background_image_styles() { ); $expected_styles = "body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}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;}"; - $this->assertSame( $expected_styles, $theme_json->get_stylesheet() ); + $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with top-level background styles type does not match expectations' ); + + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'styles' => array( + 'background' => array( + 'backgroundImage' => "url('http://example.org/image.png')", + 'backgroundSize' => 'contain', + 'backgroundRepeat' => 'no-repeat', + 'backgroundPosition' => 'center center', + ), + ), + ) + ); + + $expected_styles = "body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}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;}"; + $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with top-level background image as string type does not match expectations' ); } public function test_get_custom_css_handles_global_custom_css() {