reflect gutter options in editor

Author: tschortsch

readme.txt

@@ -143,6 +143,12 @@ Please create a new GitHub issue and let us know: [https://github.com/liip/boots
 
 == Changelog ==
 
+= 4.2.0 =
+
+* [FEATURE] Reflect noGutters and horizontalGutters options visually in editor  (WordPress >= 5.4).
+* [FIX] Add missing "Medium" size to vertical gutter options.
+* [FIX] Fix label of default css grid gutter option ("Medium" instead of "None").
+
 = 4.1.0 =
 
 * [COMPATIBILITY] Tested up to WordPress 6.0.

src/row/block.js

@@ -40,6 +40,8 @@ registerBlockType( 'wp-bootstrap-blocks/row', {
 			'data-alignment': attributes.alignment,
 			'data-vertical-alignment': attributes.verticalAlignment,
 			'data-editor-stack-columns': attributes.editorStackColumns,
+			'data-no-gutters': attributes.noGutters,
+			'data-horizontal-gutters': attributes.horizontalGutters,
 		};
 	},
 

src/row/edit.js

@@ -218,7 +218,7 @@ horizontalGuttersOptions = applyFilters(
 
 horizontalGuttersOptions = [
 	{
-		label: __( 'Bootstrap Default', 'wp-bootstrap-blocks' ),
+		label: __( 'Bootstrap Default (Medium)', 'wp-bootstrap-blocks' ),
 		value: '',
 	},
 	...horizontalGuttersOptions,
@@ -229,6 +229,10 @@ let verticalGuttersOptions = [
 		label: __( 'Small', 'wp-bootstrap-blocks' ),
 		value: 'gy-3',
 	},
+	{
+		label: __( 'Medium', 'wp-bootstrap-blocks' ),
+		value: 'gy-4',
+	},
 	{
 		label: __( 'Large', 'wp-bootstrap-blocks' ),
 		value: 'gy-5',
@@ -264,7 +268,7 @@ cssGridGuttersOptions = applyFilters(
 
 cssGridGuttersOptions = [
 	{
-		label: __( 'Bootstrap Default (None)', 'wp-bootstrap-blocks' ),
+		label: __( 'Bootstrap Default (Medium)', 'wp-bootstrap-blocks' ),
 		value: '',
 	},
 	...cssGridGuttersOptions,

src/row/editor.scss

@@ -106,7 +106,7 @@
 }
 
 // Fix column padding in WordPress >= 5.4 (block-editor-xy classes only exist in WordPress >= 5.2)
-body:not(.branch-5-2):not(.branch-5-3) [data-type="wp-bootstrap-blocks/row"]:not([data-editor-stack-columns="true"]) .wp-block-wp-bootstrap-blocks-row {
+body:not(.branch-5-2):not(.branch-5-3) [data-type="wp-bootstrap-blocks/row"]:not([data-editor-stack-columns="true"]):not([data-no-gutters="true"]):not([data-horizontal-gutters="gx-0"]) .wp-block-wp-bootstrap-blocks-row {
 	@include break-small() {
 		> .block-editor-inner-blocks > .block-editor-block-list__layout {
 			> [data-type="wp-bootstrap-blocks/column"] {