From 7d7ed4544f9116c5fb8cd30fbb4919ffd5cb3f52 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 13 Mar 2024 15:18:15 +1100 Subject: [PATCH 1/6] Initial commit - set :root min-height to 100% for backgrounds --- lib/class-wp-theme-json-gutenberg.php | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 23f10b94536821..5021776ec13765 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2666,6 +2666,30 @@ static function ( $pseudo_selector ) use ( $selector ) { $block_rules .= static::to_ruleset( $style_variation_selector, $individual_style_variation_declarations ); } + // 7. Generate :root level rules related to background. + // Abstract into something like static::update_separator_declarations. + // @TODO - how can this be overwritten by theme.json, if at all? styles.dimensions.minHeight? + // @TODO - implement the same logic in the editor https://github.com/WordPress/gutenberg/blob/f079bd2f7fe8e4c5694fc3feb276567777f9997b/packages/block-editor/src/components/iframe/index.js#L252-L252 + if ( static::ROOT_BLOCK_SELECTOR === $selector ) { + $should_set_root_min_height = false; + foreach ( $declarations as $declaration ) { + // If backgroundSize === cover, set the :root minHeight to 100% + // to ensure the background covers the entire viewport. + if ( 'background-size' === $declaration['name'] && 'cover' === $declaration['value'] ) { + $should_set_root_min_height = true; + break; + } + // If background is set (gradient), set the :root minHeight to 100% + // to ensure the background covers the entire viewport. + if ( 'background' === $declaration['name'] && ! empty( $declaration['value'] ) ) { + $should_set_root_min_height = true; + } + } + if ( $should_set_root_min_height ) { + $block_rules .= ':root { min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px)); }'; + } + } + return $block_rules; } From 006b967bc8aae26c252081c78a568b7e2732b85a Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 15 Mar 2024 15:41:01 +1100 Subject: [PATCH 2/6] Add tests Hijacking the existing duotone for loop to do the dirty work. --- lib/class-wp-theme-json-gutenberg.php | 60 +++++++++++++++------------ phpunit/class-wp-theme-json-test.php | 39 ++++++++++++++++- 2 files changed, 70 insertions(+), 29 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 5021776ec13765..ac76662fd1bce0 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2528,6 +2528,7 @@ public function get_styles_for_block( $block_metadata ) { $use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments']; $selector = $block_metadata['selector']; $settings = $this->theme_json['settings'] ?? null; + $is_root_selector = static::ROOT_BLOCK_SELECTOR === $selector; $feature_declarations = static::get_feature_declarations_for_node( $block_metadata, $node ); @@ -2613,10 +2614,16 @@ static function ( $pseudo_selector ) use ( $selector ) { $block_rules = ''; /* - * 1. Separate the declarations that use the general selector + * 1. Bespoke declaration modifiers: + * - 'filter': Separate the declarations that use the general selector * from the ones using the duotone selector. + * - 'background|background-size': set the html minHeight to 100% + * to ensure the background covers the entire viewport. + * */ - $declarations_duotone = array(); + $declarations_duotone = array(); + $should_set_root_min_height = false; + foreach ( $declarations as $index => $declaration ) { if ( 'filter' === $declaration['name'] ) { /* @@ -2633,6 +2640,29 @@ static function ( $pseudo_selector ) use ( $selector ) { } unset( $declarations[ $index ] ); } + + if ( $is_root_selector && ( + 'background-size' === $declaration['name'] && 'cover' === $declaration['value'] || + 'background' === $declaration['name'] && ! empty( $declaration['value'] ) + ) ) { + $should_set_root_min_height = true; + } + } + + /* + * If root styles has backgroundSize === cover, or a background is set (gradient), + * set the body minHeight to 100%. + */ + if ( $should_set_root_min_height ) { + $block_rules .= static::to_ruleset( + 'html', + array( + array( + 'name' => 'min-height', + 'value' => 'calc(100% - var(--wp-admin--admin-bar--height, 0px))', + ), + ) + ); } // Update declarations if there are separators with only background color defined. @@ -2650,7 +2680,7 @@ static function ( $pseudo_selector ) use ( $selector ) { // 4. Generate Layout block gap styles. if ( - static::ROOT_BLOCK_SELECTOR !== $selector && + ! $is_root_selector && ! empty( $block_metadata['name'] ) ) { $block_rules .= $this->get_layout_styles( $block_metadata ); @@ -2666,30 +2696,6 @@ static function ( $pseudo_selector ) use ( $selector ) { $block_rules .= static::to_ruleset( $style_variation_selector, $individual_style_variation_declarations ); } - // 7. Generate :root level rules related to background. - // Abstract into something like static::update_separator_declarations. - // @TODO - how can this be overwritten by theme.json, if at all? styles.dimensions.minHeight? - // @TODO - implement the same logic in the editor https://github.com/WordPress/gutenberg/blob/f079bd2f7fe8e4c5694fc3feb276567777f9997b/packages/block-editor/src/components/iframe/index.js#L252-L252 - if ( static::ROOT_BLOCK_SELECTOR === $selector ) { - $should_set_root_min_height = false; - foreach ( $declarations as $declaration ) { - // If backgroundSize === cover, set the :root minHeight to 100% - // to ensure the background covers the entire viewport. - if ( 'background-size' === $declaration['name'] && 'cover' === $declaration['value'] ) { - $should_set_root_min_height = true; - break; - } - // If background is set (gradient), set the :root minHeight to 100% - // to ensure the background covers the entire viewport. - if ( 'background' === $declaration['name'] && ! empty( $declaration['value'] ) ) { - $should_set_root_min_height = true; - } - } - if ( $should_set_root_min_height ) { - $block_rules .= ':root { min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px)); }'; - } - } - return $block_rules; } diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 09e0e9880664cd..ed9d9a4c61c51b 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -4802,7 +4802,7 @@ public function test_get_top_level_background_image_styles() { 'backgroundImage' => array( 'url' => 'http://example.org/image.png', ), - 'backgroundSize' => 'cover', + 'backgroundSize' => 'contain', 'backgroundRepeat' => 'no-repeat', 'backgroundPosition' => 'center center', ), @@ -4835,10 +4835,45 @@ 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;}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: cover;}"; + $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;}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() ); } + public function test_get_top_level_background_with_root_min_height() { + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'styles' => array( + 'background' => array( + 'backgroundImage' => array( + 'url' => 'http://example.org/image.png', + ), + 'backgroundSize' => 'cover', + '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: cover;}"; + $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with `styles.background.backgroundSize: cover` set does not match expectations' ); + + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'styles' => array( + 'color' => array( + 'gradient' => 'linear-gradient(#e66465, #9198e5)', + ), + ), + ) + ); + + $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: linear-gradient(#e66465, #9198e5);}"; + $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with `styles.color.background` set does not match expectations' ); + } + public function test_get_custom_css_handles_global_custom_css() { $theme_json = new WP_Theme_JSON_Gutenberg( array( From 188e0f13248a6cb508f26b1977f97866af573db6 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 15 Mar 2024 15:52:00 +1100 Subject: [PATCH 3/6] Added comment annotation. Removed value test as it's already checked in compute_properties function --- lib/class-wp-theme-json-gutenberg.php | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index ac76662fd1bce0..613a05afaf19b9 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2518,6 +2518,7 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) { * Gets the CSS rules for a particular block from theme.json. * * @since 6.1.0 + * @since 6.6.0 Setting a min-height of HTML for background gradient or background size. * * @param array $block_metadata Metadata about the block to get styles for. * @@ -2643,7 +2644,7 @@ static function ( $pseudo_selector ) use ( $selector ) { if ( $is_root_selector && ( 'background-size' === $declaration['name'] && 'cover' === $declaration['value'] || - 'background' === $declaration['name'] && ! empty( $declaration['value'] ) + 'background' === $declaration['name'] ) ) { $should_set_root_min_height = true; } From adb016a0ed57daf45316ae598440fb086247027e Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 15 Mar 2024 15:58:59 +1100 Subject: [PATCH 4/6] "does not require double quotes; use single quotes instead" Well, la-di-dah --- phpunit/class-wp-theme-json-test.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index ed9d9a4c61c51b..ed5da978fc5561 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -4870,7 +4870,7 @@ public function test_get_top_level_background_with_root_min_height() { ) ); - $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: linear-gradient(#e66465, #9198e5);}"; + $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: linear-gradient(#e66465, #9198e5);}'; $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with `styles.color.background` set does not match expectations' ); } From 0130fabf076a468b2409cc6cd10df88756a71c07 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 20 Mar 2024 13:04:03 +1100 Subject: [PATCH 5/6] Add min-height whenever there's a background-image, not just a background-size of "cover" --- lib/class-wp-theme-json-gutenberg.php | 5 +--- phpunit/class-wp-theme-json-test.php | 37 +-------------------------- 2 files changed, 2 insertions(+), 40 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 613a05afaf19b9..4a3e7327acf563 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2642,10 +2642,7 @@ static function ( $pseudo_selector ) use ( $selector ) { unset( $declarations[ $index ] ); } - if ( $is_root_selector && ( - 'background-size' === $declaration['name'] && 'cover' === $declaration['value'] || - 'background' === $declaration['name'] - ) ) { + if ( $is_root_selector && ( 'background-image' === $declaration['name'] || 'background' === $declaration['name'] ) ) { $should_set_root_min_height = true; } } diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index ed5da978fc5561..31f0d7e38c0955 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -4835,45 +4835,10 @@ 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;}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}"; + $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() ); } - public function test_get_top_level_background_with_root_min_height() { - $theme_json = new WP_Theme_JSON_Gutenberg( - array( - 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, - 'styles' => array( - 'background' => array( - 'backgroundImage' => array( - 'url' => 'http://example.org/image.png', - ), - 'backgroundSize' => 'cover', - '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: cover;}"; - $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with `styles.background.backgroundSize: cover` set does not match expectations' ); - - $theme_json = new WP_Theme_JSON_Gutenberg( - array( - 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, - 'styles' => array( - 'color' => array( - 'gradient' => 'linear-gradient(#e66465, #9198e5)', - ), - ), - ) - ); - - $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: linear-gradient(#e66465, #9198e5);}'; - $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with `styles.color.background` set does not match expectations' ); - } - public function test_get_custom_css_handles_global_custom_css() { $theme_json = new WP_Theme_JSON_Gutenberg( array( From ffababd6c0d1457468b345fe4e65b205bf779158 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 20 Mar 2024 13:44:17 +1100 Subject: [PATCH 6/6] Updating comments to reflect background-image test (previously background-size) --- lib/class-wp-theme-json-gutenberg.php | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 4a3e7327acf563..b4b63da3c339de 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2518,7 +2518,7 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) { * Gets the CSS rules for a particular block from theme.json. * * @since 6.1.0 - * @since 6.6.0 Setting a min-height of HTML for background gradient or background size. + * @since 6.6.0 Setting a min-height of HTML when root styles have a background gradient or image. * * @param array $block_metadata Metadata about the block to get styles for. * @@ -2618,7 +2618,7 @@ static function ( $pseudo_selector ) use ( $selector ) { * 1. Bespoke declaration modifiers: * - 'filter': Separate the declarations that use the general selector * from the ones using the duotone selector. - * - 'background|background-size': set the html minHeight to 100% + * - 'background|background-image': set the html min-height to 100% * to ensure the background covers the entire viewport. * */ @@ -2648,8 +2648,10 @@ static function ( $pseudo_selector ) use ( $selector ) { } /* - * If root styles has backgroundSize === cover, or a background is set (gradient), - * set the body minHeight to 100%. + * If root styles has a background-image or a background (gradient) set, + * set the min-height to '100%'. Minus `--wp-admin--admin-bar--height` for logged-in view. + * Setting the CSS rule on the HTML tag ensures background gradients and images behave similarly, + * and matches the behavior of the site editor. */ if ( $should_set_root_min_height ) { $block_rules .= static::to_ruleset(