From 69a1fd529175030b20deed87b6535c1c223ec335 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Mon, 8 Jun 2020 11:22:20 +0200
Subject: [PATCH] Use separate TreeGridItem for mover arrows

---
 .../src/components/block-navigation/block.js  | 53 +++++++++++--------
 packages/components/src/index.js              |  1 +
 packages/components/src/tree-grid/cell.js     | 14 +++--
 packages/components/src/tree-grid/index.js    |  1 +
 packages/components/src/tree-grid/item.js     |  8 +++
 5 files changed, 52 insertions(+), 25 deletions(-)
 create mode 100644 packages/components/src/tree-grid/item.js

diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js
index d98a69ee6fe57..8008d010cef40 100644
--- a/packages/block-editor/src/components/block-navigation/block.js
+++ b/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>
 				</>
 			) }
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 7149a87aa9624..7c1ec414adbae 100644
--- a/packages/components/src/index.js
+++ b/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';
diff --git a/packages/components/src/tree-grid/cell.js b/packages/components/src/tree-grid/cell.js
index a804af0d501b8..f0b881143dba6 100644
--- a/packages/components/src/tree-grid/cell.js
+++ b/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>
 	);
 }
diff --git a/packages/components/src/tree-grid/index.js b/packages/components/src/tree-grid/index.js
index 19d05a42bb527..8221efaac3366 100644
--- a/packages/components/src/tree-grid/index.js
+++ b/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';
diff --git a/packages/components/src/tree-grid/item.js b/packages/components/src/tree-grid/item.js
new file mode 100644
index 0000000000000..dd2eda288add3
--- /dev/null
+++ b/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>;
+}