Fix drag and drop indices when block list contains a style element (#…

…32776)

* Check for style elements

* Use wp-block classname

* Remove test that is no longer valid

packages/block-editor/src/components/use-block-drop-zone/index.js

@@ -43,11 +43,6 @@ export function getNearestBlockIndex( elements, position, orientation ) {
 	let candidateDistance;
 
 	elements.forEach( ( element, index ) => {
-		// Ensure the element is a block. It should have the `wp-block` class.
-		if ( ! element.classList.contains( 'wp-block' ) ) {
-			return;
-		}
-
 		const rect = element.getBoundingClientRect();
 		const [ distance, edge ] = getDistanceToNearestEdge(
 			position,
@@ -105,7 +100,10 @@ export default function useBlockDropZone( {
 	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex );
 	const throttled = useThrottle(
 		useCallback( ( event, currentTarget ) => {
-			const blockElements = Array.from( currentTarget.children );
+			const blockElements = Array.from( currentTarget.children ).filter(
+				// Ensure the element is a block. It should have the `wp-block` class.
+				( element ) => element.classList.contains( 'wp-block' )
+			);
 			const targetIndex = getNearestBlockIndex(
 				blockElements,
 				{ x: event.clientX, y: event.clientY },

packages/block-editor/src/components/use-block-drop-zone/test/index.js

@@ -83,22 +83,6 @@ describe( 'getNearestBlockIndex', () => {
 		expect( result ).toBeUndefined();
 	} );
 
-	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';
-
-		const result = getNearestBlockIndex(
-			nonBlockElements,
-			position,
-			orientation
-		);
-
-		expect( result ).toBeUndefined();
-	} );
-
 	describe( 'Vertical block lists', () => {
 		const orientation = 'vertical';