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.

Sign up for GitHub

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
wants to merge 13 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0aa1a2e
Layout: Add layout aware margin styles output for blocks in global st…
andrewserong Jan 25, 2023
f921dc3
Add comment clarifying early return
andrewserong Jan 27, 2023
97c0480
Add layout aware rules for children of the root .wp-site-blocks class
andrewserong Jan 27, 2023
c2cad93
Update code comment
andrewserong Jan 30, 2023
166f2bd
Try out a different selector for the margin rules
andrewserong Feb 1, 2023
3604c0f
Try to fix tests
andrewserong Feb 3, 2023
b536418
Try more verbose marginStyles that accounts for first and last blocks…
andrewserong Feb 7, 2023
f498b45
Please the linter
andrewserong Feb 7, 2023
50e3aa5
Try combining margin and spacing styles in PHP output, roll out logic…
andrewserong Feb 21, 2023
8c0a67a
Fix formatting
andrewserong Feb 21, 2023
5da1f26
Fix linting issues
andrewserong Feb 21, 2023
db1ca3c
Consolidate JS logic for marginStyles and spacingStyles to follow PHP…
andrewserong Feb 22, 2023
1fa9c3b
Rename function to add clarity
andrewserong Feb 23, 2023
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
164 changes: 118 additions & 46 deletions lib/class-wp-theme-json-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1196,6 +1196,70 @@ protected function get_block_classes( $style_nodes ) {
return $block_rules;
}

/**
* Gets the CSS layout rules for a particular block from theme.json layout definitions.
*
* @since 6.3.0
*
* @param string $selector_format The selector to use for the layout rules with `%s` as a placeholder for the layout rule's selector.
* @param array $layout_definition The layout definition to get styles for.
* @param string $rules_type The key for the set of layout rules to use (e.g. 'marginStyles' or 'spacingStyles').
* @param array|string $replacement_value The value to be output where layout rules define a null placeholder value.
* @return string CSS string containing the layout rules.
*/
protected function get_layout_definition_rules( $selector_format, $layout_definition, $rules_type, $replacement_value ) {
$layout_rules = _wp_array_get( $layout_definition, array( $rules_type ), array() );
$layout_selector_pattern = '/^[a-zA-Z0-9\-\.\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors.

$block_rules = '';

if (
! empty( $selector_format ) &&
! empty( $layout_rules )
) {
foreach ( $layout_rules as $layout_rule ) {
if (
isset( $layout_rule['selector'] ) &&
preg_match( $layout_selector_pattern, $layout_rule['selector'] ) &&
! empty( $layout_rule['rules'] )
) {
$declarations = array();
foreach ( $layout_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( $replacement_value ) && ! is_array( $replacement_value ) ) {
$declarations[] = array(
'name' => $css_property,
'value' => $replacement_value,
);
} elseif ( isset( $replacement_value[ $css_property ] ) ) {
if ( static::is_safe_css_declaration( $css_property, $replacement_value[ $css_property ] ) ) {
$declarations[] = array(
'name' => $css_property,
'value' => $replacement_value[ $css_property ],
);
}
}
}

$layout_selector = sprintf(
$selector_format,
$layout_rule['selector']
);

$block_rules .= static::to_ruleset( $layout_selector, $declarations );
}
}
}

return $block_rules;
}

