From aafb4fc24b263e3edb065c5c7793e2e33f003281 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 11 Nov 2019 11:59:18 +0000
Subject: [PATCH] Wrap items on selection to improve editing UX

Previously there were many issues with the editing experience and UI when allow for overflowing editing.

Experiment with allow items to wrap when the Block is selected.

See https://github.com/WordPress/gutenberg/pull/18336#issuecomment-551534767
---
 .../src/navigation-menu/editor.scss           | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/navigation-menu/editor.scss b/packages/block-library/src/navigation-menu/editor.scss
index 9db9223abd88d6..f956fd43445499 100644
--- a/packages/block-library/src/navigation-menu/editor.scss
+++ b/packages/block-library/src/navigation-menu/editor.scss
@@ -3,14 +3,30 @@
 // When that happens, leverage that instead of the following overrides.
 [data-type="core/navigation-menu"] {
 
-	// Allow overflowing items to scroll container
+	// State: "unselected" - allow overflowing items to scroll container
 	.wp-block-navigation-menu {
 		overflow-x: auto;
 	}
 
-	// Allow more space on RHS when scroll is present
-	.wp-block-navigation-menu.has-scroll-x .block-editor-block-list__layout {
-		padding-right: 25%;
+	// State: "selected" - wrap all items to allow for better editing UX
+	&.is-selected,
+	&.has-child-selected {
+
+		.wp-block-navigation-menu {
+			overflow: visible; // cancel "auto" above to ensure toolbars can display correctly
+		}
+
+		.wp-block-navigation-menu .block-editor-block-list__layout {
+			display: flex;
+			flex-wrap: wrap;
+
+			.wp-block {
+				display: flex;
+				flex: 1; // grow to own content width only
+				// margin-top: $block-padding*2;
+				// margin-bottom: $block-padding*2; // push wrapped items away from toolbars
+			}
+		}
 	}
 
 	// 1. Reset margins on immediate innerblocks container.