Try out a different selector for the margin rules

WordPress · Feb 1, 2023 · c3b19ed · c3b19ed
1 parent d36f95d
commit c3b19ed
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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' ) )
 		);
 	}
-Original file line number
+Diff line change
@@ Expand Up / @@ -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 } }`;
     		}
     	}
@@ Expand Down @@