Navigation Block: add block gap support (#35277)

* Initial commit. Here we're applying block gap support to the inner flex container surrounding nav items and page list items. The calculation is to (try to) maintain the original proportional differences between row and column gaps. * Setting the default to zero, as it was * Using shorthand styles Ensuring that spacing gap controls are shown by default in the otherwise empty Dimensions panel.
WordPress · Oct 19, 2021 · b1d8f7a · b1d8f7a
1 parent 9ad5a58
commit b1d8f7a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
@@ -96,6 +96,19 @@
 			"__experimentalTextTransform": true,
 			"__experimentalFontFamily": true,
 			"__experimentalTextDecoration": true
+		},
+		"spacing": {
+			"blockGap": true,
+			"units": [
+				"px",
+				"em",
+				"rem",
+				"vh",
+				"vw"
+			],
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
 		}
 	},
 	"viewScript": "file:./view.min.js",

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -229,7 +229,7 @@
 .wp-block-navigation,
 .wp-block-navigation .wp-block-page-list,
 .wp-block-navigation__container {
-	gap: 0.5em 2em;
+	gap: calc(var(--wp--style--block-gap, 2em) / 4) var(--wp--style--block-gap, 2em);
 }
 
 // Menu items with background.
@@ -240,7 +240,7 @@
 	&,
 	.wp-block-navigation .wp-block-page-list,
 	.wp-block-navigation__container {
-		gap: 0 0.5em;
+		gap: calc(var(--wp--style--block-gap, 0) / 4) var(--wp--style--block-gap, 0.5em);
 	}
 }