drop block movers into block edit to enable inline movers

WordPress · Sep 26, 2019 · 7656896 · 7656896
1 parent 1a21b68
commit 7656896
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 15 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -403,7 +403,8 @@ function BlockListBlock( {
 		isSelected &&
 		! showEmptyBlockSideInserter &&
 		! isPartOfMultiSelection &&
-		! isTypingWithinBlock;
+		! isTypingWithinBlock &&
+		! horizontalMover;
 	const shouldShowBreadcrumb =
 		( isSelected && isNavigationMode ) ||
 		( ! isNavigationMode && ! isFocusMode && isHovered && ! isEmptyDefaultBlock );
@@ -451,6 +452,20 @@ function BlockListBlock( {
 		};
 	}
 	const blockElementId = `block-${ clientId }`;
+	const blockMover = (
+		<BlockMover
+			clientIds={ clientId }
+			blockElementId={ blockElementId }
+			isHidden={ ! isSelected }
+			isDraggable={
+				isDraggable !== false &&
+				( ! isPartOfMultiSelection && isMovable )
+			}
+			onDragStart={ onDragStart }
+			onDragEnd={ onDragEnd }
+			horizontalMover={ horizontalMover }
+		/>
+	);
 
 	// We wrap the BlockEdit component in a div that hides it when editing in
 	// HTML mode. This allows us to render all of the ancillary pieces
@@ -468,6 +483,7 @@ function BlockListBlock( {
 			clientId={ clientId }
 			isSelectionEnabled={ isSelectionEnabled }
 			toggleSelection={ toggleSelection }
+			blockMover={ horizontalMover ? blockMover : null }
 		/>
 	);
 	if ( mode !== 'visual' ) {
@@ -518,20 +534,7 @@ function BlockListBlock( {
 				/>
 			) }
 			<div className="editor-block-list__block-edit block-editor-block-list__block-edit">
-				{ shouldRenderMovers && (
-					<BlockMover
-						clientIds={ clientId }
-						blockElementId={ blockElementId }
-						isHidden={ ! isSelected }
-						isDraggable={
-							isDraggable !== false &&
-							( ! isPartOfMultiSelection && isMovable )
-						}
-						onDragStart={ onDragStart }
-						onDragEnd={ onDragEnd }
-						horizontalMover={ horizontalMover }
-					/>
-				) }
+				{ shouldRenderMovers && blockMover }
 				{ shouldShowBreadcrumb && (
 					<BlockBreadcrumb
 						clientId={ clientId }

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
@@ -1,5 +1,17 @@
 .block-editor-block-mover {
 
+	&.is-horizontal {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		width: auto;
+		min-height: auto;
+
+		.block-editor-block-mover__control-drag-handle {
+			display: none;
+		}
+
+	}
+
 	@include break-small() {
 		min-height: $empty-paragraph-height;
 		opacity: 0;

diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js
@@ -38,6 +38,7 @@ function NavigationMenuItemEdit( {
 	clientId,
 	isSelected,
 	setAttributes,
+	blockMover,
 } ) {
 	const plainTextRef = useRef( null );
 	const onEditLableClicked = useCallback(
@@ -59,6 +60,7 @@ function NavigationMenuItemEdit( {
 					aria-label={ __( 'Navigation Label' ) }
 					maxRows={ 1 }
 				/>
+				{ blockMover }
 				<Dropdown
 					contentClassName="wp-block-navigation-menu-item__dropdown-content"
 					position="bottom left"