Gallery block: Media library button opens upload modal then causes an empty white modal

[andrewserong]

Description

Following Gallery block refactor PR testing instructions in: #29882, I noticed the following issue:

In a gallery that contains only a single image, if I click the Media Library button in the gallery block's placeholder, it opens the media library but then immediately also opens the upload modal. If I select an image from my computer, the media library modal renders white. When I close the modal, I can see that the image is uploaded.

What I expected:

• The media library button not to also open the upload modal
• In this state, if I do select an image to upload, then for the media library not to render white

Step-by-step reproduction instructions

1. Insert a gallery with a single image in it
2. Use the gallery's placeholder state to select the media library
3. Notice that this also opens up the browser's upload modal
4. Select an image to upload
5. Notice that the media library modal now appears to be empty
6. Closing the modal, the image appears to have been uploaded

Screenshots, screen recording, code snippet

Environment info

• WP 5.8
• Chrome browser on macOS

Pre-checks

• I have searched the existing issues.
• I have tested with all plugins deactivated except Gutenberg.

[glendaviesnz]

I think this might be a bug with 5.8 rather than then gallery refactor #33769 (comment)

[andrewserong]

Oh, thanks Glen, didn't see that one!

[glendaviesnz]

Going to close this as covered by #33769 (comment)

[andrewserong]

Sounds good, yes just confirming that I can replicate it on a separate branch with the old gallery block, so not related to the gallery refactor 👍

[simison]

@andrewserong @glendaviesnz you're describing two problems in this issue;

1. upload prompt opening right after media modal opening.
2. new images replacing old gallery

The issue you're linking covers 2nd problem, but not the first one.

The upload dialog bug happens with both old core gallery, as well with new refactored gallery. Could you have a look?

[glendaviesnz]

The issue was covered by this comment - #33769 (comment) - but probably worth having this as a separate issue so will leave it open for now

[simison]

Thanks Glen 👍 I also updated the title to reflect that this is current bug with old gallery block as well. Will your team handle the fix?

[glendaviesnz]

Will your team handle the fix?

Doesn't look like anyone else is picking this up in core so we have added it into our current sprint

[andrewserong]

Just assigning myself to this one — I'll have a go at investigating, but don't let that stop anyone else from looking, too, of course!

[andrewserong]

I have a fix ready for review in #34894. It looks like the regression was introduced in #33632 when an event.stopPropagation() was removed, because the parent Placeholder element has its own click handler for the openFileDialog which then fires as well. In the fix, I've suggested we remove the parent level click handler and move it down to the upload button, but happy for feedback on the PR if folks have other ideas on how it should work 🙂