From 8acf54e0be5e942459bf1a1766f4f26fbdd04341 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Tue, 16 Nov 2021 22:18:01 +1100
Subject: [PATCH] Testing setting a temporary media object so we can keep track
 of uploaded media

---
 packages/block-library/src/image/edit.js | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index f0aee5276dbc0..1894bb04ca625 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -93,7 +93,7 @@ function hasDefaultSize( image, defaultSize ) {
  * that is, removed from the media library. The core Media Library
  * add a `destroyed` property to a deleted attachment object in the media collection.
  *
- * @param {Number} id The attachment id.
+ * @param {number} id The attachment id.
  *
  * @return {boolean} Whether the image has been destroyed.
  */
@@ -125,6 +125,7 @@ export function ImageEdit( {
 		sizeSlug,
 	} = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState();
+	const [ temporaryMediaId, setTemporaryMediaId ] = useState();
 
 	const altRef = useRef();
 	useEffect( () => {
@@ -142,7 +143,7 @@ export function ImageEdit( {
 		return pick( getSettings(), [ 'imageDefaultSize', 'mediaUpload' ] );
 	}, [] );
 
-	const media = useSelect(
+	const mediaObject = useSelect(
 		( select ) => {
 			return select( coreStore ).getMedia( id );
 		},
@@ -155,12 +156,18 @@ export function ImageEdit( {
 	// Also check on media object itself in case
 	// the page had reloaded and the media attachment collection state no longer exists.
 	useEffect( () => {
-		if ( isSelected ) {
-			if ( isMediaDestroyed( attributes?.id ) || ! media?.id ) {
+		// If we can find the media in the store,
+		// remove the temporary one in state.
+		if ( temporaryMediaId && temporaryMediaId === mediaObject?.id ) {
+			setTemporaryMediaId( undefined );
+			return;
+		}
+		if ( isSelected && !! id && ! temporaryMediaId ) {
+			if ( isMediaDestroyed( id ) || ! mediaObject?.id ) {
 				clearImageAttributes();
 			}
 		}
-	}, [ isSelected, attributes?.id, media?.id ] );
+	}, [ isSelected, id, mediaObject?.id, temporaryMediaId ] );
 
 	function clearImageAttributes() {
 		setAttributes( {
@@ -198,6 +205,10 @@ 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,