Wp-calypso: Image not inserted into post when picking from Media Library

[tellyworth]

Steps to reproduce

1. Starting at URL: https://wordpress.com/block-editor/post/
2. Insert an Image Block
3. Click to pick from Media Library
4. Select an image (large in my case, 1.5mb 2000px jpeg)
5. Click Insert

What I expected

The image should be visible in the block.

What happened instead

The block still contains the default Upload / Media Library / Insert From URL buttons, with no image visible. This message appeared in the console:

Uncaught TypeError: e.props.onClose is not a function
    onmessage https://widgets.wp.com/wpcom-block-editor/calypso.editor.min.js?ver=20200708230131:1
calypso.editor.min.js:1:22140
    onmessage https://widgets.wp.com/wpcom-block-editor/calypso.editor.min.js?ver=20200708230131:1

This is intermittent, and eventually appears to work after repeating steps 2-5. It's possible that saving a draft has some effect (perhaps placebo).

Additionally, I've had the same problem when trying to select a Featured Image.

Browser / OS version

Firefox

Screenshot / Video

Context / Source

dogfooding

[AtrumGeost]

Got another report here 22826830-hc

[lakellie]

Another report in 22948599-hc

[kathrynwp]

I'm running into this bug constantly while trying to record demos.

FF 77.0.1
macOS 10.15.5

[lsl]

I notice the Image Upload option is failing with the same unsupported file type error seen in https://github.com/WordPress/gutenberg/issues/23510 / p1596855424433900-slack-CBTN58FTJ. This was fixed for File uploads in https://github.com/WordPress/gutenberg/pull/24318 & D47893-code.

I'm thinking there is something related here, possibly to do with allowedTypes and accept which behave in a similar way for the media selector and file upload functionality.

These are some threads I'm currently pulling at (not sure which if any are going to help here, but I'll look further tomorrow)

• allowedTypes = [] removal
• "If allowedTypes is unset all mime types should be allowed.".
• https://github.com/WordPress/gutenberg/commit/5891e47a5be56ed4977f3ba320939e66b147ad9d

[joweber123]

I have been running into this issue often as well when doing quick-start sessions with users. Same error in console as noted above.

FF 79.0
macOS 10.15.6

I believe this is a duplicate issue. I am seeing the same thing they outline in the screen shares. https://github.com/Automattic/wp-calypso/issues/44326

[caimin-j]

Another report in 22939044-hc

[Copons]

Preliminary investigation

This seems to only happen in Firefox, but it affects Chrome as well (although without visible issues).

Basically, the Calypso Media Library interacts with the iframed editor through some client/server messages.
When the media modal is closed, Calypso posts a message (that can be either "insert media and close" or "cancel and close"):

https://github.com/Automattic/wp-calypso/blob/c8078b1470bb4a3afbf2ebdc43f53de538e86ad9/client/gutenberg/editor/calypsoify-iframe.tsx#L450-L472

The iframed editor receives the message and do what it's told:

https://github.com/Automattic/wp-calypso/blob/c8078b1470bb4a3afbf2ebdc43f53de538e86ad9/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js#L940-L956

For some reasons props.onClose is undefined, and so the iframed editor throws the error.

But Chrome and Firefox have different behaviours:

• Chrome: selecting an image and clicking "insert" correctly goes through mediaSelectChannel, performs the onSelect and everything is good.
  Clicking "cancel" correctly goes through mediaCancelChannel; the onClose function is undefined and the error is thrown, but it's not a big deal, since the media modal doesn't depend on that to be closed.

• Firefox: while clicking "cancel" always goes through mediaCancelChannel, clicking "insert" sometimes goes through mediaSelectChannel and sometimes goes through mediaCancelChannel, seemingly at random.
  onClose is undefined and throws the error, but that's not the point because the editor is responding to the wrong event.

[tellyworth]

The exact same error now seems to happen every time when attempting to set a featured image:

Uncaught TypeError: e.props.onClose is not a function onmessage https://widgets.wp.com/wpcom-block-editor/calypso.editor.min.js?ver=20200819104322:1 calypso.editor.min.js:1:23383 onmessage https://widgets.wp.com/wpcom-block-editor/calypso.editor.min.js?ver=20200819104322:1

This time it's not intermittent. It happens every time, meaning I'm unable to set a featured image at all.

[joweber123]

Happened again repeatedly during a quick start session today - 3275606-zen

[RinusRadioOn]

It happened with Brave (browser)

[KokkieH]

Happens regularly for me in Firefox, with both image and tiled gallery blocks.

[KokkieH]

I just had it happen when trying to select a featured image from the media library as well.

[Copons]

Increasing this to high priority, since it now happens across different browsers (Brave is built on Chromium, so there's a chance it might happen on Chrome as well?).

[RinusRadioOn]

Chrome works (for the moment), but needs a lot of time to upload image from computer.

[alshakero]

This is now fixed in production 🌮