Wp-calypso: Media: Inserting media that hasn't been added yet causes errors.

[kwight]

When setting a featured image, we can access the Pexels API from the "Free Photo Library" dropdown in the media modal. As soon as we select an image, we can immediately insert it (with the primary action button), even though it hasn't completed uploading to our library.

In Calypso, this will give console errors but corrects itself somehow; however, when using the media modal with an iframed block editor, the failure will leave the featured image loader spinning forever unresolved.

Additionally, you'll get the same console errors when trying to insert a still-uploading image in the block editor, but it works itself out with no issues. Only in the context of the featured image in the block editor is this an issue.

The core media modal gets around this by not allowing you to insert an image until it has been uploaded. (Seems this could be a possible solution, though not as slick a UX.)

Note that if we then remove the featured image, we can reapply it successfully, since the media has completed uploading.

12000 may point to a solution.

To Replicate

• At https://wordpress.com/post, select a site that's opted in to the block editor.
• Select Set Featured Image, and choose Free Photo Library from the top left corner dropdown.
• Enter a search term, select an image, and click Insert.
• Note the console error, and the missing featured image.

(You can also replicate this by uploading a local picture and then inserting it as a featured image before it has finished uploading.)

Note: after resolving this issue, also make sure you can no longer reproduce #33362.

[donalirl]

This came up in #5711931-hc (follow-up #2077994-zen.) We did not succeed with the workaround of removing the featured image and re-selecting it from the site's Media. It must be some theme/plugin conflict because it did work fine on my atomic site.

[noahtallen]

The console errors are caused because the media modal does the following synchronously:

1. Assigns the images a temporary IDs before uploading
2. Calls the code to upload the items
3. Returns immediately (i.e. before the upload is done)
4. Then whatever context you opened the modal from gets the images with their temporary IDs, since they have not yet finished uploading.
5. That context (i.e. the image block or the featured images sidebar area) immediately performs a GET for the image, like https://public-api.wordpress.com/wp/v2/sites/160923989/media/media-15. In this case, media-15 is the transient (temporary) ID of the media that is currently uploading and obviously doesn't exist on the backend.

The blocks recover from this because in calypsoify-iframe, we listen for changes in the media store and post an updateImageBlocks action when the upload is finished. The handler for this action is also supposed to update the featured image, so my hypothesis is a bug in this function: https://github.com/Automattic/wp-calypso/blob/d63c5b061002b70aced23f3a3c7c3cf7547c837c/apps/wpcom-block-editor/src/calypso/iframe-bridge-server.js#L346

[noahtallen]

Turns out the above is unrelated - the code we have for update image blocks is specifically for editing an image (see D26023-code) and doesn't fire when inserting an image in the first place.

I'm not sure how the core Gutenberg image block (source code here) recovers from receiving the transient ID, while the featured image selector (source code here) does not. Both core image blocks and the featured image selector use the getMedia selector on the core data store to retrieve the picture, so I'd assume that the bug would happen after that at some point.

I was unable to find a solution / cause during HACK week, so I'm sending it back to the backlog.

[arunsathiya]

This was reported here https://github.com/Automattic/wp-calypso/issues/35987 as well, and I am able to reproduce. I also noticed that, when the featured image is removed and when I open the media library again, the photo from Free photo library can be seen.

That is, the featured image action fails, and when we remove that image to check the media library, the file can be seen to be successfully uploaded.

But, trying to set new images as featured again, from Free photo library, fails.

[kwight]

Confirmed this is still an issue today, but didn't get far on a solution.

[zdenys]

Confirming that it is still happening and I encountered it many times during Quick Start Sessions.

[zdenys]

As per pbAPfg-1z-p2#comment-94 it should not be happening anymore. Can others confirm this too so we can close the issue?

[gwwar]

Let's verify if this is still an issue

[gwwar]

@zdenys this was fixed by @Addison-Stavlo in https://github.com/Automattic/wp-calypso/pull/38488 💖

The insert button will be disabled until the image is fully uploaded.