Skip to content

Commit

Permalink
Winding this back to check if an image exists when the editor loads.
Browse files Browse the repository at this point in the history
This removes the `isSelected` check, but also removes a bunch of code as well.
We could run the same check on `isSelected`... TBC
  • Loading branch information
ramonjd committed Dec 2, 2021
1 parent b84cad1 commit bb3b296
Showing 1 changed file with 24 additions and 29 deletions.
53 changes: 24 additions & 29 deletions packages/block-library/src/image/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 */

Expand Down Expand Up @@ -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,
Expand All @@ -124,8 +142,8 @@ export function ImageEdit( {
height,
sizeSlug,
} = attributes;

const [ temporaryURL, setTemporaryURL ] = useState();
const [ temporaryMediaId, setTemporaryMediaId ] = useState();

const altRef = useRef();
useEffect( () => {
Expand All @@ -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( {
Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit bb3b296

Please sign in to comment.