Adjust block selection button (#60348)

* adds drag button to zoom out, rearranges buttons, removes block name in zoom out * remove double block mover
WordPress · Apr 3, 2024 · 68bd62a · 68bd62a
1 parent 7f868d4
commit 68bd62a
Showing 1 changed file with 51 additions and 42 deletions.
diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
@@ -281,6 +281,9 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 	);
 
 	const dragHandleLabel = __( 'Drag' );
+	const showBlockDraggable =
+		( canMove && editorMode === 'navigation' ) ||
+		( editorMode === 'zoom-out' && canMove && ! isBlockTemplatePart );
 
 	return (
 		<div className={ classNames }>
@@ -291,20 +294,8 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				<FlexItem>
 					<BlockIcon icon={ icon } showColors />
 				</FlexItem>
-				<FlexItem>
-					{ editorMode === 'zoom-out' && ! isBlockTemplatePart && (
-						<BlockMover
-							clientIds={ [ clientId ] }
-							hideDragHandle
-							isBlockMoverUpButtonDisabled={
-								isPrevBlockTemplatePart
-							}
-							isBlockMoverDownButtonDisabled={
-								isNextBlockTemplatePart
-							}
-						/>
-					) }
-					{ editorMode === 'navigation' && (
+				{ showBlockDraggable && (
+					<FlexItem>
 						<BlockDraggable clientIds={ [ clientId ] }>
 							{ ( draggableProps ) => (
 								<Button
@@ -319,41 +310,59 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 								/>
 							) }
 						</BlockDraggable>
-					) }
-				</FlexItem>
+					</FlexItem>
+				) }
+				{ editorMode === 'zoom-out' && ! isBlockTemplatePart && (
+					<FlexItem>
+						<BlockMover
+							clientIds={ [ clientId ] }
+							hideDragHandle
+							isBlockMoverUpButtonDisabled={
+								isPrevBlockTemplatePart
+							}
+							isBlockMoverDownButtonDisabled={
+								isNextBlockTemplatePart
+							}
+						/>
+					</FlexItem>
+				) }
 				{ canMove && canRemove && editorMode === 'zoom-out' && (
 					<Shuffle clientId={ clientId } as={ Button } />
 				) }
 				{ canRemove &&
 					editorMode === 'zoom-out' &&
 					! isBlockTemplatePart && (
-						<ToolbarButton
-							icon={ trash }
-							label="Delete"
-							onClick={ () => {
-								removeBlock( clientId );
-							} }
-						/>
+						<FlexItem>
+							<ToolbarButton
+								icon={ trash }
+								label="Delete"
+								onClick={ () => {
+									removeBlock( clientId );
+								} }
+							/>
+						</FlexItem>
 					) }
-				<FlexItem>
-					<Button
-						ref={ ref }
-						onClick={
-							editorMode === 'navigation'
-								? () => setNavigationMode( false )
-								: undefined
-						}
-						onKeyDown={ onKeyDown }
-						label={ label }
-						showTooltip={ false }
-						className="block-selection-button_select-button"
-					>
-						<BlockTitle
-							clientId={ clientId }
-							maximumLength={ 35 }
-						/>
-					</Button>
-				</FlexItem>
+				{ editorMode === 'navigation' && (
+					<FlexItem>
+						<Button
+							ref={ ref }
+							onClick={
+								editorMode === 'navigation'
+									? () => setNavigationMode( false )
+									: undefined
+							}
+							onKeyDown={ onKeyDown }
+							label={ label }
+							showTooltip={ false }
+							className="block-selection-button_select-button"
+						>
+							<BlockTitle
+								clientId={ clientId }
+								maximumLength={ 35 }
+							/>
+						</Button>
+					</FlexItem>
+				) }
 			</Flex>
 		</div>
 	);