List View: Try a slightly more accurate and flexible approach for dra…

…g to top and bottom
WordPress · May 18, 2023 · 5d39f49 · 5d39f49
1 parent 671d727
commit 5d39f49
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -59,6 +64,7 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {Object}         props                         Components props.
  * @param {string}         props.id                      An HTML element id for the root element of ListView.
  * @param {Array}          props.blocks                  _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {?string}        props.className               Optional class name to add to the TreeGrid element.
  * @param {?boolean}       props.showBlockMovers         Flag to enable block movers. Defaults to `false`.
  * @param {?boolean}       props.isExpanded              Flag to determine whether nested levels are expanded by default. Defaults to `false`.
  * @param {?boolean}       props.showAppender            Flag to show or hide the block appender. Defaults to `false`.
@@ -73,6 +79,7 @@ function ListViewComponent(
 	{
 		id,
 		blocks,
+		className,
 		showBlockMovers = false,
 		isExpanded = false,
 		showAppender = false,
@@ -237,7 +244,10 @@ function ListViewComponent(
 			/>
 			<TreeGrid
 				id={ id }
-				className="block-editor-list-view-tree"
+				className={ classNames(
+					'block-editor-list-view-tree',
+					className
+				) }
 				aria-label={ __( 'Block navigation structure' ) }
 				ref={ treeGridRef }
 				onCollapseRow={ collapseRow }

diff --git a/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js b/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js
@@ -378,7 +378,12 @@ export default function useListViewDropZone() {
 	const draggedBlockClientIds = getDraggedBlockClientIds();
 	const throttled = useThrottle(
 		useCallback(
-			( event, currentTarget ) => {
+			( event, currentTarget, action ) => {
+				if ( action === 'clear' ) {
+					setTarget( null );
+					return;
+				}
+
 				const position = { x: event.clientX, y: event.clientY };
 				const isBlockDrag = !! draggedBlockClientIds?.length;
 
@@ -433,6 +438,9 @@ export default function useListViewDropZone() {
 
 	const ref = useDropZone( {
 		onDrop: onBlockDrop,
+		onDragLeave( event ) {
+			throttled( event, event.currentTarget, 'clear' );
+		},
 		onDragOver( event ) {
 			// `currentTarget` is only available while the event is being
 			// handled, so get it now and pass it to the thottled function.

diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
@@ -152,7 +152,7 @@ export default function ListViewSidebar() {
 			>
 				{ tab === 'list-view' && (
 					<div className="edit-post-editor__list-view-panel-content">
-						<ListView />
+						<ListView className="edit-post-editor__list-view-panel-content__list-view" />
 					</div>
 				) }
 				{ tab === 'outline' && <ListViewOutline /> }

diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss
@@ -83,6 +83,18 @@
 	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
 }
 
+.edit-post-editor__list-view-panel-content {
+	padding: 0;
+}
+
+.edit-post-editor__list-view-panel-content__list-view {
+	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
+	// Override the border collapse set by the TreeGrid table.
+	// This is so that the panel's height and padding can take effect.
+	border-collapse: separate;
+	border-spacing: 0;
+}
+
 .edit-post-editor__list-view-empty-headings {
 	& > svg {
 		margin-top: $grid-unit-30 + $grid-unit-05;