From 09c052b46710b4673dbc089141da2802e66b1392 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 30 Nov 2021 09:33:05 +0000 Subject: [PATCH 1/7] Set default margin on body prior to generating styles from theme.json --- .../class-wp-theme-json-gutenberg.php | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php index 7dd2c94bf30889..b552cf23957f0d 100644 --- a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php +++ b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php @@ -714,6 +714,23 @@ private function get_block_classes( $style_nodes ) { } } + // Set a default margin on the root selector before generating the ruleset + // from the `theme.json`. This is to ensure that if the `theme.json` declares + // `margin` in its `spacing` declaration for the `body` element then these + // user-generated values take precedence in the CSS cascade. + // See: https://github.com/WordPress/gutenberg/issues/36147. + if ( self::ROOT_BLOCK_SELECTOR === $selector ) { + $block_rules .= self::to_ruleset( + self::ROOT_BLOCK_SELECTOR, + array( + array( + 'name' => 'margin', + 'value' => '0', + ), + ) + ); + } + // 2. Generate the rules that use the general selector. $block_rules .= self::to_ruleset( $selector, $declarations ); @@ -724,7 +741,6 @@ private function get_block_classes( $style_nodes ) { } if ( self::ROOT_BLOCK_SELECTOR === $selector ) { - $block_rules .= 'body { margin: 0; }'; $block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }'; $block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }'; $block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; From 8c827ca655719ba8f0e22bad33fe969307bcbac5 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 30 Nov 2021 11:09:13 +0000 Subject: [PATCH 2/7] Add additional context to comment Addresses https://github.com/WordPress/gutenberg/pull/36960#discussion_r759093111 --- lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php index b552cf23957f0d..24e09cc67498ac 100644 --- a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php +++ b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php @@ -714,7 +714,8 @@ private function get_block_classes( $style_nodes ) { } } - // Set a default margin on the root selector before generating the ruleset + // Reset default browser margin on the root body element. + // We set this on the root selector **before** generating the ruleset // from the `theme.json`. This is to ensure that if the `theme.json` declares // `margin` in its `spacing` declaration for the `body` element then these // user-generated values take precedence in the CSS cascade. From 7c2969d73af11ebad640ad8156db5beea220cb01 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 30 Nov 2021 11:27:06 +0000 Subject: [PATCH 3/7] Restore simple version of body rule Also avoids creating failing unit tests due to a single space character changing in a snaphshot! --- .../wordpress-5.9/class-wp-theme-json-gutenberg.php | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php index 24e09cc67498ac..09eb47b043cf85 100644 --- a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php +++ b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php @@ -721,15 +721,7 @@ private function get_block_classes( $style_nodes ) { // user-generated values take precedence in the CSS cascade. // See: https://github.com/WordPress/gutenberg/issues/36147. if ( self::ROOT_BLOCK_SELECTOR === $selector ) { - $block_rules .= self::to_ruleset( - self::ROOT_BLOCK_SELECTOR, - array( - array( - 'name' => 'margin', - 'value' => '0', - ), - ) - ); + $block_rules .= "body { margin: 0; }\n"; } // 2. Generate the rules that use the general selector. From 8132d20e14ac64b79446d9f6393674c985d854bf Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 9 Dec 2021 13:58:18 +0000 Subject: [PATCH 4/7] Update with fixes made in Core patch See https://github.com/WordPress/wordpress-develop/pull/1989 --- .../class-wp-theme-json-gutenberg.php | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php index 09eb47b043cf85..81b1b3f2b9aed6 100644 --- a/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php +++ b/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php @@ -714,14 +714,16 @@ private function get_block_classes( $style_nodes ) { } } - // Reset default browser margin on the root body element. - // We set this on the root selector **before** generating the ruleset - // from the `theme.json`. This is to ensure that if the `theme.json` declares - // `margin` in its `spacing` declaration for the `body` element then these - // user-generated values take precedence in the CSS cascade. - // See: https://github.com/WordPress/gutenberg/issues/36147. + /* + * Reset default browser margin on the root body element. + * This is set on the root selector **before** generating the ruleset + * from the `theme.json`. This is to ensure that if the `theme.json` declares + * `margin` in its `spacing` declaration for the `body` element then these + * user-generated values take precedence in the CSS cascade. + * @link https://github.com/WordPress/gutenberg/issues/36147. + */ if ( self::ROOT_BLOCK_SELECTOR === $selector ) { - $block_rules .= "body { margin: 0; }\n"; + $block_rules .= 'body { margin: 0; }'; } // 2. Generate the rules that use the general selector. From 6afbc518c7924ad5a9d4d32c9dc9a205b7bccbf4 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 9 Dec 2021 14:09:36 +0000 Subject: [PATCH 5/7] Fix output now includes new line. --- phpunit/class-wp-theme-json-test.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index c398386cd9d813..0955f7eadc8d73 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -297,7 +297,7 @@ function test_get_stylesheet_support_for_shorthand_and_longhand_values() { ) ); - $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; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}'; + $styles = "body { margin: 0; }\r\n.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; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}"; $this->assertEquals( $styles, $theme_json->get_stylesheet() ); $this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -326,7 +326,7 @@ function test_get_stylesheet_skips_disabled_protected_properties() { ) ); - $expected = '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; }'; + $expected = "body { margin: 0; }\r\n.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; }"; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) ); } From 4b7b15a560483413c1e2d7f46a54fcf29cb94be2 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 9 Dec 2021 14:26:08 +0000 Subject: [PATCH 6/7] Fix tests relating to spacing --- phpunit/class-wp-theme-json-test.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 0955f7eadc8d73..c398386cd9d813 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -297,7 +297,7 @@ function test_get_stylesheet_support_for_shorthand_and_longhand_values() { ) ); - $styles = "body { margin: 0; }\r\n.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; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}"; + $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; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}'; $this->assertEquals( $styles, $theme_json->get_stylesheet() ); $this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -326,7 +326,7 @@ function test_get_stylesheet_skips_disabled_protected_properties() { ) ); - $expected = "body { margin: 0; }\r\n.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; }"; + $expected = '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; }'; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) ); } From 0a52906b7a0e1cf17c1ab723a99f9bec5e7afda9 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 9 Dec 2021 14:37:03 +0000 Subject: [PATCH 7/7] Fix test to put body CSS reset first --- phpunit/class-wp-theme-json-test.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index c398386cd9d813..1019e9718f9b0e 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -355,7 +355,7 @@ function test_get_stylesheet_renders_enabled_protected_properties() { ) ); - $expected = 'body{--wp--style--block-gap: 1em;}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; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }.wp-block-columns{--wp--style--block-gap: 24px;}'; + $expected = 'body { margin: 0; }body{--wp--style--block-gap: 1em;}.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; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }.wp-block-columns{--wp--style--block-gap: 24px;}'; $this->assertEquals( $expected, $theme_json->get_stylesheet() ); $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) ); } @@ -481,7 +481,7 @@ function test_get_stylesheet() { ); $variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}'; - $styles = 'body{color: var(--wp--preset--color--grey);}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; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; + $styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.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; }.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}'; $presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}'; $all = $variables . $styles . $presets; $this->assertEquals( $all, $theme_json->get_stylesheet() );