From c2138087789688ba64403dbf639c0679a9c88060 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Fri, 19 Nov 2021 13:42:43 -0500 Subject: [PATCH 1/2] Try using a user-specific variable for gap --- lib/block-supports/layout.php | 2 +- lib/block-supports/spacing.php | 2 +- packages/block-editor/src/layouts/flex.js | 2 +- packages/block-library/src/button/style.scss | 6 +++--- packages/block-library/src/columns/editor.scss | 4 ++-- packages/block-library/src/columns/style.scss | 8 ++++---- packages/blocks/src/api/constants.js | 2 +- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 755972a9ef94a..73bda563d175b 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -89,7 +89,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style = "$selector {"; $style .= 'display: flex;'; if ( $has_block_gap_support ) { - $style .= 'gap: var( --wp--style--block-gap, 0.5em );'; + $style .= 'gap: var(--wp--style--block-gap--self, var(--wp--style--block-gap, 0.5em));'; } else { $style .= 'gap: 0.5em;'; } diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php index ca7b77f43864b..886b65508a6a0 100644 --- a/lib/block-supports/spacing.php +++ b/lib/block-supports/spacing.php @@ -116,7 +116,7 @@ function gutenberg_render_spacing_gap_support( $block_content, $block ) { } $style = sprintf( - '--wp--style--block-gap: %s', + '--wp--style--block-gap--self: %s', esc_attr( $gap_value ) ); diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index 968e7694db634..7d9ef36f4e851 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -133,7 +133,7 @@ export default { display: flex; gap: ${ hasBlockGapStylesSupport - ? 'var( --wp--style--block-gap, 0.5em )' + ? 'var(--wp--style--block-gap--self, var(--wp--style--block-gap, 0.5em))' : '0.5em' }; flex-wrap: ${ flexWrap }; diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index f03929b0ebfb7..d6c1d3ec0ce8b 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -50,15 +50,15 @@ $blocks-block__margin: 0.5em; } &.wp-block-button__width-25 { - width: calc(25% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.75)); + width: calc(25% - (var(--wp--style--block-gap--self, var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.75))); } &.wp-block-button__width-50 { - width: calc(50% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.5)); + width: calc(50% - (var(--wp--style--block-gap--self, var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.5))); } &.wp-block-button__width-75 { - width: calc(75% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.25)); + width: calc(75% - (var(--wp--style--block-gap--self, var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.25))); } &.wp-block-button__width-100 { diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index de64661b46b4b..d4ee8f88551b4 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -12,14 +12,14 @@ @include break-small() { .editor-styles-wrapper .block-editor-block-list__block.wp-block-column:nth-child(even) { - margin-left: var(--wp--style--block-gap, 2em); + margin-left: var(--wp--style--block-gap--self, var(--wp--style--block-gap, 2em)); } } @include break-medium() { .editor-styles-wrapper .block-editor-block-list__block.wp-block-column:not(:first-child) { - margin-left: var(--wp--style--block-gap, 2em); + margin-left: var(--wp--style--block-gap--self, var(--wp--style--block-gap, 2em)); } } diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 8bf22d8847e21..bc8474e8f4cef 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -43,14 +43,14 @@ // As with mobile styles, this must be important since the Column // assigns its own width as an inline style, which should take effect // starting at `break-medium`. - flex-basis: calc(50% - calc(var(--wp--style--block-gap, 2em) / 2)) !important; + flex-basis: calc(50% - calc(var(--wp--style--block-gap--self, var(--wp--style--block-gap, 2em)) / 2)) !important; flex-grow: 0; } // Add space between the multiple columns. Themes can customize this if they wish to work differently. // Only apply this beyond the mobile breakpoint, as there's only a single column on mobile. &:nth-child(even) { - margin-left: var(--wp--style--block-gap, 2em); + margin-left: var(--wp--style--block-gap--self, var(--wp--style--block-gap, 2em)); } } @@ -74,7 +74,7 @@ // When columns are in a single row, add space before all except the first. &:not(:first-child) { - margin-left: var(--wp--style--block-gap, 2em); + margin-left: var(--wp--style--block-gap--self, var(--wp--style--block-gap, 2em)); } } } @@ -95,7 +95,7 @@ // When columns are in a single row, add space before all except the first. &:not(:first-child) { - margin-left: var(--wp--style--block-gap, 2em); + margin-left: var(--wp--style--block-gap--self, var(--wp--style--block-gap, 2em)); } } } diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 674caea6af4c9..e1888b2ca0d3f 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -112,7 +112,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { value: [ 'typography', 'letterSpacing' ], support: [ 'typography', '__experimentalLetterSpacing' ], }, - '--wp--style--block-gap': { + '--wp--style--block-gap--self': { value: [ 'spacing', 'blockGap' ], support: [ 'spacing', 'blockGap' ], }, From 1634bab451d6e31a5e21312fd2187796fedbb580 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Fri, 19 Nov 2021 14:57:18 -0500 Subject: [PATCH 2/2] Navigation bock --- packages/block-library/src/navigation/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index a797b76b8a703..4da254e4c02c6 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -258,7 +258,7 @@ button.wp-block-navigation-item__content { .wp-block-navigation .wp-block-page-list, .wp-block-navigation__container, .wp-block-navigation__responsive-container-content { - gap: var(--wp--style--block-gap, 2em); + gap: var(--wp--style--block-gap--self, var(--wp--style--block-gap, 2em)); } // Menu items with background. @@ -269,7 +269,7 @@ button.wp-block-navigation-item__content { &, .wp-block-navigation .wp-block-page-list, .wp-block-navigation__container { - gap: var(--wp--style--block-gap, 0.5em); + gap: var(--wp--style--block-gap--self, var(--wp--style--block-gap, 0.5em)); } }