Fix Nav Menu overflow using flex-wrap approach (#18431)

* Use flexbox to allow Nav items to wrap when they overflow. * Fix to flex items to reasonable widths and avoid layout reflows. * Reduce horizontal space occupied by Nav Items to improve editing flow and visual layout.
WordPress · Dec 3, 2019 · 7e6c932 · 7e6c932
1 parent a06542d
commit 7e6c932
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
@@ -40,11 +40,33 @@
 }
 
 .wp-block-navigation-link {
+	margin-right: $grid-size;
+	// Provide a base menu item margin.
+	// This should be the same inside the field,
+	// and the edit container should compensate.
+	// This is to make sure the edit and view are the same.
+	padding: 0 $grid-size;
+	padding-right: 55px; // allow space for Block "mover"
+
+	.block-editor-block-list__layout {
+		display: block;
+		margin: $grid-size;
+	}
+
+	// Only display inner blocks when the block is being edited.
+	.block-editor-inner-blocks {
+		display: none;
+	}
+
 	&.is-editing,
 	&.is-selected {
 		min-width: 20px;
 	}
 
+	&.is-editing .block-editor-inner-blocks {
+		display: block;
+	}
+
 	&.has-link .wp-block-navigation-link__content {
 		border-bottom-style: solid;
 		border-bottom-width: 1px;
@@ -55,6 +77,12 @@
 	}
 }
 
+[data-type="core/navigation-link"] {
+	.block-editor-block-toolbar {
+		left: 15px;
+	}
+}
+
 .wp-block-navigation-link__nofollow-external-link {
 	display: block;
 }

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -6,14 +6,17 @@
 	.wp-block-navigation .block-editor-inner-blocks > .block-editor-block-list__layout {
 		margin-left: 0;
 		margin-right: 0;
+
 	}
 
 	// 2. Remove paddings on subsequent immediate children.
 	.wp-block-navigation .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
 		width: auto;
 		padding-left: 0;
 		padding-right: 0;
-		margin-left: 0; // something
+		margin-left: 0;
+		margin-right: 0;
+		margin-bottom: 1em; // Useful for when items wrap.
 	}
 
 	// 3. Remove margins on subsequent Edit container.
@@ -28,6 +31,11 @@
 		margin-bottom: 0;
 	}
 
+	.wp-block-navigation .block-editor-block-list__block-edit::before {
+		left: 0;
+		right: 0;
+	}
+
 	// Remove the dashed outlines for child blocks.
 	&.is-hovered .wp-block-navigation .block-editor-block-list__block-edit::before,
 	&.is-selected .wp-block-navigation .block-editor-block-list__block-edit::before,
@@ -57,7 +65,7 @@
 .wp-block-navigation .block-editor-block-list__layout,
 .wp-block-navigation {
 	display: flex;
-	white-space: nowrap;
+	flex-wrap: wrap;
 }
 
 .wp-block-navigation__inserter-content {