@@ -25,14 +25,22 @@ function BlockMover( {
2525 isBlockMoverUpButtonDisabled,
2626 isBlockMoverDownButtonDisabled,
2727} ) {
28- const { canMove, rootClientId, isFirst, isLast, orientation } = useSelect (
28+ const {
29+ canMove,
30+ rootClientId,
31+ isFirst,
32+ isLast,
33+ orientation,
34+ isManualGrid,
35+ } = useSelect (
2936 ( select ) => {
3037 const {
3138 getBlockIndex,
3239 getBlockListSettings,
3340 canMoveBlocks,
3441 getBlockOrder,
3542 getBlockRootClientId,
43+ getBlockAttributes,
3644 } = select ( blockEditorStore ) ;
3745 const normalizedClientIds = Array . isArray ( clientIds )
3846 ? clientIds
@@ -44,13 +52,17 @@ function BlockMover( {
4452 normalizedClientIds [ normalizedClientIds . length - 1 ]
4553 ) ;
4654 const blockOrder = getBlockOrder ( _rootClientId ) ;
55+ const { layout = { } } = getBlockAttributes ( _rootClientId ) ?? { } ;
4756
4857 return {
4958 canMove : canMoveBlocks ( clientIds , _rootClientId ) ,
5059 rootClientId : _rootClientId ,
5160 isFirst : firstIndex === 0 ,
5261 isLast : lastIndex === blockOrder . length - 1 ,
5362 orientation : getBlockListSettings ( _rootClientId ) ?. orientation ,
63+ // TODO: Doesn't feel great to couple BlockMover and grid layouts.
64+ // TODO: Can we use useLayout() instead?
65+ isManualGrid : layout . type === 'grid' && ! ! layout . columnCount ,
5466 } ;
5567 } ,
5668 [ clientIds ]
@@ -60,8 +72,6 @@ function BlockMover( {
6072 return null ;
6173 }
6274
63- const dragHandleLabel = __ ( 'Drag' ) ;
64-
6575 return (
6676 < ToolbarGroup
6777 className = { classnames ( 'block-editor-block-mover' , {
@@ -75,7 +85,7 @@ function BlockMover( {
7585 icon = { dragHandle }
7686 className = "block-editor-block-mover__drag-handle"
7787 aria-hidden = "true"
78- label = { dragHandleLabel }
88+ label = { __ ( 'Drag' ) }
7989 // Should not be able to tab to drag handle as this
8090 // button can only be used with a pointer device.
8191 tabIndex = "-1"
@@ -84,26 +94,28 @@ function BlockMover( {
8494 ) }
8595 </ BlockDraggable >
8696 ) }
87- < div className = "block-editor-block-mover__move-button-container" >
88- < ToolbarItem >
89- { ( itemProps ) => (
90- < BlockMoverUpButton
91- disabled = { isBlockMoverUpButtonDisabled }
92- clientIds = { clientIds }
93- { ...itemProps }
94- />
95- ) }
96- </ ToolbarItem >
97- < ToolbarItem >
98- { ( itemProps ) => (
99- < BlockMoverDownButton
100- disabled = { isBlockMoverDownButtonDisabled }
101- clientIds = { clientIds }
102- { ...itemProps }
103- />
104- ) }
105- </ ToolbarItem >
106- </ div >
97+ { ! isManualGrid && (
98+ < div className = "block-editor-block-mover__move-button-container" >
99+ < ToolbarItem >
100+ { ( itemProps ) => (
101+ < BlockMoverUpButton
102+ disabled = { isBlockMoverUpButtonDisabled }
103+ clientIds = { clientIds }
104+ { ...itemProps }
105+ />
106+ ) }
107+ </ ToolbarItem >
108+ < ToolbarItem >
109+ { ( itemProps ) => (
110+ < BlockMoverDownButton
111+ disabled = { isBlockMoverDownButtonDisabled }
112+ clientIds = { clientIds }
113+ { ...itemProps }
114+ />
115+ ) }
116+ </ ToolbarItem >
117+ </ div >
118+ ) }
107119 </ ToolbarGroup >
108120 ) ;
109121}
0 commit comments