Move the menu to the same level as mover cells

WordPress · May 19, 2020 · cfd84f2 · cfd84f2
1 parent 691c486
commit cfd84f2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js
@@ -50,6 +50,10 @@ export default function BlockNavigationBlock( {
 	const {
 		__experimentalWithEllipsisMenu: withEllipsisMenu,
 	} = useBlockNavigationContext();
+	const ellipsisMenuClassName = classnames(
+		'block-editor-block-navigation-block__menu-cell',
+		{ 'is-visible': hasVisibleMovers }
+	);
 
 	return (
 		<BlockNavigationLeaf
@@ -85,10 +89,6 @@ export default function BlockNavigationBlock( {
 							level={ level }
 							{ ...props }
 						/>
-
-						{ withEllipsisMenu && level > 1 && (
-							<BlockSettingsMenu clientIds={ [ clientId ] } />
-						) }
 					</div>
 				) }
 			</TreeGridCell>
@@ -114,6 +114,17 @@ export default function BlockNavigationBlock( {
 					</TreeGridCell>
 				</>
 			) }
+
+			{ withEllipsisMenu && level > 1 && (
+				<TreeGridCell className={ ellipsisMenuClassName }>
+					{ ( props ) => (
+						<BlockSettingsMenu
+							clientIds={ [ clientId ] }
+							{ ...props }
+						/>
+					) }
+				</TreeGridCell>
+			) }
 		</BlockNavigationLeaf>
 	);
 }
diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
@@ -57,6 +57,7 @@ $tree-item-height: 36px;
 		border-radius: $border-width;
 	}
 
+	.block-editor-block-navigation-block__menu-cell,
 	.block-editor-block-navigation-block__mover-cell {
 		width: $button-size;
 		opacity: 0;
@@ -66,6 +67,10 @@ $tree-item-height: 36px;
 			opacity: 1;
 			@include edit-post__fade-in-animation;
 		}
+
+		.components-toolbar {
+			border: 0;
+		}
 	}
 
 	.block-editor-block-mover-button {
@@ -106,10 +111,6 @@ $tree-item-height: 36px;
 	.block-editor-block-navigation-block__contents-container,
 	.block-editor-block-navigation-appender__container {
 		display: flex;
-
-		.components-toolbar {
-			border: 0;
-		}
 	}
 
 	.block-editor-block-navigator-descender-line {