Fix media placeholder to only activate for media objects. (#66986)

Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: talldan <[email protected]>
Co-authored-by: getdave <[email protected]>
Co-authored-by: ndiego <[email protected]>
Co-authored-by: richtabor <[email protected]>

Author: 6 people

packages/block-editor/src/components/inserter-draggable-blocks/index.js

@@ -29,6 +29,15 @@ 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 );
@@ -63,7 +72,7 @@ const InserterDraggableBlocks = ( {
 						? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 						: blocks;
 				event.dataTransfer.setData(
-					'text/html',
+					blocksContainMedia ? 'default' : 'text/html',
 					serialize( parsedBlocks )
 				);
 			} }

packages/block-editor/src/components/media-placeholder/index.js

@@ -288,8 +288,10 @@ export function MediaPlaceholder( {
 		}
 	}
 
-	async function onHTMLDrop( HTML ) {
-		const blocks = pasteHandler( { HTML } );
+	async function onDrop( event ) {
+		const blocks = pasteHandler( {
+			HTML: event.dataTransfer?.getData( 'default' ),
+		} );
 		return await handleBlocksDrop( blocks );
 	}
 
@@ -379,9 +381,7 @@ export function MediaPlaceholder( {
 			return null;
 		}
 
-		return (
-			<DropZone onFilesDrop={ onFilesUpload } onHTMLDrop={ onHTMLDrop } />
-		);
+		return <DropZone onFilesDrop={ onFilesUpload } onDrop={ onDrop } />;
 	};
 
 	const renderCancelLink = () => {

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( 'text/html', _html );
+				event.dataTransfer.setData( 'default', _html );
 				setTimeout( () => {
 					dummy.remove();
 				}, 0 );