ListView: Try showing blocks that are dragged (no longer hide them) (#…

…51724) * ListView: Try showing blocks that are dragged, but with lower opacity * Fix hover styling issue * Ensure we only override hover styles * Ensure the hover override only affects non-selected blocks * Re-instate opacity rule * Fix issue with drop indicator in nested dragged blocks * Remove opacity rule
WordPress · Jun 23, 2023 · 96150d5 · 96150d5
1 parent 5fa3f81
commit 96150d5
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
@@ -91,6 +91,7 @@ function ListViewBranch( props ) {
 		selectedClientIds,
 		level = 1,
 		path = '',
+		isBranchDragged = false,
 		isBranchSelected = false,
 		listPosition = 0,
 		fixedListWindow,
@@ -167,7 +168,8 @@ function ListViewBranch( props ) {
 				);
 				const isSelectedBranch =
 					isBranchSelected || ( isSelected && hasNestedBlocks );
-				const showBlock = isDragged || blockInView || isSelected;
+				const showBlock =
+					isDragged || blockInView || isSelected || isBranchDragged;
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						{ showBlock && (
@@ -176,7 +178,7 @@ function ListViewBranch( props ) {
 								selectBlock={ selectBlock }
 								isSelected={ isSelected }
 								isBranchSelected={ isSelectedBranch }
-								isDragged={ isDragged }
+								isDragged={ isDragged || isBranchDragged }
 								level={ level }
 								position={ position }
 								rowCount={ rowCount }
@@ -194,7 +196,7 @@ function ListViewBranch( props ) {
 								<td className="block-editor-list-view-placeholder" />
 							</tr>
 						) }
-						{ hasNestedBlocks && shouldExpand && ! isDragged && (
+						{ hasNestedBlocks && shouldExpand && (
 							<ListViewBranch
 								parentId={ clientId }
 								blocks={ innerBlocks }
@@ -205,6 +207,7 @@ function ListViewBranch( props ) {
 								listPosition={ nextPosition + 1 }
 								fixedListWindow={ fixedListWindow }
 								isBranchSelected={ isSelectedBranch }
+								isBranchDragged={ isDragged || isBranchDragged }
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
 								isSyncedBranch={ syncedBranch }

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
@@ -27,6 +27,17 @@
 		}
 	}
 
+	&:not(.is-selected) .block-editor-list-view-block-select-button {
+		// While components are being dragged, ensure that hover styles are not applied.
+		// This resolves a bug where while dragging, the hover styles would be applied to
+		// the wrong list item while scrolling long lists, particularly in Chrome.
+		.is-dragging-components-draggable & {
+			&:hover {
+				color: inherit;
+			}
+		}
+	}
+
 	// The background has to be applied to the td, not tr, or border-radius won't work.
 	&.is-selected td {
 		background: var(--wp-admin-theme-color);
@@ -51,13 +62,6 @@
 	&.is-selected .components-button.has-icon {
 		color: $white;
 	}
-	&.is-selected .block-editor-list-view-block-contents {
-		// Hide selection styles while a user is dragging blocks/files etc.
-		.is-dragging-components-draggable & {
-			background: none;
-			color: $gray-900;
-		}
-	}
 	&.is-selected .block-editor-list-view-block-contents:focus {
 		&::after {
 			box-shadow:
@@ -76,10 +80,6 @@
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
 	}
 
-	&.is-dragging {
-		display: none;
-	}
-
 	// Border radius for corners of the selected item.
 	&.is-first-selected td:first-child {
 		border-top-left-radius: $radius-block-ui;

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
@@ -434,6 +434,8 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 				const blocksData = blockElements.map( ( blockElement ) => {
 					const clientId = blockElement.dataset.block;
 					const isExpanded = blockElement.dataset.expanded === 'true';
+					const isDraggedBlock =
+						blockElement.classList.contains( 'is-dragging' );
 
 					// Get nesting level from `aria-level` attribute because Firefox does not support `element.ariaLevel`.
 					const nestingLevel = parseInt(
@@ -449,9 +451,7 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 						blockIndex: getBlockIndex( clientId ),
 						element: blockElement,
 						nestingLevel: nestingLevel || undefined,
-						isDraggedBlock: isBlockDrag
-							? draggedBlockClientIds.includes( clientId )
-							: false,
+						isDraggedBlock: isBlockDrag ? isDraggedBlock : false,
 						innerBlockCount: getBlockCount( clientId ),
 						canInsertDraggedBlocksAsSibling: isBlockDrag
 							? canInsertBlocks(