Use separate TreeGridItem for mover arrows

packages/block-editor/src/components/block-navigation/block.js

@@ -6,7 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __experimentalTreeGridCell as TreeGridCell } from '@wordpress/components';
+import {
+	__experimentalTreeGridCell as TreeGridCell,
+	__experimentalTreeGridItem as TreeGridItem,
+} from '@wordpress/components';
+
 import { moreVertical } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
 
@@ -96,27 +100,32 @@ export default function BlockNavigationBlock( {
 			</TreeGridCell>
 			{ hasRenderedMovers && (
 				<>
-					<TreeGridCell className={ moverCellClassName }>
-						{ ( { ref, tabIndex, onFocus } ) => (
-							<BlockMoverUpButton
-								__experimentalOrientation="vertical"
-								clientIds={ [ clientId ] }
-								ref={ ref }
-								tabIndex={ tabIndex }
-								onFocus={ onFocus }
-							/>
-						) }
-					</TreeGridCell>
-					<TreeGridCell className={ moverCellClassName }>
-						{ ( { ref, tabIndex, onFocus } ) => (
-							<BlockMoverDownButton
-								__experimentalOrientation="vertical"
-								clientIds={ [ clientId ] }
-								ref={ ref }
-								tabIndex={ tabIndex }
-								onFocus={ onFocus }
-							/>
-						) }
+					<TreeGridCell
+						className={ moverCellClassName }
+						withoutGridItem
+					>
+						<TreeGridItem>
+							{ ( { ref, tabIndex, onFocus } ) => (
+								<BlockMoverUpButton
+									__experimentalOrientation="vertical"
+									clientIds={ [ clientId ] }
+									ref={ ref }
+									tabIndex={ tabIndex }
+									onFocus={ onFocus }
+								/>
+							) }
+						</TreeGridItem>
+						<TreeGridItem>
+							{ ( { ref, tabIndex, onFocus } ) => (
+								<BlockMoverDownButton
+									__experimentalOrientation="vertical"
+									clientIds={ [ clientId ] }
+									ref={ ref }
+									tabIndex={ tabIndex }
+									onFocus={ onFocus }
+								/>
+							) }
+						</TreeGridItem>
 					</TreeGridCell>
 				</>
 			) }

packages/components/src/index.js

@@ -105,6 +105,7 @@ export {
 	default as __experimentalTreeGrid,
 	TreeGridRow as __experimentalTreeGridRow,
 	TreeGridCell as __experimentalTreeGridCell,
+	TreeGridItem as __experimentalTreeGridItem,
 } from './tree-grid';
 export { default as TreeSelect } from './tree-select';
 export { default as __experimentalUnitControl } from './unit-control';

packages/components/src/tree-grid/cell.js

@@ -1,12 +1,20 @@
 /**
  * Internal dependencies
  */
-import RovingTabIndexItem from './roving-tab-index-item';
+import TreeGridItem from './item';
 
-export default function TreeGridCell( { children, ...props } ) {
+export default function TreeGridCell( {
+	children,
+	withoutGridItem = false,
+	...props
+} ) {
 	return (
 		<td { ...props } role="gridcell">
-			<RovingTabIndexItem>{ children }</RovingTabIndexItem>
+			{ withoutGridItem ? (
+				children
+			) : (
+				<TreeGridItem>{ children }</TreeGridItem>
+			) }
 		</td>
 	);
 }

packages/components/src/tree-grid/index.js

@@ -160,3 +160,4 @@ export default function TreeGrid( { children, ...props } ) {
 
 export { default as TreeGridRow } from './row';
 export { default as TreeGridCell } from './cell';
+export { default as TreeGridItem } from './item';

packages/components/src/tree-grid/item.js

@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import RovingTabIndexItem from './roving-tab-index-item';
+
+export default function TreeGridItem( { children, ...props } ) {
+	return <RovingTabIndexItem { ...props }>{ children }</RovingTabIndexItem>;
+}