Skip to content

Commit

Permalink
Allow themes with theme.json to opt-out of block gap styles (#34491)
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad authored Sep 6, 2021
1 parent ff2c438 commit 22457bb
Show file tree
Hide file tree
Showing 7 changed files with 55 additions and 24 deletions.
29 changes: 19 additions & 10 deletions lib/block-supports/layout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,13 @@ function gutenberg_register_layout_support( $block_type ) {
/**
* Generates the CSS corresponding to the provided layout.
*
* @param string $selector CSS selector.
* @param array $layout Layout object.
* @param string $selector CSS selector.
* @param array $layout Layout object.
* @param boolean $has_block_gap_support Whether the theme has support for the block gap.
*
* @return string CSS style.
*/
function gutenberg_get_layout_style( $selector, $layout ) {
function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false ) {
$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';

$style = '';
Expand Down Expand Up @@ -63,11 +64,17 @@ function gutenberg_get_layout_style( $selector, $layout ) {

$style .= "$selector .alignleft { float: left; margin-right: 2em; }";
$style .= "$selector .alignright { float: right; margin-left: 2em; }";
$style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }";
if ( $has_block_gap_support ) {
$style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }";
}
} elseif ( 'flex' === $layout_type ) {
$style = "$selector {";
$style .= 'display: flex;';
$style .= 'gap: var( --wp--style--block-gap, 0.5em );';
if ( $has_block_gap_support ) {
$style .= 'gap: var( --wp--style--block-gap, 0.5em );';
} else {
$style .= 'gap: 0.5em;';
}
$style .= 'flex-wrap: wrap;';
$style .= 'align-items: center;';
$style .= '}';
Expand All @@ -93,19 +100,21 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
return $block_content;
}

$default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
$tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( array(), 'theme' );
$theme_settings = $tree->get_settings();
$default_layout = _wp_array_get( $theme_settings, array( 'layout' ) );
$has_block_gap_support = isset( $theme_settings['spacing']['blockGap'] ) ? null !== $theme_settings['spacing']['blockGap'] : false;
$default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) {
$tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( array(), 'theme' );
$default_layout = _wp_array_get( $tree->get_settings(), array( 'layout' ) );
if ( ! $default_layout ) {
return $block_content;
}
$used_layout = $default_layout;
}

