From c33a4cd2f862de3599476e31895ada6b1ba40bc6 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 1 Jun 2021 11:56:11 +0200
Subject: [PATCH] Use gap instead of margin.

---
 .../block-library/src/navigation/style.scss   | 27 +++++--------------
 1 file changed, 6 insertions(+), 21 deletions(-)

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 2d3671c847a6c8..895693ab955baa 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -221,19 +221,12 @@
 
 /**
  * Margins
- * @todo: refactor this to use gap.
  */
 
 // Menu items with no background.
-.wp-block-page-list,
-.wp-block-page-list > .wp-block-pages-list__item,
-.wp-block-navigation__container > .wp-block-navigation-link {
-	margin: 0 2em 0 0;
-
-	// Margin of right-most margin should be zero, for right aligned or justified items.
-	&:last-child {
-		margin-right: 0;
-	}
+.wp-block-navigation__container .wp-block-page-list,
+.wp-block-navigation__container {
+	gap: 0.5em 2em;
 }
 
 // Menu items with background.
@@ -241,15 +234,9 @@
 // That way if padding is set in theme.json, it still wins.
 // https://css-tricks.com/almanac/selectors/w/where/
 .wp-block-navigation:where(.has-background) {
-	.wp-block-page-list,
-	.wp-block-page-list > .wp-block-pages-list__item,
-	.wp-block-navigation__container > .wp-block-navigation-link {
-		margin: 0 0.5em 0 0;
-
-		// Don't show right margin on the last child.
-		&:last-child {
-			margin: 0;
-		}
+	.wp-block-navigation__container .wp-block-page-list,
+	.wp-block-navigation__container {
+		gap: 0 0.5em;
 	}
 }
 
@@ -341,7 +328,6 @@
 
 	// Vertical layout
 	.is-vertical & {
-		display: block;
 		flex-direction: column;
 		align-items: flex-start;
 	}
@@ -371,7 +357,6 @@
 
 	.wp-block-navigation-link,
 	.wp-block-pages-list__item {
-		margin-right: 0;
 		justify-content: flex-end;
 	}
 }