From cbec7d277fba23fcbb4b3b036bcd41c08e071227 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 2 Aug 2021 10:32:38 +0100 Subject: [PATCH 01/17] Add a block gap spacing style to theme.json and support in flow layout --- lib/block-supports/layout.php | 2 +- lib/class-wp-theme-json-gutenberg.php | 6 ++++++ lib/theme.json | 3 +++ packages/block-editor/src/layouts/flow.js | 5 +++++ 4 files changed, 15 insertions(+), 1 deletion(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 7baa5fec4ffd6..51ea9286099a6 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -58,12 +58,12 @@ function gutenberg_get_layout_style( $selector, $layout ) { $style .= '}'; $style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}'; - $style .= "$selector .alignfull { max-width: none; }"; } $style .= "$selector .alignleft { float: left; margin-right: 2em; }"; $style .= "$selector .alignright { float: right; margin-left: 2em; }"; + $style .= "$selector > * + * { margin-top: var( --wp-theme-block-gap ); margin-bottom: 0; }"; } elseif ( 'flex' === $layout_type ) { $style = "$selector {"; $style .= 'display: flex;'; diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index b3ee6d1f8b9d3..02926dd947450 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -63,6 +63,7 @@ class WP_Theme_JSON_Gutenberg { 'spacing' => array( 'margin' => null, 'padding' => null, + 'gap' => null, ), 'typography' => array( 'fontFamily' => null, @@ -233,6 +234,7 @@ class WP_Theme_JSON_Gutenberg { 'padding-right' => array( 'spacing', 'padding', 'right' ), 'padding-bottom' => array( 'spacing', 'padding', 'bottom' ), 'padding-left' => array( 'spacing', 'padding', 'left' ), + '--wp-theme-block-gap' => array( 'spacing', 'gap' ), 'text-decoration' => array( 'typography', 'textDecoration' ), 'text-transform' => array( 'typography', 'textTransform' ), ); @@ -835,6 +837,10 @@ private function get_block_styles( $style_nodes, $setting_nodes ) { $selector = $metadata['selector']; $declarations = self::compute_style_properties( $node ); $block_rules .= self::to_ruleset( $selector, $declarations ); + + if ( self::ROOT_BLOCK_SELECTOR === $selector ) { + $block_rules .= ' .wp-site-blocks > * + *, body > * + * { margin-top: var( --wp-theme-block-gap ); margin-bottom: 0; }'; + } } $preset_rules = ''; diff --git a/lib/theme.json b/lib/theme.json index 9e751dc939118..1d3c24eff7e16 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -236,5 +236,8 @@ } } } + }, + "styles": { + "spacing": { "gap": "30px" } } } diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index 8c350f4e229fc..9e52c88c7e477 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -134,6 +134,11 @@ export default { float: right; margin-left: 2em; } + + ${ appendSelectors( selector, '> * + *' ) } { + margin-top: var( --wp-theme-block-gap ); + margin-bottom: 0; + } `; return ; From 7e580c1434cd207cc66f82c16f3d06c2850f7e97 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 2 Aug 2021 10:38:07 +0100 Subject: [PATCH 02/17] Remove block styles conflicting with the margin config --- packages/block-library/src/group/theme.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/block-library/src/group/theme.scss b/packages/block-library/src/group/theme.scss index 2aa1b4f5ade7e..5131a9e6923e5 100644 --- a/packages/block-library/src/group/theme.scss +++ b/packages/block-library/src/group/theme.scss @@ -2,7 +2,5 @@ &.has-background { // Matches paragraph Block padding padding: $block-bg-padding--v $block-bg-padding--h; - margin-top: 0; - margin-bottom: 0; } } From 0a1a049cf57baa73ecd326b023b7c090ccd081d9 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 2 Aug 2021 15:26:32 +0100 Subject: [PATCH 03/17] Fix template mode block gap support --- lib/block-supports/layout.php | 4 ++-- lib/class-wp-theme-json-gutenberg.php | 2 +- packages/edit-post/src/components/visual-editor/index.js | 9 ++++++++- packages/edit-site/src/components/block-editor/index.js | 2 +- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 51ea9286099a6..052162995c78d 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -85,11 +85,11 @@ function gutenberg_get_layout_style( $selector, $layout ) { function gutenberg_render_layout_support_flag( $block_content, $block ) { $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); $support_layout = gutenberg_block_has_support( $block_type, array( '__experimentalLayout' ), false ); - if ( ! $support_layout || ! isset( $block['attrs']['layout'] ) ) { + if ( ! $support_layout ) { return $block_content; } - $used_layout = $block['attrs']['layout']; + $used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : array(); 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' ) ); diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 02926dd947450..f09014c93f42a 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -839,7 +839,7 @@ private function get_block_styles( $style_nodes, $setting_nodes ) { $block_rules .= self::to_ruleset( $selector, $declarations ); if ( self::ROOT_BLOCK_SELECTOR === $selector ) { - $block_rules .= ' .wp-site-blocks > * + *, body > * + * { margin-top: var( --wp-theme-block-gap ); margin-bottom: 0; }'; + $block_rules .= ' .wp-site-blocks > * + * { margin-top: var( --wp-theme-block-gap ); margin-bottom: 0; }'; } } diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 3fbf4b4d21758..76c56ee198efe 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -233,7 +233,14 @@ export default function VisualEditor( { styles } ) { ) } - + diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index 9514d6a27992f..5f0735846c94f 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -97,7 +97,7 @@ export default function BlockEditor( { setIsInserterOpen } ) { contentRef={ mergedRefs } > From 2b39b04f004726a02b0e07674d1a8eb81fae32fb Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 2 Aug 2021 15:39:30 +0100 Subject: [PATCH 04/17] Fix phpcs --- 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 052162995c78d..93af12db7056a 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -85,7 +85,7 @@ function gutenberg_get_layout_style( $selector, $layout ) { function gutenberg_render_layout_support_flag( $block_content, $block ) { $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); $support_layout = gutenberg_block_has_support( $block_type, array( '__experimentalLayout' ), false ); - if ( ! $support_layout ) { + if ( ! $support_layout ) { return $block_content; } From a694bab21db0d0978954938a3027ac3bd0e77b4c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 5 Aug 2021 09:50:19 +0100 Subject: [PATCH 05/17] Fix php unit test --- lib/class-wp-theme-json-gutenberg.php | 2 +- phpunit/class-wp-theme-json-test.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index f09014c93f42a..6fb9b680dc8a0 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -839,7 +839,7 @@ private function get_block_styles( $style_nodes, $setting_nodes ) { $block_rules .= self::to_ruleset( $selector, $declarations ); if ( self::ROOT_BLOCK_SELECTOR === $selector ) { - $block_rules .= ' .wp-site-blocks > * + * { margin-top: var( --wp-theme-block-gap ); margin-bottom: 0; }'; + $block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp-theme-block-gap ); margin-bottom: 0; }'; } } diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 87dc387c4444f..c3e3b690b14ef 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -465,7 +465,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() { ); $this->assertEquals( - '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;}', + 'body{--wp--preset--color--grey: grey;}.wp-site-blocks > * + * { margin-top: var( --wp-theme-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;}', $theme_json->get_stylesheet() ); } From 80fb0b6abf08fdd1d401a45ea75542e74da460ad Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 5 Aug 2021 09:52:30 +0100 Subject: [PATCH 06/17] Rename gap as blockGap --- lib/class-wp-theme-json-gutenberg.php | 8 ++++---- lib/theme.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 6fb9b680dc8a0..154f35c56f94a 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -61,9 +61,9 @@ class WP_Theme_JSON_Gutenberg { 'text' => null, ), 'spacing' => array( - 'margin' => null, - 'padding' => null, - 'gap' => null, + 'margin' => null, + 'padding' => null, + 'blockGap' => null, ), 'typography' => array( 'fontFamily' => null, @@ -234,7 +234,7 @@ class WP_Theme_JSON_Gutenberg { 'padding-right' => array( 'spacing', 'padding', 'right' ), 'padding-bottom' => array( 'spacing', 'padding', 'bottom' ), 'padding-left' => array( 'spacing', 'padding', 'left' ), - '--wp-theme-block-gap' => array( 'spacing', 'gap' ), + '--wp-theme-block-gap' => array( 'spacing', 'blockGap' ), 'text-decoration' => array( 'typography', 'textDecoration' ), 'text-transform' => array( 'typography', 'textTransform' ), ); diff --git a/lib/theme.json b/lib/theme.json index 1d3c24eff7e16..c389b249383a4 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -238,6 +238,6 @@ } }, "styles": { - "spacing": { "gap": "30px" } + "spacing": { "blockGap": "30px" } } } From c2e1a00bcaa006e55327a219101d794ed4d3f0a1 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 5 Aug 2021 10:03:14 +0100 Subject: [PATCH 07/17] Add block gap support to the flex layout --- packages/block-editor/src/layouts/flex.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index 9818cfe4ff31b..95cdeb6611868 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -19,11 +19,18 @@ export default { save: function FlexLayoutStyle( { selector } ) { return ( - + ); }, From 904742c170d82a8bf797dc887bcef984182dafac Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 5 Aug 2021 10:15:44 +0100 Subject: [PATCH 08/17] Fix more php unit tests --- packages/block-library/src/group/block.json | 4 +++- phpunit/class-wp-theme-json-schema-v0-test.php | 4 ++-- phpunit/class-wp-theme-json-test.php | 12 ++++++------ 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index 5e182cd0e9cba..2b08a1b93597e 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -35,7 +35,9 @@ "style": true, "width": true }, - "__experimentalLayout": true + "__experimentalLayout": { + "allowSwitching": true + } }, "editorStyle": "wp-block-group-editor", "style": "wp-block-group" diff --git a/phpunit/class-wp-theme-json-schema-v0-test.php b/phpunit/class-wp-theme-json-schema-v0-test.php index d3f8bce0b2b53..aafe4d34c72b6 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);}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);}.wp-site-blocks > * + * { margin-top: var( --wp-theme-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;}', $theme_json->get_stylesheet() ); $this->assertEquals( - '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;}', + 'body{color: var(--wp--preset--color--grey);}.wp-site-blocks > * + * { margin-top: var( --wp-theme-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;}', $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 c3e3b690b14ef..34640373a920d 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-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-site-blocks > * + * { margin-top: var( --wp-theme-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;}', $theme_json->get_stylesheet() ); $this->assertEquals( - '.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-site-blocks > * + * { margin-top: var( --wp-theme-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;}', $theme_json->get_stylesheet( 'block_styles' ) ); } @@ -352,11 +352,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);}a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}.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);}.wp-site-blocks > * + * { margin-top: var( --wp-theme-block-gap ); margin-bottom: 0; }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}.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);}a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}.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);}.wp-site-blocks > * + * { margin-top: var( --wp-theme-block-gap ); margin-bottom: 0; }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}.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( @@ -423,11 +423,11 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() { ); $this->assertEquals( - '.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;}', + '.wp-block-group{--wp--preset--color--grey: grey;}.wp-site-blocks > * + * { margin-top: var( --wp-theme-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;}', $theme_json->get_stylesheet() ); $this->assertEquals( - '.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-site-blocks > * + * { margin-top: var( --wp-theme-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;}', $theme_json->get_stylesheet( 'block_styles' ) ); } From cd57781c9d16974c3d32c6c72a758c75a91bcccc Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 5 Aug 2021 10:24:56 +0100 Subject: [PATCH 09/17] Use 24px default block gap --- lib/theme.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/theme.json b/lib/theme.json index c389b249383a4..6b52969009bee 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -238,6 +238,6 @@ } }, "styles": { - "spacing": { "blockGap": "30px" } + "spacing": { "blockGap": "24px" } } } From 43f26476b750e066d04f422b0a54ccf9543c0d73 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 11 Aug 2021 09:55:40 +0100 Subject: [PATCH 10/17] Rename the CSS variable to --wp--style--block-gap --- lib/block-supports/layout.php | 2 +- lib/class-wp-theme-json-gutenberg.php | 4 ++-- packages/block-editor/src/layouts/flex.js | 2 +- packages/block-editor/src/layouts/flow.js | 2 +- phpunit/class-wp-theme-json-schema-v0-test.php | 4 ++-- phpunit/class-wp-theme-json-test.php | 14 +++++++------- 6 files changed, 14 insertions(+), 14 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 93af12db7056a..c05875f11d843 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -63,7 +63,7 @@ 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-theme-block-gap ); margin-bottom: 0; }"; + $style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }"; } elseif ( 'flex' === $layout_type ) { $style = "$selector {"; $style .= 'display: flex;'; diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 154f35c56f94a..1b96923323b46 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -234,7 +234,7 @@ class WP_Theme_JSON_Gutenberg { 'padding-right' => array( 'spacing', 'padding', 'right' ), 'padding-bottom' => array( 'spacing', 'padding', 'bottom' ), 'padding-left' => array( 'spacing', 'padding', 'left' ), - '--wp-theme-block-gap' => array( 'spacing', 'blockGap' ), + '--wp--style--block-gap' => array( 'spacing', 'blockGap' ), 'text-decoration' => array( 'typography', 'textDecoration' ), 'text-transform' => array( 'typography', 'textTransform' ), ); @@ -839,7 +839,7 @@ private function get_block_styles( $style_nodes, $setting_nodes ) { $block_rules .= self::to_ruleset( $selector, $declarations ); if ( self::ROOT_BLOCK_SELECTOR === $selector ) { - $block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp-theme-block-gap ); margin-bottom: 0; }'; + $block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }'; } } diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index 95cdeb6611868..d130468b93cee 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -22,7 +22,7 @@ export default {