Fix to flex items to resonable widths and avoid layout reflows

WordPress · Nov 14, 2019 · 45feeba · 45feeba
1 parent 5465de3
commit 45feeba
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/packages/block-library/src/navigation-menu-item/editor.scss b/packages/block-library/src/navigation-menu-item/editor.scss
@@ -10,17 +10,17 @@
 
 .wp-block-navigation-menu-item {
 	margin-right: $grid-size;
-
-	.block-editor-block-list__layout {
-		display: block;
-		margin: $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 {
@@ -32,6 +32,20 @@
 	}
 }
 
+[data-type="core/navigation-menu-item"] {
+
+	// Take mover out of flow to avoid layout jump on Block select
+	.block-editor-block-mover {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+	}
+
+	.block-editor-block-toolbar {
+		left: 15px;
+	}
+}
+
 .wp-block-navigation-menu-item__edit-container {
 	display: flex;
 	white-space: nowrap;

diff --git a/packages/block-library/src/navigation-menu/editor.scss b/packages/block-library/src/navigation-menu/editor.scss
@@ -6,10 +6,13 @@
 	.wp-block-navigation-menu .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-menu .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
+		display: flex;
+		flex: 1;
 		width: auto;
 		padding-left: 0;
 		padding-right: 0;
@@ -29,6 +32,11 @@
 		margin-bottom: 0;
 	}
 
+	.wp-block-navigation-menu .block-editor-block-list__block-edit::before {
+		left: 0;
+		right: 0;
+	}
+
 	// Remove the dashed outlines for child blocks.
 	&.is-hovered .wp-block-navigation-menu .block-editor-block-list__block-edit::before,
 	&.is-selected .wp-block-navigation-menu .block-editor-block-list__block-edit::before,