From 1424ce04055e172573637e405b05fc6aa9b7a608 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Tue, 14 Jul 2020 21:38:42 +0800
Subject: [PATCH] Fix drag and drop for aligned blocks (#23916)

* Fix drag and drop for aligned blocks

* Update the mock class list implementation to be more flexible

* Fix test
---
 .../components/use-block-drop-zone/index.js   |  4 ++--
 .../use-block-drop-zone/test/index.js         | 22 ++++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/packages/block-editor/src/components/use-block-drop-zone/index.js
index de3e130df3edf0..de20064ee3ac84 100644
--- a/packages/block-editor/src/components/use-block-drop-zone/index.js
+++ b/packages/block-editor/src/components/use-block-drop-zone/index.js
@@ -50,8 +50,8 @@ export function getNearestBlockIndex( elements, position, orientation ) {
 	let candidateDistance;
 
 	elements.forEach( ( element, index ) => {
-		// Ensure the element is a block. It should have the `data-block` attribute.
-		if ( ! element.dataset.block ) {
+		// Ensure the element is a block. It should have the `wp-block` class.
+		if ( ! element.classList.contains( 'wp-block' ) ) {
 			return;
 		}
 
diff --git a/packages/block-editor/src/components/use-block-drop-zone/test/index.js b/packages/block-editor/src/components/use-block-drop-zone/test/index.js
index ba95d4c7521ebf..c0aac7b5827d92 100644
--- a/packages/block-editor/src/components/use-block-drop-zone/test/index.js
+++ b/packages/block-editor/src/components/use-block-drop-zone/test/index.js
@@ -31,10 +31,10 @@ const elementData = [
 	},
 ];
 
-const createMockClassList = ( isDragging ) => {
+const createMockClassList = ( classes ) => {
 	return {
-		contains() {
-			return isDragging;
+		contains( textToMatch ) {
+			return classes.includes( textToMatch );
 		},
 	};
 };
@@ -60,7 +60,7 @@ const mapElements = ( orientation ) => (
 						right: bottom,
 				  };
 		},
-		classList: createMockClassList( false ),
+		classList: createMockClassList( 'wp-block' ),
 	};
 };
 
@@ -83,8 +83,10 @@ describe( 'getNearestBlockIndex', () => {
 		expect( result ).toBeUndefined();
 	} );
 
-	it( 'returns `undefined` if the elements do not have the `data-block` attribute', () => {
-		const nonBlockElements = [ { dataset: {} } ];
+	it( 'returns `undefined` if the elements do not have the `wp-block` class', () => {
+		const nonBlockElements = [
+			{ classList: createMockClassList( 'some-other-class' ) },
+		];
 		const position = { x: 0, y: 0 };
 		const orientation = 'horizontal';
 
@@ -208,14 +210,14 @@ describe( 'getNearestBlockIndex', () => {
 			expect( result ).toBe( 4 );
 		} );
 
-		it( 'skips the block being dragged', () => {
+		it( 'skips the block being dragged by checking for the `is-dragging` classname', () => {
 			const position = { x: 0, y: 450 };
 
 			const verticalElementsWithDraggedBlock = [
 				...verticalElements.slice( 0, 2 ),
 				{
 					...verticalElements[ 2 ],
-					classList: createMockClassList( true ),
+					classList: createMockClassList( 'wp-block is-dragging' ),
 				},
 				...verticalElements.slice( 3, 4 ),
 			];
@@ -341,14 +343,14 @@ describe( 'getNearestBlockIndex', () => {
 			expect( result ).toBe( 4 );
 		} );
 
-		it( 'skips the block being dragged', () => {
+		it( 'skips the block being dragged by checking for the `is-dragging` classname', () => {
 			const position = { x: 450, y: 0 };
 
 			const horizontalElementsWithDraggedBlock = [
 				...horizontalElements.slice( 0, 2 ),
 				{
 					...horizontalElements[ 2 ],
-					classList: createMockClassList( true ),
+					classList: createMockClassList( 'wp-block is-dragging' ),
 				},
 				...horizontalElements.slice( 3, 4 ),
 			];