From bb3b2966eeeccf60c2821cb2a9f57d9b3e9bf084 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Thu, 2 Dec 2021 12:35:40 +1100
Subject: [PATCH] Winding this back to check if an image exists when the editor
 loads. This removes the `isSelected` check, but also removes a bunch of code
 as well. We could run the same check on `isSelected`... TBC

---
 packages/block-library/src/image/edit.js | 53 +++++++++++-------------
 1 file changed, 24 insertions(+), 29 deletions(-)

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 1894bb04ca6251..8fd9d6fcc9b2f2 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -21,7 +21,6 @@ import {
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { image as icon } from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
 
 /* global wp */
 
@@ -102,6 +101,25 @@ 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,
@@ -124,8 +142,8 @@ export function ImageEdit( {
 		height,
 		sizeSlug,
 	} = attributes;
+
 	const [ temporaryURL, setTemporaryURL ] = useState();
-	const [ temporaryMediaId, setTemporaryMediaId ] = useState();
 
 	const altRef = useRef();
 	useEffect( () => {
@@ -143,31 +161,12 @@ export function ImageEdit( {
 		return pick( getSettings(), [ 'imageDefaultSize', 'mediaUpload' ] );
 	}, [] );
 
-	const mediaObject = useSelect(
-		( select ) => {
-			return select( coreStore ).getMedia( id );
-		},
-		[ id ]
-	);
-
-	// Also check for destroyed media when the image is selected,
-	// If the image is used elsewhere in a post,
-	// the onCloseModal callback won't fire.
-	// Also check on media object itself in case
-	// the page had reloaded and the media attachment collection state no longer exists.
+	// Check onload if the image exists.
 	useEffect( () => {
-		// If we can find the media in the store,
-		// remove the temporary one in state.
-		if ( temporaryMediaId && temporaryMediaId === mediaObject?.id ) {
-			setTemporaryMediaId( undefined );
-			return;
+		if ( url ) {
+			checkImageStatus( url, clearImageAttributes );
 		}
-		if ( isSelected && !! id && ! temporaryMediaId ) {
-			if ( isMediaDestroyed( id ) || ! mediaObject?.id ) {
-				clearImageAttributes();
-			}
-		}
-	}, [ isSelected, id, mediaObject?.id, temporaryMediaId ] );
+	}, [] );
 
 	function clearImageAttributes() {
 		setAttributes( {
@@ -205,10 +204,6 @@ export function ImageEdit( {
 
 		setTemporaryURL();
 
-		// Keep a record of the media object id in state
-		// until we can grab one from the store.
-		setTemporaryMediaId( media.id );
-
 		let mediaAttributes = pickRelevantMediaFiles( media, imageDefaultSize );
 
 		// If a caption text was meanwhile written by the user,