Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout: Add layout aware margin styles output for blocks in global styles #47399

Closed
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Try more verbose marginStyles that accounts for first and last blocks…
… within the layout
andrewserong committed Feb 7, 2023
commit b5364189b2c2f4484bf962cd3fe50f5a68751b01
49 changes: 39 additions & 10 deletions lib/class-wp-theme-json-gutenberg.php
Original file line number Diff line number Diff line change
@@ -1271,18 +1271,47 @@ 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' ), '' ) );
$class_name = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), '' ) );
$margin_rules = _wp_array_get( $layout_definition, array( 'marginStyles' ), array() );

if (
isset( $layout_definition['marginSelector'] ) &&
preg_match( $layout_selector_pattern, $layout_definition['marginSelector'] )
! empty( $class_name ) &&
! empty( $margin_rules )
) {
$block_rules .= sprintf(
'.%s%s%s {%s}',
$class_name,
$layout_definition['marginSelector'],
$selector,
$margin_styles['css']
);
foreach ( $margin_rules as $margin_rule ) {
if (
isset( $margin_rule['selector'] ) &&
preg_match( $layout_selector_pattern, $margin_rule['selector'] ) &&
! empty( $margin_rule['rules'] )
) {
$declarations = array();
foreach ( $margin_rule['rules'] as $css_property => $css_value ) {
if ( is_string( $css_value ) ) {
if ( static::is_safe_css_declaration( $css_property, $css_value ) ) {
$declarations[] = array(
'name' => $css_property,
'value' => $css_value,
);
}
} elseif ( isset( $margin_styles['declarations'][ $css_property ] ) ) {
if ( static::is_safe_css_declaration( $css_property, $margin_styles['declarations'][ $css_property ] ) ) {
$declarations[] = array(
'name' => $css_property,
'value' => $margin_styles['declarations'][ $css_property ],
);
}
}
}
$layout_selector = sprintf(
'.%s%s%s',
$class_name,
$margin_rule['selector'],
$selector
);

$block_rules .= static::to_ruleset( $layout_selector, $declarations );
}
}
}
}
// Add layout aware margin rule for children of the root site blocks class.
48 changes: 46 additions & 2 deletions lib/theme.json
Original file line number Diff line number Diff line change
@@ -263,7 +263,29 @@
}
}
],
"marginSelector": " > * + "
"marginStyles": [
{
"selector": " > ",
"rules": {
"margin-block-start": "0",
"margin-bottom": null
}
},
{
"selector": " > * + ",
"rules": {
"margin-top": null,
"margin-bottom": null
}
},
{
"selector": " > *:last-child",
"rules": {
"margin-top": null,
"margin-block-end": "0"
}
}
]
},
"constrained": {
"name": "constrained",
@@ -324,7 +346,29 @@
}
}
],
"marginSelector": " > * + "
"marginStyles": [
{
"selector": " > ",
"rules": {
"margin-block-start": "0",
"margin-bottom": null
}
},
{
"selector": " > * + ",
"rules": {
"margin-top": null,
"margin-bottom": null
}
},
{
"selector": " > *:last-child",
"rules": {
"margin-top": null,
"margin-block-end": "0"
}
}
]
},
"flex": {
"name": "flex",
Original file line number Diff line number Diff line change
@@ -549,7 +549,29 @@ describe( 'global styles renderer', () => {
},
},
],
marginSelector: ' > * + ',
marginStyles: [
{
selector: ' > ',
rules: {
'margin-block-start': '0',
'margin-bottom': null,
},
},
{
selector: ' > * + ',
rules: {
'margin-top': null,
'margin-bottom': null,
},
},
{
selector: ' > *:last-child',
rules: {
'margin-top': null,
'margin-block-end': '0',
},
},
],
},
flex: {
name: 'flex',
@@ -680,7 +702,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-block-start: 0; margin-bottom: 50px }.is-layout-flow > * + .wp-block-cover { margin-top: 25px; margin-bottom: 50px }.is-layout-flow > *:last-child.wp-block-cover { margin-top: 25px; margin-block-end: 0 }.wp-site-blocks > * + .wp-block-cover { margin-top: 25px; margin-bottom: 50px; }'
);
} );
} );
Original file line number Diff line number Diff line change
@@ -362,20 +362,52 @@ export function getLayoutStyles( {
style?.spacing?.margin &&
tree?.settings?.layout?.definitions
) {
const marginRules = compileCSS( {
const marginString = compileCSS( {
spacing: { margin: style.spacing.margin },
} );

// Get margin rules keyed by CSS class name.
const marginRules = getCSSRules( {
spacing: { margin: style.spacing.margin },
} ).reduce(
( acc, rule ) => ( {
...acc,
[ kebabCase( rule.key ) ]: rule.value,
} ),
{}
);

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 } }`;
( { className, marginStyles } ) => {
if ( marginStyles?.length ) {
marginStyles.forEach( ( marginStyle ) => {
const declarations = [];

Object.entries( marginStyle.rules ).forEach(
( [ cssProperty, cssValue ] ) => {
if ( cssValue ) {
declarations.push(
`${ cssProperty }: ${ cssValue }`
);
} else if ( marginRules[ cssProperty ] ) {
declarations.push(
`${ cssProperty }: ${ marginRules[ cssProperty ] }`
);
}
}
);

ruleset += `.${ className }${
marginStyle?.selector
}${ selector } { ${ declarations.join( '; ' ) } }`;
} );
}
}
);
// Add layout aware margin rule for children of the root site blocks class.
ruleset += `.wp-site-blocks > * + ${ selector } { ${ marginRules } }`;
ruleset += `.wp-site-blocks > * + ${ selector } { ${ marginString } }`;
}
}

26 changes: 24 additions & 2 deletions phpunit/class-wp-theme-json-test.php
Original file line number Diff line number Diff line change
@@ -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-block-start: 0;margin-bottom: 50px;}.is-layout-flow > * + .wp-block-group{margin-top: 25px;margin-bottom: 50px;}.is-layout-flow > *:last-child.wp-block-group{margin-top: 25px;margin-block-end: 0;}.wp-site-blocks > * + .wp-block-group {margin-top:25px;margin-bottom:50px;}',
$theme_json->get_stylesheet( array( 'styles' ) )
);
}
@@ -315,7 +315,29 @@ public function data_get_layout_definitions() {
),
),
),
'marginSelector' => ' > * + ',
'marginStyles' => array(
array(
'selector' => ' > ',
'rules' => array(
'margin-block-start' => '0',
'margin-bottom' => null,
),
),
array(
'selector' => ' > * + ',
'rules' => array(
'margin-top' => null,
'margin-bottom' => null,
),
),
array(
'selector' => ' > *:last-child',
'rules' => array(
'margin-top' => null,
'margin-block-end' => '0',
),
),
),
),
'flex' => array(
'name' => 'flex',