$id = uniqid();
$style = gutenberg_get_layout_style( ".wp-container-$id", $used_layout );
$style = gutenberg_get_layout_style( ".wp-container-$id", $used_layout, $has_block_gap_support );
// This assumes the hook only applies to blocks with a single wrapper.
// I think this is a reasonable limitation for that particular hook.
$content = preg_replace(
Expand Down
6 changes: 5 additions & 1 deletion lib/class-wp-theme-json-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ class WP_Theme_JSON_Gutenberg {
'customMargin' => null,
'customPadding' => null,
'units' => null,
'blockGap' => null,
),
'typography' => array(
'customFontSize' => null,
Expand Down Expand Up @@ -818,7 +819,10 @@ private function get_block_classes( $style_nodes ) {
$block_rules .= self::to_ruleset( $selector, $declarations );

if ( self::ROOT_BLOCK_SELECTOR === $selector ) {
$block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }';
$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
if ( $has_block_gap_support ) {
$block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }';
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion lib/theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@
]
},
"spacing": {
"blockGap": false,
"blockGap": null,
"customMargin": false,
"customPadding": false,
"units": [ "px", "em", "rem", "vh", "vw", "%" ]
Expand Down
10 changes: 9 additions & 1 deletion packages/block-editor/src/layouts/flex.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import { appendSelectors } from './utils';
import useSetting from '../components/use-setting';

export default {
name: 'flex',
Expand All @@ -18,11 +19,18 @@ export default {
},

save: function FlexLayoutStyle( { selector } ) {
const blockGapSupport = useSetting( 'spacing.blockGap' );
const hasBlockGapStylesSupport = blockGapSupport !== null;

return (
<style>{ `
${ appendSelectors( selector ) } {
display: flex;
gap: var( --wp--style--block-gap, 0.5em );
gap: ${
hasBlockGapStylesSupport
? 'var( --wp--style--block-gap, 0.5em )'
: '0.5em'
};
flex-wrap: wrap;
align-items: center;
}
Expand Down
15 changes: 11 additions & 4 deletions packages/block-editor/src/layouts/flow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,8 @@ export default {

save: function DefaultLayoutStyle( { selector, layout = {} } ) {
const { contentSize, wideSize } = layout;
const blockGapSupport = useSetting( 'spacing.blockGap' );
const hasBlockGapStylesSupport = blockGapSupport !== null;

let style =
!! contentSize || !! wideSize
Expand Down Expand Up @@ -135,12 +137,17 @@ export default {
margin-left: 2em;
}
${ appendSelectors( selector, '> * + *' ) } {
margin-top: var( --wp--style--block-gap );
margin-bottom: 0;
}
`;

if ( hasBlockGapStylesSupport ) {
style += `
${ appendSelectors( selector, '> * + *' ) } {
margin-top: var( --wp--style--block-gap );
margin-bottom: 0;
}
`;
}

return <style>{ style }</style>;
},

Expand Down
4 changes: 2 additions & 2 deletions phpunit/class-wp-theme-json-schema-v0-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -471,11 +471,11 @@ function test_get_stylesheet() {
);

$this->assertEquals(
'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}body{color: var(--wp--preset--color--grey);}.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }a{color: #111;}h1{font-size: 1em;}h2{font-size: 2em;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #333;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: #222;}.wp-block-post-title{font-size: 5em;}.wp-block-post-title a{color: #555;}.wp-block-query-title{font-size: 5em;}.wp-block-query-title a{color: #555;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}body{color: var(--wp--preset--color--grey);}a{color: #111;}h1{font-size: 1em;}h2{font-size: 2em;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #333;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: #222;}.wp-block-post-title{font-size: 5em;}.wp-block-post-title a{color: #555;}.wp-block-query-title{font-size: 5em;}.wp-block-query-title a{color: #555;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
$theme_json->get_stylesheet()
);
$this->assertEquals(
'body{color: var(--wp--preset--color--grey);}.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }a{color: #111;}h1{font-size: 1em;}h2{font-size: 2em;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #333;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: #222;}.wp-block-post-title{font-size: 5em;}.wp-block-post-title a{color: #555;}.wp-block-query-title{font-size: 5em;}.wp-block-query-title a{color: #555;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
'body{color: var(--wp--preset--color--grey);}a{color: #111;}h1{font-size: 1em;}h2{font-size: 2em;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #333;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: #222;}.wp-block-post-title{font-size: 5em;}.wp-block-post-title a{color: #555;}.wp-block-query-title{font-size: 5em;}.wp-block-query-title a{color: #555;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
$theme_json->get_stylesheet( 'block_styles' )
);
$this->assertEquals(
Expand Down
13 changes: 8 additions & 5 deletions phpunit/class-wp-theme-json-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,11 +225,11 @@ function test_get_stylesheet_support_for_shorthand_and_longhand_values() {
);

$this->assertEquals(
'.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}',
'.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}',
$theme_json->get_stylesheet()
);
$this->assertEquals(
'.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}',
'.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}',
$theme_json->get_stylesheet( 'block_styles' )
);
}
Expand Down Expand Up @@ -260,6 +260,9 @@ function test_get_stylesheet() {
),
),
),
'spacing' => array(
'blockGap' => false,
),
'misc' => 'value',
'blocks' => array(
'core/group' => array(
Expand Down Expand Up @@ -423,11 +426,11 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() {
);

$this->assertEquals(
'.wp-block-group{--wp--preset--color--grey: grey;}.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
'.wp-block-group{--wp--preset--color--grey: grey;}.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
$theme_json->get_stylesheet()
);
$this->assertEquals(
'.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
'.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
$theme_json->get_stylesheet( 'block_styles' )
);
}
Expand Down Expand Up @@ -465,7 +468,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() {
);

$this->assertEquals(
'body{--wp--preset--color--grey: grey;}.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
'body{--wp--preset--color--grey: grey;}p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
$theme_json->get_stylesheet()
);
}
Expand Down

0 comments on commit 22457bb

Please sign in to comment.