From 098ee15550943c27d916b90db25daecb49fb3270 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 2 Sep 2021 11:22:05 +0100 Subject: [PATCH 1/5] All themes with theme.json to opt-out of block gap styles --- lib/block-supports/layout.php | 29 +++++++++++++++-------- lib/class-wp-theme-json-gutenberg.php | 1 + lib/theme.json | 1 + packages/block-editor/src/layouts/flex.js | 10 +++++++- packages/block-editor/src/layouts/flow.js | 15 ++++++++---- 5 files changed, 41 insertions(+), 15 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 56d893ae7d3df..b7cef2a1967ff 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -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 = ''; @@ -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 .= '}'; @@ -93,11 +100,13 @@ 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( $tree->get_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; } @@ -105,7 +114,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { } $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( diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 474294caa2a21..09e54e4bd941a 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -103,6 +103,7 @@ class WP_Theme_JSON_Gutenberg { 'customMargin' => null, 'customPadding' => null, 'units' => null, + 'blockGap' => null, ), 'typography' => array( 'customFontSize' => null, diff --git a/lib/theme.json b/lib/theme.json index 5d952b381ef93..eba5a9d468687 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -214,6 +214,7 @@ "blockGap": false, "customMargin": false, "customPadding": false, + "blockGap": false, "units": [ "px", "em", "rem", "vh", "vw", "%" ] }, "border": { diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index d130468b93cee..268674ee3e503 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { appendSelectors } from './utils'; +import useSetting from '../components/use-setting'; export default { name: 'flex', @@ -18,11 +19,18 @@ export default { }, save: function FlexLayoutStyle( { selector } ) { + const blockGapSupport = useSetting( 'spacing.blockGap' ); + const hasBlockGapStylesSupport = blockGapSupport !== null; + return ( ; }, From 134d145267c20062431973c786f3c31eaec38f80 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 2 Sep 2021 12:29:33 +0100 Subject: [PATCH 2/5] Fix unit tests --- lib/class-wp-theme-json-gutenberg.php | 5 ++++- phpunit/class-wp-theme-json-schema-v0-test.php | 4 ++-- phpunit/class-wp-theme-json-test.php | 13 ++++++++----- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 09e54e4bd941a..b3f2cbe6fd2c3 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -819,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; }'; + } } } diff --git a/phpunit/class-wp-theme-json-schema-v0-test.php b/phpunit/class-wp-theme-json-schema-v0-test.php index 442e917220c58..d3f8bce0b2b53 100644 --- a/phpunit/class-wp-theme-json-schema-v0-test.php +++ b/phpunit/class-wp-theme-json-schema-v0-test.php @@ -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( diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 5fde40de86e7c..d88adc7f384a3 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -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' ) ); } @@ -260,6 +260,9 @@ function test_get_stylesheet() { ), ), ), + 'spacing' => array( + 'blockGap' => false, + ), 'misc' => 'value', 'blocks' => array( 'core/group' => array( @@ -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' ) ); } @@ -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() ); } From 80d93f98051c0758d25a4c93b41825625f0231d0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 3 Sep 2021 08:58:13 +0100 Subject: [PATCH 3/5] Small code quality change --- lib/block-supports/layout.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index b7cef2a1967ff..92763e010d775 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -102,7 +102,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( array(), 'theme' ); $theme_settings = $tree->get_settings(); - $default_layout = _wp_array_get( $tree->get_settings(), array( 'layout' ) ); + $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; From 999a15a415bebb76b3de34a34934296be6b7a9de Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 6 Sep 2021 11:34:49 +0100 Subject: [PATCH 4/5] Remove duplicated block gap --- lib/theme.json | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/theme.json b/lib/theme.json index eba5a9d468687..5d952b381ef93 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -214,7 +214,6 @@ "blockGap": false, "customMargin": false, "customPadding": false, - "blockGap": false, "units": [ "px", "em", "rem", "vh", "vw", "%" ] }, "border": { From 75014a03f9d6fc535cb8be41f0ffd204659e433a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 6 Sep 2021 11:48:12 +0100 Subject: [PATCH 5/5] Make block gap opt-in --- lib/theme.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/theme.json b/lib/theme.json index 5d952b381ef93..37ccaf0c010df 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -211,7 +211,7 @@ ] }, "spacing": { - "blockGap": false, + "blockGap": null, "customMargin": false, "customPadding": false, "units": [ "px", "em", "rem", "vh", "vw", "%" ]