/**
* Gets the CSS layout rules for a particular block from theme.json layout definitions.
*
Expand All @@ -1213,9 +1277,14 @@ protected function get_layout_styles( $block_metadata ) {
return $block_rules;
}

// Skip outputting layout styles if the block does not support layout or margin.
// For blocks that have margin but not layout support, only layout aware margin styles are output.
if ( isset( $block_metadata['name'] ) ) {
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_metadata['name'] );
if ( ! block_has_support( $block_type, array( '__experimentalLayout' ), false ) ) {
if (
! block_has_support( $block_type, array( '__experimentalLayout' ), false ) &&
! block_has_support( $block_type, array( 'spacing', 'margin' ), false )
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trying to wrap my head around what this condition is doing - if layout is not supported, when does it matter whether margin is supported or not?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I see the confusion here, I should add a comment to clarify.

This check is about what the current block supports rather than what the theme supports, so to support layout aware margins for blocks without layout support (e.g. heading, paragraph, image) we need to allow it to pass at this point. The check is primarily an early return so that for blocks that we know don't need any handling, we don't need to do any further lookups to theme settings, etc. Previously, that was just blocks that didn't support layout, but we now need the check to be layout + margin.

Further down in the function, we check $has_block_gap_support (that is, the theme has block gap support) before outputting the layout aware margin rules.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it, thanks for clarifying!

) {
return $block_rules;
}
}
Expand Down Expand Up @@ -1253,6 +1322,40 @@ protected function get_layout_styles( $block_metadata ) {
}
}

// If the theme has block gap support, and the block has margin values, add layout-aware margin styles.
$margin_value = static::get_property_value( $node, array( 'spacing', 'margin' ) );
if (
$has_block_gap_support &&
isset( $margin_value ) && '' !== $margin_value
) {
$margin_styles = gutenberg_style_engine_get_styles(
array( 'spacing' => array( 'margin' => $margin_value ) )
);

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' ), '' ) );
$block_rules .= $this->get_layout_definition_rules(
'.' . $class_name . '%s' . $selector,
$layout_definition,
'marginStyles',
$margin_styles['declarations']
);

// Add layout aware margin rule for children of the root site blocks class.
if ( 'default' === $layout_definition_key ) {
$block_rules .= $this->get_layout_definition_rules(
'.wp-site-blocks%s' . $selector,
$layout_definition,
'marginStyles',
$margin_styles['declarations']
);
}
}
}
}

// If the block should have custom gap, add the gap styles.
if ( null !== $block_gap_value && false !== $block_gap_value && '' !== $block_gap_value ) {
foreach ( $layout_definitions as $layout_definition_key => $layout_definition ) {
Expand All @@ -1261,53 +1364,22 @@ protected function get_layout_styles( $block_metadata ) {
continue;
}

$class_name = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), false ) );
$spacing_rules = _wp_array_get( $layout_definition, array( 'spacingStyles' ), array() );
$class_name = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), false ) );
$layout_selector_format = '';

if (
! empty( $class_name ) &&
! empty( $spacing_rules )
) {
foreach ( $spacing_rules as $spacing_rule ) {
$declarations = array();
if (
isset( $spacing_rule['selector'] ) &&
preg_match( $layout_selector_pattern, $spacing_rule['selector'] ) &&
! empty( $spacing_rule['rules'] )
) {
// Iterate over each of the styling rules and substitute non-string values such as `null` with the real `blockGap` value.
foreach ( $spacing_rule['rules'] as $css_property => $css_value ) {
$current_css_value = is_string( $css_value ) ? $css_value : $block_gap_value;
if ( static::is_safe_css_declaration( $css_property, $current_css_value ) ) {
$declarations[] = array(
'name' => $css_property,
'value' => $current_css_value,
);
}
}

if ( ! $has_block_gap_support ) {
// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
$format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s%3$s)' : ':where(%1$s.%2$s%3$s)';
$layout_selector = sprintf(
$format,
$selector,
$class_name,
$spacing_rule['selector']
);
} else {
$format = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s';
$layout_selector = sprintf(
$format,
$selector,
$class_name,
$spacing_rule['selector']
);
}
$block_rules .= static::to_ruleset( $layout_selector, $declarations );
}
}
if ( ! $has_block_gap_support ) {
// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
$layout_selector_format = static::ROOT_BLOCK_SELECTOR === $selector ? ":where(.$class_name%s)" : ":where($selector.$class_name%s)";
} else {
$layout_selector_format = static::ROOT_BLOCK_SELECTOR === $selector ? "$selector .$class_name%s" : "$selector.$class_name%s";
}

$block_rules .= $this->get_layout_definition_rules(
$layout_selector_format,
$layout_definition,
'spacingStyles',
$block_gap_value
);
}
}
}
Expand Down
46 changes: 46 additions & 0 deletions lib/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,29 @@
"margin-block-end": "0"
}
}
],
"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": {
Expand Down Expand Up @@ -322,6 +345,29 @@
"margin-block-end": "0"
}
}
],
"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": {
Expand Down
42 changes: 42 additions & 0 deletions packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -549,6 +549,29 @@ describe( 'global styles renderer', () => {
},
},
],
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',
Expand Down Expand Up @@ -664,6 +687,24 @@ describe( 'global styles renderer', () => {
':where(.wp-block-group.is-layout-flex) { gap: 2em; }'
);
} );

it( 'should return layout aware margin styles', () => {
const style = {
spacing: { margin: { top: '25px', bottom: '50px' } },
};

const layoutStyles = getLayoutStyles( {
tree: layoutDefinitionsTree,
style,
selector: '.wp-block-cover',
hasBlockGapSupport: true,
hasFallbackGapSupport: true,
} );

expect( layoutStyles ).toEqual(
'.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-block-start: 0; margin-bottom: 50px; }.wp-site-blocks > * + .wp-block-cover { margin-top: 25px; margin-bottom: 50px; }.wp-site-blocks > *:last-child.wp-block-cover { margin-top: 25px; margin-block-end: 0; }'
);
} );
} );

describe( 'getBlockSelectors', () => {
Expand Down Expand Up @@ -691,6 +732,7 @@ describe( 'global styles renderer', () => {
border: '.my-image img, .my-image .crop-area',
},
hasLayoutSupport: false,
hasMarginSupport: false,
},
} );
} );
Expand Down
Loading