Image: Reflect media deletion in the editor

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

@@ -87,6 +87,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
+ * adds 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,
@@ -109,6 +123,7 @@ export function ImageEdit( {
 		height,
 		sizeSlug,
 	} = attributes;
+
 	const [ temporaryURL, setTemporaryURL ] = useState();
 
 	const altRef = useRef();
@@ -127,21 +142,45 @@ export function ImageEdit( {
 		return pick( getSettings(), [ 'imageDefaultSize', 'mediaUpload' ] );
 	}, [] );
 
+	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();
+		}
+	}
+
+	/*
+		 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 );
 	}
 
 	function onSelectImage( media ) {
 		if ( ! media || ! media.url ) {
-			setAttributes( {
-				url: undefined,
-				alt: undefined,
-				id: undefined,
-				title: undefined,
-				caption: undefined,
-			} );
-
+			clearImageAttributes();
 			return;
 		}
 
@@ -324,6 +363,8 @@ export function ImageEdit( {
 					containerRef={ ref }
 					context={ context }
 					clientId={ clientId }
+					onCloseModal={ onCloseModal }
+					onImageLoadError={ onImageError }
 				/>
 			) }
 			{ ! url && (
@@ -340,6 +381,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,12 +72,14 @@ export default function Image( {
 	isSelected,
 	insertBlocksAfter,
 	onReplace,
+	onCloseModal,
 	onSelectImage,
 	onSelectURL,
 	onUploadError,
 	containerRef,
 	context,
 	clientId,
+	onImageLoadError,
 } ) {
 	const imageRef = useRef();
 	const captionRef = useRef();
@@ -213,11 +215,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 ) {
@@ -352,6 +361,7 @@ export default function Image( {
 						onSelect={ onSelectImage }
 						onSelectURL={ onSelectURL }
 						onError={ onUploadError }
+						onCloseModal={ onCloseModal }
 					/>
 				</BlockControls>
 			) }