Navigation: Use gap instead of margin. (#32367)

* Use gap instead of margin.

* Unset classic margins.

* Address feedback.

packages/block-library/src/navigation/editor.scss

@@ -11,6 +11,13 @@
 		margin-left: 0;
 		padding-left: 0;
 	}
+
+	// Revert any left/right margins.
+	// This also makes it work with classic theme auto margins.
+	.wp-block-navigation-item.wp-block {
+		margin-left: revert;
+		margin-right: revert;
+	}
 }
 
 // This element is inline on the frontend but needs to be editable, therefore inline-block, in the editor.

packages/block-library/src/navigation/style.scss

@@ -208,35 +208,22 @@
 
 /**
  * Margins
- * @todo: refactor this to use gap.
  */
 
 // Menu items with no background.
-.wp-block-page-list,
-.wp-block-page-list > .wp-block-navigation-item,
-.wp-block-navigation__container > .wp-block-navigation-item {
-	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 .wp-block-page-list,
+.wp-block-navigation__container {
+	gap: 0.5em 2em;
 }
 
 // Menu items with background.
 // We use :where to keep specificity minimal, yet still scope it to only the navigation block.
 // 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-navigation-item,
-	.wp-block-navigation__container > .wp-block-navigation-item {
-		margin: 0 0.5em 0 0;
-
-		// Don't show right margin on the last child.
-		&:last-child {
-			margin: 0;
-		}
+	.wp-block-navigation .wp-block-page-list,
+	.wp-block-navigation__container {
+		gap: 0 0.5em;
 	}
 }
 
@@ -357,7 +344,6 @@
 	align-items: flex-end;
 
 	.wp-block-navigation-item {
-		margin-right: 0;
 		justify-content: flex-end;
 	}
 }