From c3b19ed361f973468f920960e18492f670433b96 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 1 Feb 2023 16:47:05 +1100 Subject: [PATCH] Try out a different selector for the margin rules --- lib/class-wp-theme-json-gutenberg.php | 2 +- lib/theme.json | 4 ++-- .../components/global-styles/test/use-global-styles-output.js | 4 ++-- .../src/components/global-styles/use-global-styles-output.js | 2 +- phpunit/class-wp-theme-json-test.php | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 0699305b07cb06..cb80b7208b11d8 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1240,7 +1240,7 @@ protected function get_layout_styles( $block_metadata ) { } // Add layout aware margin rule for children of the root site blocks class. $block_rules .= sprintf( - '.wp-site-blocks > %s {%s}', + '.wp-site-blocks > * + %s {%s}', $selector, $margin_styles['css'] ); diff --git a/lib/theme.json b/lib/theme.json index cae5e0499cbb9b..8b3aec70399f7b 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -247,7 +247,7 @@ } } ], - "marginSelector": " > " + "marginSelector": " > * + " }, "constrained": { "name": "constrained", @@ -308,7 +308,7 @@ } } ], - "marginSelector": " > " + "marginSelector": " > * + " }, "flex": { "name": "flex", 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 271b3726e04aaf..3c0e15ce951799 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 @@ -549,7 +549,7 @@ describe( 'global styles renderer', () => { }, }, ], - marginSelector: ' > ', + marginSelector: ' > * + ', }, flex: { name: 'flex', @@ -680,7 +680,7 @@ describe( 'global styles renderer', () => { } ); expect( layoutStyles ).toEqual( - '.is-layout-flow > .wp-block-cover { margin-top: 25px; margin-bottom: 50px; }.wp-site-blocks > .wp-block-cover { margin-top: 25px; margin-bottom: 50px; }' + '.is-layout-flow > * + .wp-block-cover { margin-top: 25px; margin-bottom: 50px; }.wp-site-blocks > .wp-block-cover { margin-top: 25px; margin-bottom: 50px; }' ); } ); } ); 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 8d2d424837592f..5ac2afc47ef310 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 @@ -375,7 +375,7 @@ export function getLayoutStyles( { } ); // Add layout aware margin rule for children of the root site blocks class. - ruleset += `.wp-site-blocks > ${ selector } { ${ marginRules } }`; + ruleset += `.wp-site-blocks > * + ${ selector } { ${ marginRules } }`; } } diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index fc37fc9bd29f82..e8b1ce0eb16d7c 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -75,7 +75,7 @@ public function test_get_stylesheet_generates_layout_styles( $layout_definitions // Results also include root site blocks styles. $this->assertEquals( - '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-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: 1em; }body { --wp--style--block-gap: 1em; }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: 1em;margin-block-end: 0;}body .is-layout-flex{gap: 1em;}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-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}.wp-block-group{margin-top: 25px;margin-bottom: 50px;}.is-layout-flow > .wp-block-group {margin-top:25px;margin-bottom:50px;}.wp-site-blocks > .wp-block-group {margin-top:25px;margin-bottom:50px;}', + '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-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: 1em; }body { --wp--style--block-gap: 1em; }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: 1em;margin-block-end: 0;}body .is-layout-flex{gap: 1em;}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-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}.wp-block-group{margin-top: 25px;margin-bottom: 50px;}.is-layout-flow > * + .wp-block-group {margin-top:25px;margin-bottom:50px;}.wp-site-blocks > * + .wp-block-group {margin-top:25px;margin-bottom:50px;}', $theme_json->get_stylesheet( array( 'styles' ) ) ); }