Fix media placeholder to only activate for media objects.

WordPress · Nov 14, 2024 · b20feeb · b20feeb
1 parent d0a190b
commit b20feeb
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 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
@@ -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 ? 'media' : '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
@@ -288,7 +288,7 @@ export function MediaPlaceholder( {
 		}
 	}
 
-	async function onHTMLDrop( HTML ) {
+	async function onMediaDrop( HTML ) {
 		const blocks = pasteHandler( { HTML } );
 		return await handleBlocksDrop( blocks );
 	}
@@ -380,7 +380,10 @@ export function MediaPlaceholder( {
 		}
 
 		return (
-			<DropZone onFilesDrop={ onFilesUpload } onHTMLDrop={ onHTMLDrop } />
+			<DropZone
+				onFilesDrop={ onFilesUpload }
+				onMediaDrop={ onMediaDrop }
+			/>
 		);
 	};
 

diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx
@@ -46,6 +46,7 @@ export function DropZoneComponent( {
 	label,
 	onFilesDrop,
 	onHTMLDrop,
+	onMediaDrop,
 	onDrop,
 	...restProps
 }: WordPressComponentProps< DropZoneProps, 'div', false > ) {
@@ -60,13 +61,16 @@ export function DropZoneComponent( {
 				? getFilesFromDataTransfer( event.dataTransfer )
 				: [];
 			const html = event.dataTransfer?.getData( 'text/html' );
+			const media = event.dataTransfer?.getData( 'media' );
 
 			/**
 			 * 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 ( html && onHTMLDrop ) {
 				onHTMLDrop( html );
+			} else if ( media && onMediaDrop ) {
+				onMediaDrop( media );
 			} else if ( files.length && onFilesDrop ) {
 				onFilesDrop( files );
 			} else if ( onDrop ) {
@@ -84,6 +88,8 @@ export function DropZoneComponent( {
 			 */
 			if ( event.dataTransfer?.types.includes( 'text/html' ) ) {
 				_type = 'html';
+			} else if ( event.dataTransfer?.types.includes( 'media' ) ) {
+				_type = 'media';
 			} else if (
 				// Check for the types because sometimes the files themselves
 				// are only available on drop.
@@ -116,6 +122,7 @@ export function DropZoneComponent( {
 			( isDraggingOverDocument || isDraggingOverElement ) &&
 			( ( type === 'file' && onFilesDrop ) ||
 				( type === 'html' && onHTMLDrop ) ||
+				( type === 'media' && onMediaDrop ) ||
 				( type === 'default' && onDrop ) ),
 		'is-dragging-over-document': isDraggingOverDocument,
 		'is-dragging-over-element': isDraggingOverElement,

diff --git a/packages/components/src/drop-zone/types.ts b/packages/components/src/drop-zone/types.ts
@@ -1,4 +1,4 @@
-export type DropType = 'file' | 'html' | 'default';
+export type DropType = 'file' | 'html' | 'media' | 'default';
 
 export type DropZoneProps = {
 	/**
@@ -26,4 +26,9 @@ export type DropZoneProps = {
 	 * It receives the HTML being dropped as an argument.
 	 */
 	onHTMLDrop?: ( html: string ) => void;
+	/**
+	 * The function is called when dropping media into the `DropZone`.
+	 * It receives the media being dropped as an argument.
+	 */
+	onMediaDrop?: ( media: string ) => void;
 };