Rolling back historical experimental commits.

Now relying on the `onClose` event of the media upload, and the media object to test if the media has been "destroyed."

packages/block-editor/src/components/media-placeholder/index.js

@@ -75,6 +75,7 @@ export function MediaPlaceholder( {
 	onDoubleClick,
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
+	onClose = noop,
 	children,
 	mediaLibraryButton,
 	placeholder,
@@ -328,6 +329,7 @@ export function MediaPlaceholder( {
 				gallery={ multiple && onlyAllowsImages() }
 				multiple={ multiple }
 				onSelect={ onSelect }
+				onClose={ onClose }
 				allowedTypes={ allowedTypes }
 				value={
 					Array.isArray( value )

packages/block-editor/src/components/media-replace-flow/index.js

@@ -39,6 +39,7 @@ const MediaReplaceFlow = ( {
 	onSelect,
 	onSelectURL,
 	onFilesUpload = noop,
+	onCloseModal = noop,
 	name = __( 'Replace' ),
 	createNotice,
 	removeNotice,
@@ -136,6 +137,7 @@ const MediaReplaceFlow = ( {
 							value={ mediaId }
 							onSelect={ ( media ) => selectMedia( media ) }
 							allowedTypes={ allowedTypes }
+							onClose={ onCloseModal }
 							render={ ( { open } ) => (
 								<MenuItem icon={ mediaIcon } onClick={ open }>
 									{ __( 'Open Media Library' ) }

packages/block-library/src/image/edit.js

@@ -21,7 +21,7 @@ import {
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { image as icon } from '@wordpress/icons';
-import { store as mediaUtilsStore } from '@wordpress/media-utils';
+import { store as coreStore } from '@wordpress/core-data';
 
 /* global wp */
 
@@ -88,6 +88,20 @@ function hasDefaultSize( image, defaultSize ) {
 	);
 }
 
+/**
+ * Checks if a media attachment object has been "destroyed",
+ * 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.
+ *
+ * @return {boolean} Whether the image has been destroyed.
+ */
+function isMediaDestroyed( id ) {
+	const attachment = wp?.media?.attachment( id ) || {};
+	return attachment.destroyed;
+}
+
 export function ImageEdit( {
 	attributes,
 	setAttributes,
@@ -125,28 +139,46 @@ export function ImageEdit( {
 	const ref = useRef();
 	const { imageDefaultSize, mediaUpload } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
-		const { getDeletedAttachment } = select( mediaUtilsStore );
 		return pick( getSettings(), [ 'imageDefaultSize', 'mediaUpload' ] );
 	}, [] );
 
-	const { isImageDeleted } = useSelect( ( select ) => {
-		const { getDeletedAttachment } = select( mediaUtilsStore );
-		console.log( 'useSelect', getDeletedAttachment( id ) );
-		return !! getDeletedAttachment( id );
-	}, [ id ] );
+	const media = 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.
 	useEffect( () => {
-		if ( isImageDeleted === true ) {
-			console.log( 'useEffect', isImageDeleted );
-			setAttributes( {
-				url: undefined,
-				alt: undefined,
-				id: undefined,
-				title: undefined,
-				caption: undefined,
-			} );
+		if ( isSelected ) {
+			if ( isMediaDestroyed( attributes?.id ) || ! media?.id ) {
+				clearImageAttributes();
+			}
 		}
-	}, [ isImageDeleted ] );
+	}, [ isSelected, attributes?.id, media?.id ] );
+
+	function clearImageAttributes() {
+		setAttributes( {
+			url: undefined,
+			alt: undefined,
+			id: undefined,
+			title: undefined,
+			caption: undefined,
+		} );
+	}
+
+	// A callback passed to MediaUpload,
+	// fired when the media modal closes.
+	function onCloseModal() {
+		if ( isMediaDestroyed( attributes?.id ) ) {
+			clearImageAttributes();
+		}
+	}
 
 	function onUploadError( message ) {
 		noticeOperations.removeAllNotices();
@@ -155,14 +187,7 @@ export function ImageEdit( {
 
 	function onSelectImage( media ) {
 		if ( ! media || ! media.url ) {
-			setAttributes( {
-				url: undefined,
-				alt: undefined,
-				id: undefined,
-				title: undefined,
-				caption: undefined,
-			} );
-
+			clearImageAttributes();
 			return;
 		}
 
@@ -345,6 +370,7 @@ export function ImageEdit( {
 					containerRef={ ref }
 					context={ context }
 					clientId={ clientId }
+					onCloseModal={ onCloseModal }
 				/>
 			) }
 			{ ! url && (
@@ -361,6 +387,7 @@ export function ImageEdit( {
 				onSelectURL={ onSelectURL }
 				notices={ noticeUI }
 				onError={ onUploadError }
+				onClose={ onCloseModal }
 				accept="image/*"
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				value={ { id, src } }

packages/block-library/src/image/image.js

@@ -72,6 +72,7 @@ export default function Image( {
 	isSelected,
 	insertBlocksAfter,
 	onReplace,
+	onCloseModal,
 	onSelectImage,
 	onSelectURL,
 	onUploadError,
@@ -327,6 +328,7 @@ export default function Image( {
 						onSelect={ onSelectImage }
 						onSelectURL={ onSelectURL }
 						onError={ onUploadError }
+						onCloseModal={ onCloseModal }
 					/>
 				</BlockControls>
 			) }

packages/media-utils/src/components/media-upload/index.js

@@ -1,20 +1,15 @@
 /**
  * External dependencies
  */
-import { castArray, defaults, pick, noop } from 'lodash';
+import { castArray, defaults, pick } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
-const { wp } = window;
 
-/**
- * Internal dependencies
- */
-import { store as mediaUtilsStore } from '../../store';
+const { wp } = window;
 
 const DEFAULT_EMPTY_GALLERY = [];
 
@@ -244,9 +239,6 @@ class MediaUpload extends Component {
 		this.onSelect = this.onSelect.bind( this );
 		this.onUpdate = this.onUpdate.bind( this );
 		this.onClose = this.onClose.bind( this );
-		this.onRemoveSelectedAttachment = this.onRemoveSelectedAttachment.bind(
-			this
-		);
 
 		if ( gallery ) {
 			this.buildAndSetGalleryFrame();
@@ -278,11 +270,6 @@ class MediaUpload extends Component {
 		this.frame.on( 'update', this.onUpdate );
 		this.frame.on( 'open', this.onOpen );
 		this.frame.on( 'close', this.onClose );
-		this.frame.listenTo(
-			wp.media.model.Attachments.all,
-			'remove',
-			this.onRemoveSelectedAttachment
-		);
 	}
 
 	/**
@@ -387,18 +374,6 @@ class MediaUpload extends Component {
 		onSelect( multiple ? attachment : attachment[ 0 ] );
 	}
 
-	onRemoveSelectedAttachment( attachment ) {
-		if ( attachment.destroyed ) {
-			const { onRemove = noop } = this.props;
-			// @TODO We can't dispatch outside the body of a function component.
-			// Maybe we should turn this into a function component first.
-			const { removeAttachment } = useDispatch( mediaUtilsStore );
-			console.log( 'onRemoveSelectedAttachment', attachment );
-			removeAttachment( attachment );
-			onRemove( attachment );
-		}
-	}
-
 	onOpen() {
 		this.updateCollection();
 

packages/media-utils/src/index.js

@@ -1,3 +1,2 @@
 export * from './components';
 export * from './utils';
-export { store } from './store';