Fix incorrect drop indicator showing when two list views are open. Re…

…move duplicate ids
WordPress · Jul 13, 2021 · d1ab212 · d1ab212
1 parent a6bdb3f
commit d1ab212
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 11 deletions.
diff --git a/packages/block-editor/src/components/block-draggable/index.js b/packages/block-editor/src/components/block-draggable/index.js
@@ -19,7 +19,6 @@ const BlockDraggable = ( {
 	cloneClassname,
 	onDragStart,
 	onDragEnd,
-	elementId,
 } ) => {
 	const { srcRootClientId, isDraggable, icon } = useSelect(
 		( select ) => {
@@ -75,7 +74,6 @@ const BlockDraggable = ( {
 	return (
 		<Draggable
 			cloneClassname={ cloneClassname }
-			elementId={ elementId }
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
 			onDragStart={ ( event ) => {

diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js
@@ -60,10 +60,7 @@ const ListViewBlockContents = forwardRef(
 		} );
 
 		return (
-			<BlockDraggable
-				clientIds={ [ block.clientId ] }
-				elementId={ `list-view-block-${ block.clientId }` }
-			>
+			<BlockDraggable clientIds={ [ block.clientId ] }>
 				{ ( { draggable, onDragStart, onDragEnd } ) =>
 					__experimentalFeatures ? (
 						<ListViewBlockSlot

diff --git a/packages/block-editor/src/components/list-view/drop-indicator.js b/packages/block-editor/src/components/list-view/drop-indicator.js
@@ -15,21 +15,21 @@ export default function ListViewDropIndicator( {
 			return [];
 		}
 
-		const ownerDocument = listViewRef.current.ownerDocument;
-
 		// The rootClientId will be defined whenever dropping into inner
 		// block lists, but is undefined when dropping at the root level.
 		const _rootBlockElement = rootClientId
-			? ownerDocument.getElementById(
-					`list-view-block-${ rootClientId }`
+			? listViewRef.current.querySelector(
+					`[data-block="${ rootClientId }"]`
 			  )
 			: undefined;
 
 		// The clientId represents the sibling block, the dragged block will
 		// usually be inserted adjacent to it. It will be undefined when
 		// dropping a block into an empty block list.
 		const _blockElement = clientId
-			? ownerDocument.getElementById( `list-view-block-${ clientId }` )
+			? listViewRef.current.querySelector(
+					`[data-block="${ clientId }"]`
+			  )
 			: undefined;
 
 		return [ _rootBlockElement, _blockElement ];