diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 2ca582b4f60f4e..91a1f056b58661 100644 --- 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 index ed745b86f69551..271b3726e04aaf 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 @@ -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 index 34b003b5c6de1d..8d2d424837592f 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 @@ -366,6 +366,7 @@ 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 ) { @@ -373,6 +374,8 @@ export function getLayoutStyles( { } } ); + // 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 index 04c422db8d4390..fc37fc9bd29f82 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;}', + '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' ) ) ); }