Try using a user-specific variable for gap

WordPress · Nov 19, 2021 · c213808 · c213808
1 parent 914c9c9
commit c213808
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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' ],
 	},