Fix navigation block menu alignment (#17630)

* align items * hiding all those appenders * hiding the child items until selection but tricky to reselect them * we require more props down here * reafactored to not expose a new public API
WordPress · Oct 1, 2019 · 2927ee7 · 2927ee7
1 parent f3e8ac1
commit 2927ee7
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 13 deletions.
diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js
@@ -6,6 +6,7 @@ import { invoke } from 'lodash';
 /**
  * WordPress dependencies
  */
+import { withSelect } from '@wordpress/data';
 import {
 	Dropdown,
 	ExternalLink,
@@ -37,6 +38,7 @@ function NavigationMenuItemEdit( {
 	attributes,
 	clientId,
 	isSelected,
+	isParentOfSelectedBlock,
 	setAttributes,
 } ) {
 	const plainTextRef = useRef( null );
@@ -138,13 +140,21 @@ function NavigationMenuItemEdit( {
 			</InspectorControls>
 			<div className="wp-block-navigation-menu-item">
 				{ content }
-				<InnerBlocks
-					allowedBlocks={ [ 'core/navigation-menu-item' ] }
-					renderAppender={ InnerBlocks.ButtonBlockAppender }
-				/>
+				{ ( isSelected || isParentOfSelectedBlock ) &&
+					<InnerBlocks
+						allowedBlocks={ [ 'core/navigation-menu-item' ] }
+					/>
+				}
 			</div>
 		</Fragment>
 	);
 }
 
-export default NavigationMenuItemEdit;
+export default withSelect( ( select, ownProps ) => {
+	const { hasSelectedInnerBlock } = select( 'core/block-editor' );
+	const { clientId } = ownProps;
+
+	return {
+		isParentOfSelectedBlock: hasSelectedInnerBlock( clientId, true ),
+	};
+} )( NavigationMenuItemEdit );
diff --git a/packages/block-library/src/navigation-menu-item/editor.scss b/packages/block-library/src/navigation-menu-item/editor.scss
@@ -1,13 +1,11 @@
+$menu-label-field-width: 140px;
+
 .wp-block-navigation-menu-item__edit-container {
 	display: grid;
 	grid-auto-columns: min-content;
 	grid-auto-flow: column;
 	align-items: center;
 	white-space: nowrap;
-}
-
-$menu-label-field-width: 140px;
-.wp-block-navigation-menu-item__edit-container {
 	border: 1px solid $light-gray-500;
 	// two pixes comes from two times one pixel border
 	width: $menu-label-field-width + $icon-button-size + 2px;

diff --git a/packages/block-library/src/navigation-menu/edit.js b/packages/block-library/src/navigation-menu/edit.js
@@ -53,7 +53,6 @@ function NavigationMenu( {
 			<div className="wp-block-navigation-menu">
 				<InnerBlocks
 					allowedBlocks={ [ 'core/navigation-menu-item' ] }
-					renderAppender={ InnerBlocks.ButtonBlockAppender }
 				/>
 			</div>
 		</Fragment>

diff --git a/packages/block-library/src/navigation-menu/editor.scss b/packages/block-library/src/navigation-menu/editor.scss
@@ -1,13 +1,18 @@
 .wp-block-navigation-menu .block-editor-block-list__layout,
 .wp-block-navigation-menu {
-	display: grid;
+	display: flex;
 	grid-auto-columns: min-content;
 	grid-auto-flow: column;
-	align-items: center;
+	align-items: top;
 	white-space: nowrap;
 }
 
 .wp-block-navigation-menu__inserter-content {
-	width: 350px;
 	padding: $grid-size-large;
 }
+
+.wp-block-navigation-menu-item {
+	.wp-block-navigation-menu-item {
+		margin-left: $grid-size-large;
+	}
+}