Removed the onerror listener and relying on the error handler already…

… added to the Image props
WordPress · Dec 13, 2021 · b41f862 · b41f862
1 parent 47c3130
commit b41f862
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 28 deletions.
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -101,25 +101,6 @@ function isMediaDestroyed( id ) {
 	return attachment.destroyed;
 }
 
-/**
- * Runs an error callback if the image does not load.
- * If the error callback is triggered, we infer that that image
- * has been deleted.
- *
- * @param {string}   imageURL An image url for Image.src.
- * @param {Function} onError  A callback function if image load errors.
- */
-function checkImageStatus( imageURL, onError = () => {} ) {
-	if ( ! imageURL ) {
-		return;
-	}
-	const newImage = new window.Image();
-	newImage.src = imageURL;
-	newImage.addEventListener( 'error', function () {
-		onError();
-	} );
-}
-
 export function ImageEdit( {
 	attributes,
 	setAttributes,
@@ -161,13 +142,6 @@ export function ImageEdit( {
 		return pick( getSettings(), [ 'imageDefaultSize', 'mediaUpload' ] );
 	}, [] );
 
-	// Check onload if the image exists.
-	useEffect( () => {
-		if ( url ) {
-			checkImageStatus( url, clearImageAttributes );
-		}
-	}, [] );
-
 	function clearImageAttributes() {
 		setAttributes( {
 			url: undefined,
@@ -186,6 +160,19 @@ export function ImageEdit( {
 		}
 	}
 
+	/*
+		 Runs an error callback if the image does not load.
+		 If the error callback is triggered, we infer that that image
+		 has been deleted.
+	*/
+	function onImageError( { isReplaced } ) {
+		// If the image block was not replaced with an embed,
+		// clear the attributes and trigger the placeholder.
+		if ( ! isReplaced ) {
+			clearImageAttributes();
+		}
+	}
+
 	function onUploadError( message ) {
 		noticeOperations.removeAllNotices();
 		noticeOperations.createErrorNotice( message );
@@ -377,6 +364,7 @@ export function ImageEdit( {
 					context={ context }
 					clientId={ clientId }
 					onCloseModal={ onCloseModal }
+					onImageLoadError={ onImageError }
 				/>
 			) }
 			{ ! url && (

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -79,6 +79,7 @@ export default function Image( {
 	containerRef,
 	context,
 	clientId,
+	onImageLoadError,
 } ) {
 	const captionRef = useRef();
 	const prevUrl = usePrevious( url );
@@ -189,11 +190,18 @@ export default function Image( {
 	}
 
 	function onImageError() {
-		// Check if there's an embed block that handles this URL.
+		// Check if there's an embed block that handles this URL, e.g., instagram URL.
+		// See: https://github.com/WordPress/gutenberg/pull/11472
 		const embedBlock = createUpgradedEmbedBlock( { attributes: { url } } );
-		if ( undefined !== embedBlock ) {
+		const shouldReplace = undefined !== embedBlock;
+
+		if ( shouldReplace ) {
 			onReplace( embedBlock );
 		}
+
+		if ( onImageLoadError ) {
+			onImageLoadError( { isReplaced: shouldReplace } );
+		}
 	}
 
 	function onSetHref( props ) {