Add layout aware rules for children of the root .wp-site-blocks class

WordPress · Jan 27, 2023 · 72d0afe · 72d0afe
1 parent ea0ea2f
commit 72d0afe
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
@@ -1222,6 +1222,7 @@ protected function get_layout_styles( $block_metadata ) {
 				);
 
 				if ( ! empty( $margin_styles['css'] ) ) {
+					// Add layout aware margin rules for each supported layout type.
 					foreach ( $layout_definitions as $layout_definition_key => $layout_definition ) {
 						$class_name = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), '' ) );
 						if (
@@ -1237,6 +1238,12 @@ 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}',
+						$selector,
+						$margin_styles['css']
+					);
 				}
 			}
 

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
@@ -680,7 +680,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.is-layout-flow > .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
@@ -366,13 +366,16 @@ export function getLayoutStyles( {
 			spacing: { margin: style.spacing.margin },
 		} );
 		if ( marginRules ) {
+			// Add layout aware margin rules for each supported layout type.
 			Object.values( tree.settings.layout.definitions ).forEach(
 				( { className, marginSelector } ) => {
 					if ( marginSelector ) {
 						ruleset += `.${ className }${ marginSelector }${ selector } { ${ marginRules } }`;
 					}
 				}
 			);
+			// Add layout aware margin rule for children of the root site blocks class.
+			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;}',
+			'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 / @@ -680,7 +680,7 @@ describe( 'global styles renderer', () => { @@
     			} );
     			expect( layoutStyles ).toEqual(
-    				'.is-layout-flow > .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; }'
     			);
     		} );
     	} );
@@ Expand Down @@