From b1d8f7af02f3c3bb5949efb702d0f3dd215e1185 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Tue, 19 Oct 2021 13:24:03 +1100
Subject: [PATCH] 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.
---
 packages/block-library/src/navigation/block.json | 13 +++++++++++++
 packages/block-library/src/navigation/style.scss |  4 ++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index 2822b03081f024..bb447f9654c0c7 100644
--- 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
index 885ba803db15fe..b0911b054d784c 100644
--- 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);
 	}
 }