From dc20d69ae2ccea45795bdf3614da0badc6dd8c0d Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Tue, 26 Nov 2024 12:11:19 +0100
Subject: [PATCH 01/10] Revert "Fix media placeholder to only activate for
 media objects. (#66986)"

This reverts commit 2e4b8d8a0593f3791fb580d127c51a9f334bf59d.
---
 .../src/components/inserter-draggable-blocks/index.js | 11 +----------
 .../src/components/media-placeholder/index.js         | 10 +++++-----
 test/e2e/specs/editor/blocks/image.spec.js            |  2 +-
 3 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
index 0e1aaadc72e67b..5a63535be3d3ce 100644
--- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js
+++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
@@ -29,15 +29,6 @@ const InserterDraggableBlocks = ( {
 		blocks,
 	};
 
-	const blocksContainMedia =
-		blocks.filter(
-			( block ) =>
-				( block.name === 'core/image' ||
-					block.name === 'core/audio' ||
-					block.name === 'core/video' ) &&
-				( block.attributes.url || block.attributes.src )
-		).length > 0;
-
 	const blockTypeIcon = useSelect(
 		( select ) => {
 			const { getBlockType } = select( blocksStore );
@@ -72,7 +63,7 @@ const InserterDraggableBlocks = ( {
 						? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 						: blocks;
 				event.dataTransfer.setData(
-					blocksContainMedia ? 'default' : 'text/html',
+					'text/html',
 					serialize( parsedBlocks )
 				);
 			} }
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index e7b6c836468f02..df0cd1e895c03b 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -292,10 +292,8 @@ export function MediaPlaceholder( {
 		}
 	}
 
-	async function onDrop( event ) {
-		const blocks = pasteHandler( {
-			HTML: event.dataTransfer?.getData( 'default' ),
-		} );
+	async function onHTMLDrop( HTML ) {
+		const blocks = pasteHandler( { HTML } );
 		return await handleBlocksDrop( blocks );
 	}
 
@@ -385,7 +383,9 @@ export function MediaPlaceholder( {
 			return null;
 		}
 
-		return <DropZone onFilesDrop={ onFilesUpload } onDrop={ onDrop } />;
+		return (
+			<DropZone onFilesDrop={ onFilesUpload } onHTMLDrop={ onHTMLDrop } />
+		);
 	};
 
 	const renderCancelLink = () => {
diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index b2195f2c676885..6110a125ff6f7e 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -545,7 +545,7 @@ test.describe( 'Image', () => {
 			dummy.style.left = 0;
 			dummy.draggable = 'true';
 			dummy.addEventListener( 'dragstart', ( event ) => {
-				event.dataTransfer.setData( 'default', _html );
+				event.dataTransfer.setData( 'text/html', _html );
 				setTimeout( () => {
 					dummy.remove();
 				}, 0 );

From 1b6676219a8e2ffe62f8536f65084b95dd3704a8 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Tue, 26 Nov 2024 14:56:52 +0100
Subject: [PATCH 02/10] Remove html transfer

---
 .../inserter-draggable-blocks/index.js        | 30 ++++++-------------
 .../src/components/media-placeholder/index.js | 14 ++++-----
 2 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
index 5a63535be3d3ce..62f771b81daf7f 100644
--- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js
+++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { Draggable } from '@wordpress/components';
-import {
-	createBlock,
-	serialize,
-	store as blocksStore,
-} from '@wordpress/blocks';
+import { createBlock, store as blocksStore } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
@@ -24,11 +20,6 @@ const InserterDraggableBlocks = ( {
 	children,
 	pattern,
 } ) => {
-	const transferData = {
-		type: 'inserter',
-		blocks,
-	};
-
 	const blockTypeIcon = useSelect(
 		( select ) => {
 			const { getBlockType } = select( blocksStore );
@@ -51,21 +42,18 @@ const InserterDraggableBlocks = ( {
 		} );
 	}
 
+	const parsedBlocks =
+		pattern?.type === INSERTER_PATTERN_TYPES.user &&
+		pattern?.syncStatus !== 'unsynced'
+			? [ createBlock( 'core/block', { ref: pattern.id } ) ]
+			: blocks;
+
 	return (
 		<Draggable
 			__experimentalTransferDataType="wp-blocks"
-			transferData={ transferData }
-			onDragStart={ ( event ) => {
+			transferData={ { type: 'inserter', blocks: parsedBlocks } }
+			onDragStart={ () => {
 				startDragging();
-				const parsedBlocks =
-					pattern?.type === INSERTER_PATTERN_TYPES.user &&
-					pattern?.syncStatus !== 'unsynced'
-						? [ createBlock( 'core/block', { ref: pattern.id } ) ]
-						: blocks;
-				event.dataTransfer.setData(
-					'text/html',
-					serialize( parsedBlocks )
-				);
 			} }
 			onDragEnd={ () => {
 				stopDragging();
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index df0cd1e895c03b..7bf45272f86645 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -19,7 +19,6 @@ import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { keyboardReturn } from '@wordpress/icons';
-import { pasteHandler } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
 
 /**
@@ -29,6 +28,7 @@ import MediaUpload from '../media-upload';
 import MediaUploadCheck from '../media-upload/check';
 import URLPopover from '../url-popover';
 import { store as blockEditorStore } from '../../store';
+import { parseDropEvent } from '../use-on-block-drop';
 
 const noop = () => {};
 
@@ -292,9 +292,11 @@ export function MediaPlaceholder( {
 		}
 	}
 
-	async function onHTMLDrop( HTML ) {
-		const blocks = pasteHandler( { HTML } );
-		return await handleBlocksDrop( blocks );
+	function onDrop( event ) {
+		const { blocks } = parseDropEvent( event );
+		if ( blocks ) {
+			handleBlocksDrop( blocks );
+		}
 	}
 
 	const onUpload = ( event ) => {
@@ -383,9 +385,7 @@ export function MediaPlaceholder( {
 			return null;
 		}
 
-		return (
-			<DropZone onFilesDrop={ onFilesUpload } onHTMLDrop={ onHTMLDrop } />
-		);
+		return <DropZone onFilesDrop={ onFilesUpload } onDrop={ onDrop } />;
 	};
 
 	const renderCancelLink = () => {

From 83c7b3cfefb46b75110a88d43d6bca5394b31e1e Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Tue, 26 Nov 2024 15:09:45 +0100
Subject: [PATCH 03/10] Add block types to data transfer

---
 .../inserter-draggable-blocks/index.js        | 13 +++++-
 .../src/components/media-placeholder/index.js | 28 +++++++++++-
 packages/components/src/drop-zone/index.tsx   | 44 +++++++++----------
 packages/components/src/drop-zone/types.ts    |  5 +++
 4 files changed, 64 insertions(+), 26 deletions(-)

diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
index 62f771b81daf7f..34282efd9ed511 100644
--- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js
+++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
@@ -50,10 +50,21 @@ const InserterDraggableBlocks = ( {
 
 	return (
 		<Draggable
+			// To do: remove in favour of `wp-block:*` items.
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ { type: 'inserter', blocks: parsedBlocks } }
-			onDragStart={ () => {
+			onDragStart={ ( event ) => {
+				if ( ! event.dataTransfer ) {
+					return;
+				}
 				startDragging();
+
+				for ( const block of parsedBlocks ) {
+					event.dataTransfer.items.add(
+						JSON.stringify( block ),
+						`wp-block:${ block.name }`
+					);
+				}
 			} }
 			onDragEnd={ () => {
 				stopDragging();
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index 7bf45272f86645..40cc038f236dd8 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -385,7 +385,33 @@ export function MediaPlaceholder( {
 			return null;
 		}
 
-		return <DropZone onFilesDrop={ onFilesUpload } onDrop={ onDrop } />;
+		return (
+			<DropZone
+				onFilesDrop={ onFilesUpload }
+				onDrop={ onDrop }
+				isEligible={ ( dataTransfer ) => {
+					const types = dataTransfer.types.filter( ( type ) =>
+						type.startsWith( 'wp-block:' )
+					);
+					const typeMap = {
+						image: 'wp-block:core/image',
+						audio: 'wp-block:core/audio',
+						video: 'wp-block:core/video',
+					};
+					const allowed = allowedTypes
+						.map( ( type ) => typeMap[ type ] )
+						.filter( Boolean );
+
+					if ( ! multiple ) {
+						return (
+							types.length === 1 && allowed.includes( types[ 0 ] )
+						);
+					}
+
+					return types.every( ( type ) => allowed.includes( type ) );
+				} }
+			/>
+		);
 	};
 
 	const renderCancelLink = () => {
diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx
index b1bd0199e877d8..cff60c8d042f2f 100644
--- a/packages/components/src/drop-zone/index.tsx
+++ b/packages/components/src/drop-zone/index.tsx
@@ -15,7 +15,7 @@ import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import type { DropType, DropZoneProps } from './types';
+import type { DropZoneProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
 /**
@@ -47,19 +47,22 @@ export function DropZoneComponent( {
 	onFilesDrop,
 	onHTMLDrop,
 	onDrop,
+	isEligible = () => true,
 	...restProps
 }: WordPressComponentProps< DropZoneProps, 'div', false > ) {
 	const [ isDraggingOverDocument, setIsDraggingOverDocument ] =
 		useState< boolean >();
 	const [ isDraggingOverElement, setIsDraggingOverElement ] =
 		useState< boolean >();
-	const [ type, setType ] = useState< DropType >();
+	const [ isActive, setIsActive ] = useState< boolean >();
 	const ref = useDropZone( {
 		onDrop( event ) {
-			const files = event.dataTransfer
-				? getFilesFromDataTransfer( event.dataTransfer )
-				: [];
-			const html = event.dataTransfer?.getData( 'text/html' );
+			if ( ! event.dataTransfer ) {
+				return;
+			}
+
+			const files = getFilesFromDataTransfer( event.dataTransfer );
+			const html = event.dataTransfer.getData( 'text/html' );
 
 			/**
 			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
@@ -76,32 +79,30 @@ export function DropZoneComponent( {
 		onDragStart( event ) {
 			setIsDraggingOverDocument( true );
 
-			let _type: DropType = 'default';
+			if ( ! event.dataTransfer ) {
+				return;
+			}
 
 			/**
 			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
 			 * The order of the checks is important to recognize the HTML drop.
 			 */
-			if ( event.dataTransfer?.types.includes( 'text/html' ) ) {
-				_type = 'html';
+			if ( event.dataTransfer.types.includes( 'text/html' ) ) {
+				setIsActive( !! onHTMLDrop );
 			} else if (
 				// Check for the types because sometimes the files themselves
 				// are only available on drop.
-				event.dataTransfer?.types.includes( 'Files' ) ||
-				( event.dataTransfer
-					? getFilesFromDataTransfer( event.dataTransfer )
-					: []
-				).length > 0
+				event.dataTransfer.types.includes( 'Files' ) ||
+				getFilesFromDataTransfer( event.dataTransfer ).length > 0
 			) {
-				_type = 'file';
+				setIsActive( !! onFilesDrop );
+			} else {
+				setIsActive( !! onDrop && isEligible( event.dataTransfer ) );
 			}
-
-			setType( _type );
 		},
 		onDragEnd() {
 			setIsDraggingOverElement( false );
 			setIsDraggingOverDocument( false );
-			setType( undefined );
 		},
 		onDragEnter() {
 			setIsDraggingOverElement( true );
@@ -112,14 +113,9 @@ export function DropZoneComponent( {
 	} );
 
 	const classes = clsx( 'components-drop-zone', className, {
-		'is-active':
-			( isDraggingOverDocument || isDraggingOverElement ) &&
-			( ( type === 'file' && onFilesDrop ) ||
-				( type === 'html' && onHTMLDrop ) ||
-				( type === 'default' && onDrop ) ),
+		'is-active': isActive,
 		'is-dragging-over-document': isDraggingOverDocument,
 		'is-dragging-over-element': isDraggingOverElement,
-		[ `is-dragging-${ type }` ]: !! type,
 	} );
 
 	return (
diff --git a/packages/components/src/drop-zone/types.ts b/packages/components/src/drop-zone/types.ts
index 3982889a4f3eac..4e718c62677cf6 100644
--- a/packages/components/src/drop-zone/types.ts
+++ b/packages/components/src/drop-zone/types.ts
@@ -26,4 +26,9 @@ export type DropZoneProps = {
 	 * It receives the HTML being dropped as an argument.
 	 */
 	onHTMLDrop?: ( html: string ) => void;
+	/**
+	 * A function to determine if the drop zone is eligible to handle the drop
+	 * event.
+	 */
+	isEligible?: ( dataTransfer: DataTransfer ) => boolean;
 };

From 249dc2654da7f0e0c4a2de53b5220d45ae956e80 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Tue, 26 Nov 2024 16:00:01 +0100
Subject: [PATCH 04/10] Fix pattern drop

---
 .../inserter-draggable-blocks/index.js        | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
index 34282efd9ed511..d122840de0597f 100644
--- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js
+++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
@@ -20,6 +20,11 @@ const InserterDraggableBlocks = ( {
 	children,
 	pattern,
 } ) => {
+	const transferData = {
+		type: 'inserter',
+		blocks,
+	};
+
 	const blockTypeIcon = useSelect(
 		( select ) => {
 			const { getBlockType } = select( blocksStore );
@@ -42,22 +47,20 @@ const InserterDraggableBlocks = ( {
 		} );
 	}
 
-	const parsedBlocks =
-		pattern?.type === INSERTER_PATTERN_TYPES.user &&
-		pattern?.syncStatus !== 'unsynced'
-			? [ createBlock( 'core/block', { ref: pattern.id } ) ]
-			: blocks;
-
 	return (
 		<Draggable
-			// To do: remove in favour of `wp-block:*` items.
 			__experimentalTransferDataType="wp-blocks"
-			transferData={ { type: 'inserter', blocks: parsedBlocks } }
+			transferData={ transferData }
 			onDragStart={ ( event ) => {
 				if ( ! event.dataTransfer ) {
 					return;
 				}
 				startDragging();
+				const parsedBlocks =
+					pattern?.type === INSERTER_PATTERN_TYPES.user &&
+					pattern?.syncStatus !== 'unsynced'
+						? [ createBlock( 'core/block', { ref: pattern.id } ) ]
+						: blocks;
 
 				for ( const block of parsedBlocks ) {
 					event.dataTransfer.items.add(

From 16468e816d5f3bb941b094cc384ec6c4096ee22b Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Tue, 26 Nov 2024 18:20:26 +0100
Subject: [PATCH 05/10] fix e2e

---
 .../inserter-draggable-blocks/index.js        | 28 ++++++------------
 .../src/components/media-placeholder/index.js | 29 +++++++------------
 packages/components/src/drop-zone/index.tsx   |  1 +
 packages/components/src/drop-zone/types.ts    |  2 +-
 test/e2e/specs/editor/blocks/image.spec.js    | 23 ++++++++-------
 5 files changed, 35 insertions(+), 48 deletions(-)

diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
index d122840de0597f..e15d0b7320a533 100644
--- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js
+++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
@@ -20,11 +20,6 @@ const InserterDraggableBlocks = ( {
 	children,
 	pattern,
 } ) => {
-	const transferData = {
-		type: 'inserter',
-		blocks,
-	};
-
 	const blockTypeIcon = useSelect(
 		( select ) => {
 			const { getBlockType } = select( blocksStore );
@@ -47,26 +42,21 @@ const InserterDraggableBlocks = ( {
 		} );
 	}
 
+	const parsedBlocks =
+		pattern?.type === INSERTER_PATTERN_TYPES.user &&
+		pattern?.syncStatus !== 'unsynced'
+			? [ createBlock( 'core/block', { ref: pattern.id } ) ]
+			: blocks;
+
 	return (
 		<Draggable
 			__experimentalTransferDataType="wp-blocks"
-			transferData={ transferData }
+			transferData={ { type: 'inserter', blocks: parsedBlocks } }
 			onDragStart={ ( event ) => {
-				if ( ! event.dataTransfer ) {
-					return;
-				}
 				startDragging();
-				const parsedBlocks =
-					pattern?.type === INSERTER_PATTERN_TYPES.user &&
-					pattern?.syncStatus !== 'unsynced'
-						? [ createBlock( 'core/block', { ref: pattern.id } ) ]
-						: blocks;
-
 				for ( const block of parsedBlocks ) {
-					event.dataTransfer.items.add(
-						JSON.stringify( block ),
-						`wp-block:${ block.name }`
-					);
+					const type = `wp-block:${ block.name }`;
+					event.dataTransfer.items.add( '', type );
 				}
 			} }
 			onDragEnd={ () => {
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index 40cc038f236dd8..3a21d8a252d080 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -390,25 +390,18 @@ export function MediaPlaceholder( {
 				onFilesDrop={ onFilesUpload }
 				onDrop={ onDrop }
 				isEligible={ ( dataTransfer ) => {
-					const types = dataTransfer.types.filter( ( type ) =>
-						type.startsWith( 'wp-block:' )
-					);
-					const typeMap = {
-						image: 'wp-block:core/image',
-						audio: 'wp-block:core/audio',
-						video: 'wp-block:core/video',
-					};
-					const allowed = allowedTypes
-						.map( ( type ) => typeMap[ type ] )
-						.filter( Boolean );
-
-					if ( ! multiple ) {
-						return (
-							types.length === 1 && allowed.includes( types[ 0 ] )
-						);
+					const prefix = 'wp-block:core/';
+					const types = [];
+					for ( const type of dataTransfer.types ) {
+						if ( type.startsWith( prefix ) ) {
+							types.push( type.slice( prefix.length ) );
+						}
 					}
-
-					return types.every( ( type ) => allowed.includes( type ) );
+					return (
+						types.every( ( type ) =>
+							allowedTypes.includes( type )
+						) && ( multiple ? true : types.length === 1 )
+					);
 				} }
 			/>
 		);
diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx
index cff60c8d042f2f..dd8b97149a0598 100644
--- a/packages/components/src/drop-zone/index.tsx
+++ b/packages/components/src/drop-zone/index.tsx
@@ -103,6 +103,7 @@ export function DropZoneComponent( {
 		onDragEnd() {
 			setIsDraggingOverElement( false );
 			setIsDraggingOverDocument( false );
+			setIsActive( undefined );
 		},
 		onDragEnter() {
 			setIsDraggingOverElement( true );
diff --git a/packages/components/src/drop-zone/types.ts b/packages/components/src/drop-zone/types.ts
index 4e718c62677cf6..503f400bc4be45 100644
--- a/packages/components/src/drop-zone/types.ts
+++ b/packages/components/src/drop-zone/types.ts
@@ -28,7 +28,7 @@ export type DropZoneProps = {
 	onHTMLDrop?: ( html: string ) => void;
 	/**
 	 * A function to determine if the drop zone is eligible to handle the drop
-	 * event.
+	 * data transfer items.
 	 */
 	isEligible?: ( dataTransfer: DataTransfer ) => boolean;
 };
diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index 6110a125ff6f7e..d3cddd9c3a51cd 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -528,14 +528,13 @@ test.describe( 'Image', () => {
 			name: 'Block: Image',
 		} );
 
-		const html = `
-			<figure>
-				<img src="https://live.staticflickr.com/3894/14962688165_04759a8b03_b.jpg" alt="Cat">
-				<figcaption>"Cat" by tomhouslay is licensed under <a href="https://creativecommons.org/licenses/by-nc/2.0/?ref=openverse">CC BY-NC 2.0</a>.</figcaption>
-			</figure>
-		`;
-
-		await page.evaluate( ( _html ) => {
+		await page.evaluate( () => {
+			const { createBlock } = window.wp.blocks;
+			const block = createBlock( 'core/image', {
+				url: 'https://live.staticflickr.com/3894/14962688165_04759a8b03_b.jpg',
+				alt: 'Cat',
+				caption: `"Cat" by tomhouslay is licensed under <a href="https://creativecommons.org/licenses/by-nc/2.0/?ref=openverse">CC BY-NC 2.0</a>.`,
+			} );
 			const dummy = document.createElement( 'div' );
 			dummy.style.width = '10px';
 			dummy.style.height = '10px';
@@ -545,13 +544,17 @@ test.describe( 'Image', () => {
 			dummy.style.left = 0;
 			dummy.draggable = 'true';
 			dummy.addEventListener( 'dragstart', ( event ) => {
-				event.dataTransfer.setData( 'text/html', _html );
+				event.dataTransfer.setData(
+					'wp-blocks',
+					JSON.stringify( { blocks: [ block ] } )
+				);
+				event.dataTransfer.setData( 'wp-block:core/image', '' );
 				setTimeout( () => {
 					dummy.remove();
 				}, 0 );
 			} );
 			document.body.appendChild( dummy );
-		}, html );
+		} );
 
 		await page.mouse.move( 0, 0 );
 		await page.mouse.down();

From 9c34f2e886b98e23c27aae25963d3ed4f5a40398 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Tue, 26 Nov 2024 18:23:31 +0100
Subject: [PATCH 06/10] changelog

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index c9b09c40350232..9fb5729a4ffede 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -30,6 +30,7 @@
 -   `ColorPicker`: Update sizes of color format select and copy button ([#67093](https://github.com/WordPress/gutenberg/pull/67093)).
 -   `ComboboxControl`: Update reset button size ([#67215](https://github.com/WordPress/gutenberg/pull/67215)).
 -   `Autocomplete`: Increase option height ([#67214](https://github.com/WordPress/gutenberg/pull/67214)).
+-   `DropZone`: Add `isEligible` prop to allow customizing whether the drop zone should activate ([#67317](https://github.com/WordPress/gutenberg/pull/67317)).
 -   `CircularOptionPicker`: Update `Button` sizes to be ready for 40px default size ([#67285](https://github.com/WordPress/gutenberg/pull/67285)).
 
 ### Experimental

From e8754960910c957f84e55b7296944e1f0ffb2c47 Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Tue, 26 Nov 2024 18:28:08 +0100
Subject: [PATCH 07/10] memo

---
 .../inserter-draggable-blocks/index.js        | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
index e15d0b7320a533..cf64344b277904 100644
--- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js
+++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
@@ -4,6 +4,7 @@
 import { Draggable } from '@wordpress/components';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -34,6 +35,13 @@ const InserterDraggableBlocks = ( {
 		useDispatch( blockEditorStore )
 	);
 
+	const patternBlock = useMemo( () => {
+		return pattern?.type === INSERTER_PATTERN_TYPES.user &&
+			pattern?.syncStatus !== 'unsynced'
+			? [ createBlock( 'core/block', { ref: pattern.id } ) ]
+			: undefined;
+	}, [ pattern ] );
+
 	if ( ! isEnabled ) {
 		return children( {
 			draggable: false,
@@ -42,19 +50,14 @@ const InserterDraggableBlocks = ( {
 		} );
 	}
 
-	const parsedBlocks =
-		pattern?.type === INSERTER_PATTERN_TYPES.user &&
-		pattern?.syncStatus !== 'unsynced'
-			? [ createBlock( 'core/block', { ref: pattern.id } ) ]
-			: blocks;
-
+	const draggableBlocks = patternBlock ?? blocks;
 	return (
 		<Draggable
 			__experimentalTransferDataType="wp-blocks"
-			transferData={ { type: 'inserter', blocks: parsedBlocks } }
+			transferData={ { type: 'inserter', blocks: draggableBlocks } }
 			onDragStart={ ( event ) => {
 				startDragging();
-				for ( const block of parsedBlocks ) {
+				for ( const block of draggableBlocks ) {
 					const type = `wp-block:${ block.name }`;
 					event.dataTransfer.items.add( '', type );
 				}

From daa7f355c8d11128ec84dd0bd95a9d19fb5aec3f Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Tue, 26 Nov 2024 18:33:21 +0100
Subject: [PATCH 08/10] cleanup

---
 .../src/components/media-placeholder/index.js | 32 +++----------------
 1 file changed, 5 insertions(+), 27 deletions(-)

diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index 3a21d8a252d080..2c151a8df668fd 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -229,30 +229,15 @@ export function MediaPlaceholder( {
 		} );
 	};
 
-	async function handleBlocksDrop( blocks ) {
-		if ( ! blocks || ! Array.isArray( blocks ) ) {
-			return;
-		}
-
-		function recursivelyFindMediaFromBlocks( _blocks ) {
-			return _blocks.flatMap( ( block ) =>
-				( block.name === 'core/image' ||
-					block.name === 'core/audio' ||
-					block.name === 'core/video' ) &&
-				( block.attributes.url || block.attributes.src )
-					? [ block ]
-					: recursivelyFindMediaFromBlocks( block.innerBlocks )
-			);
-		}
-
-		const mediaBlocks = recursivelyFindMediaFromBlocks( blocks );
+	async function handleBlocksDrop( event ) {
+		const { blocks } = parseDropEvent( event );
 
-		if ( ! mediaBlocks.length ) {
+		if ( ! blocks || ! blocks.length ) {
 			return;
 		}
 
 		const uploadedMediaList = await Promise.all(
-			mediaBlocks.map( ( block ) => {
+			blocks.map( ( block ) => {
 				const blockType = block.name.split( '/' )[ 1 ];
 				if ( block.attributes.id ) {
 					block.attributes.type = blockType;
@@ -292,13 +277,6 @@ export function MediaPlaceholder( {
 		}
 	}
 
-	function onDrop( event ) {
-		const { blocks } = parseDropEvent( event );
-		if ( blocks ) {
-			handleBlocksDrop( blocks );
-		}
-	}
-
 	const onUpload = ( event ) => {
 		onFilesUpload( event.target.files );
 	};
@@ -388,7 +366,7 @@ export function MediaPlaceholder( {
 		return (
 			<DropZone
 				onFilesDrop={ onFilesUpload }
-				onDrop={ onDrop }
+				onDrop={ handleBlocksDrop }
 				isEligible={ ( dataTransfer ) => {
 					const prefix = 'wp-block:core/';
 					const types = [];

From 6897d9144d31a8e153467c8d8c4507cf6e0ddb6a Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Tue, 26 Nov 2024 18:40:56 +0100
Subject: [PATCH 09/10] Add comment

---
 .../src/components/inserter-draggable-blocks/index.js         | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
index cf64344b277904..2858bc65e54fbe 100644
--- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js
+++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
@@ -59,6 +59,10 @@ const InserterDraggableBlocks = ( {
 				startDragging();
 				for ( const block of draggableBlocks ) {
 					const type = `wp-block:${ block.name }`;
+					// This will fill in the dataTransfer.types array so that
+					// the drop zone can check if the draggable is eligible.
+					// Unfortuantely, on drag start, we don't have access to the
+					// actual data, only the data keys/types.
 					event.dataTransfer.items.add( '', type );
 				}
 			} }

From 74d48220ce67de9b2c5f37a91f9e5255f7506aed Mon Sep 17 00:00:00 2001
From: Ella <ella@vandurpe.com>
Date: Wed, 27 Nov 2024 10:46:27 +0100
Subject: [PATCH 10/10] Address feedback

---
 .../src/components/inserter-draggable-blocks/index.js           | 2 +-
 packages/block-editor/src/components/media-placeholder/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
index 2858bc65e54fbe..ebef6304937aa7 100644
--- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js
+++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
@@ -40,7 +40,7 @@ const InserterDraggableBlocks = ( {
 			pattern?.syncStatus !== 'unsynced'
 			? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 			: undefined;
-	}, [ pattern ] );
+	}, [ pattern?.type, pattern?.syncStatus, pattern?.id ] );
 
 	if ( ! isEnabled ) {
 		return children( {
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index 2c151a8df668fd..0cbc6c8c26203f 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -232,7 +232,7 @@ export function MediaPlaceholder( {
 	async function handleBlocksDrop( event ) {
 		const { blocks } = parseDropEvent( event );
 
-		if ( ! blocks || ! blocks.length ) {
+		if ( ! blocks?.length ) {
 			return;
 		}