Move handler to media-placeholder

WordPress · Apr 20, 2023 · 89365c4 · 89365c4
1 parent db8d464
commit 89365c4
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 81 deletions.
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -17,6 +17,7 @@ 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';
 
 /**
  * Internal dependencies
@@ -74,7 +75,6 @@ export function MediaPlaceholder( {
 	onToggleFeaturedImage,
 	onDoubleClick,
 	onFilesPreUpload = noop,
-	onHTMLDrop = noop,
 	children,
 	mediaLibraryButton,
 	placeholder,
@@ -177,6 +177,64 @@ export function MediaPlaceholder( {
 		} );
 	};
 
+	async function onHTMLDrop( HTML ) {
+		const blocks = pasteHandler( { HTML } );
+
+		if ( ! blocks || ! Array.isArray( blocks ) ) {
+			return;
+		}
+
+		function recursivelyFindImagesFromBlocks( _blocks ) {
+			return _blocks.flatMap( ( block ) =>
+				block.name === 'core/image'
+					? [ block ]
+					: recursivelyFindImagesFromBlocks( block.innerBlocks )
+			);
+		}
+
+		const imageBlocks = recursivelyFindImagesFromBlocks( blocks );
+
+		if ( ! imageBlocks.length ) {
+			return;
+		}
+
+		const uploadedMediaList = await Promise.all(
+			imageBlocks.map( ( block ) =>
+				block.attributes.id
+					? block.attributes
+					: new Promise( ( resolve, reject ) => {
+							window
+								.fetch( block.attributes.url )
+								.then( ( response ) => response.blob() )
+								.then( ( blob ) =>
+									mediaUpload( {
+										filesList: [ blob ],
+										additionalData: {
+											title: block.attributes.title,
+											alt_text: block.attributes.alt,
+											caption: block.attributes.caption,
+										},
+										onFileChange: ( [ media ] ) => {
+											if ( media.id ) {
+												resolve( media );
+											}
+										},
+										allowedTypes,
+										onError: reject,
+									} )
+								)
+								.catch( () => resolve( block.attributes.url ) );
+					  } )
+			)
+		).catch( ( err ) => onError( err ) );
+
+		if ( multiple ) {
+			onSelect( uploadedMediaList );
+		} else {
+			onSelect( uploadedMediaList[ 0 ] );
+		}
+	}
+
 	const onUpload = ( event ) => {
 		onFilesUpload( event.target.files );
 	};

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -23,7 +23,6 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { image as icon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
-import { pasteHandler } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -141,10 +140,7 @@ export function ImageEdit( {
 		[]
 	);
 
-	const { createErrorNotice, createSuccessNotice } =
-		useDispatch( noticesStore );
-	const { __unstableMarkNextChangeAsNotPersistent, selectBlock } =
-		useDispatch( blockEditorStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
 	function onUploadError( message ) {
 		createErrorNotice( message, { type: 'snackbar' } );
 		setAttributes( {
@@ -353,80 +349,6 @@ export function ImageEdit( {
 		);
 	};
 
-	async function onHTMLDrop( HTML ) {
-		const blocks = pasteHandler( { HTML, mode: 'BLOCKS' } );
-
-		if ( ! blocks || blocks.length !== 1 ) {
-			return;
-		}
-
-		const [ block ] = blocks;
-
-		if ( ! block || block.name !== 'core/image' ) {
-			return;
-		}
-
-		// Optimistic update to replace the current image.
-		setAttributes( {
-			url: undefined,
-			alt: undefined,
-			id: undefined,
-			title: undefined,
-			caption: undefined,
-			...block.attributes,
-		} );
-
-		// Media item already exists in the library.
-		if ( !! block.attributes.id ) {
-			selectBlock( clientId );
-			return;
-		}
-
-		// Media item doesn't exist in the library, upload it so that it
-		// can be served within the same origin.
-		try {
-			// Media item does not exist in library, so try to upload it.
-			// Fist fetch the image data. This may fail if the image host
-			// doesn't allow CORS with the domain.
-			// If this happens, we insert the image block using the external
-			// URL and let the user know about the possible implications.
-			const response = await window.fetch( block.attributes.url );
-			const blob = await response.blob();
-
-			mediaUpload( {
-				filesList: [ blob ],
-				additionalData: {
-					title: block.attributes.title,
-					alt_text: block.attributes.alt,
-					caption: block.attributes.caption,
-				},
-				onFileChange( [ img ] ) {
-					if ( isBlobURL( img.url ) ) {
-						return;
-					}
-
-					__unstableMarkNextChangeAsNotPersistent();
-					setAttributes( {
-						id: img.id,
-						url: img.url,
-					} );
-					createSuccessNotice(
-						__( 'Image uploaded to the media library.' ),
-						{ type: 'snackbar' }
-					);
-				},
-				allowedTypes: ALLOWED_MEDIA_TYPES,
-				onError( message ) {
-					createErrorNotice( message, { type: 'snackbar' } );
-				},
-			} );
-		} catch ( err ) {
-			// TODO: Ignore cross-origin image errors for now.
-		} finally {
-			selectBlock( clientId );
-		}
-	}
-
 	return (
 		<figure { ...blockProps }>
 			{ ( temporaryURL || url ) && (
@@ -459,7 +381,6 @@ export function ImageEdit( {
 				onSelect={ onSelectImage }
 				onSelectURL={ onSelectURL }
 				onError={ onUploadError }
-				onHTMLDrop={ onHTMLDrop }
 				placeholder={ placeholder }
 				accept="image/*"
 				allowedTypes={ ALLOWED_MEDIA_TYPES }