Can't replace image in gallery block

[tomdkat]

Description

After adding images to a 3-column gallery block, I'm unable to replace an image with another image. I can click the image I want to replace and I can click the "Pencil" icon to make changes, but the "upload", "media library", and "Insert from URL" links are not clickable.

Step-by-step reproduction instructions

1. Create a page and add a 3-column gallery
2. Add three images to the 3-column gallery, with one image per column
3. Save the page
4. Edit the 3-column gallery by choosing the middle photo
5. Click the "Pencil" icon to make changes to the photo
6. When the "Upload", "Media Library", and "Insert from URL" links appear, try to click one

Expected behaviour

The "Upload", "Media Library", and "Insert from URL" links should be clickable so a replacement photo can be selected.

Actual behaviour

The "Upload", "Media Library", and "Insert from URL" links are not clickable, so a replacement photo can't be selected.

Screenshots or screen recording (optional)

Code snippet (optional)

N/A

WordPress information

• WordPress version: 5.7.0
• Gutenberg version: (whatever comes with Wordpress 5.7.0)
• Are all plugins except Gutenberg deactivated? "No"
• Are you using a default theme (e.g. Twenty Twenty-One)? "No" (I conducted a test using the Twenty Twenty-One theme and the issue was repeatable)

Device information

• Device: Laptop
• Operating system: "Windows 10" or Linux Mint 18.3
• Browser: Firefox 86 or Chrome 89

[annezazu]

I can replicate this using Gutenberg 10.2.1 and WordPress 5.7. However, I noticed the behavior is a bit inconsistent and "sticky" with the ability to use the buttons returning if you click on other images. Here's a video to better explain where you can see me clicking around trying to see what might be causing this :D

replicating.mov

@noisysocks this seems important to get fixed for 5.7.1 (April 14th release) but would love your thoughts as I don't trust my read of priority issues for releases.

[tomdkat]

On 3/23/21 4:49 PM, annezazu wrote: I can replicate this using Gutenberg 10.2.1 and WordPress 5.7. However, I noticed the behavior is a bit inconsistent and "sticky" with the ability to use the buttons returning if you click on other images. Here's a video to better explain where you can see me clicking around trying to see what might be causing this :D https://user-images.githubusercontent.com/26996883/112233346-e764db00-8bff-11eb-9d16-fcbc98c6ec16.mov @noisysocks <https://github.com/noisysocks> this seems important to get fixed for 5.7.1 (April 14th release <https://make.wordpress.org/core/2021/03/22/wordpress-5-7-1-maintenance-release-schedule/>) but would love your thoughts as I don't trust my read of priority issues for releases. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#30158 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAXTAEFGCX5SGZF37BAY7KTTFESINANCNFSM4ZWABQ4A>.

Yes, I've seen the same behavior!  I found if I clicked in some places, I could eventually get the links to be clickable.  My initial thought was maybe a <div> or some other element was overlaying the links, such that they couldn't be clicked. Clicking around caused that element to be lower in the stacking order (z-index) or maybe disappear entirely, thereby making the links clickable.   In any event, I'm glad you were able to recreate the problem.  :) Thanks for the update! Peace... Tom

[annezazu]

Whew, glad you experienced it too! Thanks for reporting it :) Big help to catch these problems early.

[Quintis1212]

Hello @annezazu and @tomdkat . I finded the source of bug . There is a before element that has absolute position which covers buttons , when position absolute is disabled all is working :

This before element is used for outline on hover . I think it will be better implement outline on hover with class such as with this component below:

If I am right please tell me and I will implement this fix in PR )

[tomdkat]

Will the "Upload", "Media Library" and "Insert from URL" links be retained? Outside of that, your proposed solution sounds good to me. :) Thanks!

[Quintis1212]

Will the "Upload", "Media Library" and "Insert from URL" links be retained? Outside of that, your proposed solution sounds good to me. :) Thanks!

Yes )

[tomdkat]

On 3/28/21 11:00 AM, Quintis1212 wrote: Will the "Upload", "Media Library" and "Insert from URL" links be retained? Outside of that, your proposed solution sounds good to me. :) Thanks! Yes )

Excellent!  Thanks for fixing this so quickly!  :)

[stokesman]

It appears this is a duplicate of #29835 which has already been closed with the fix in #29860. The fix is scheduled to be included in the next minor release.

I'll close this one. It'd be nice if there was a way to help prevent this type of thing from happening. Though probably that's an issue for Github itself. I think the best way would be by inserting and refining a list of possible duplicates on the issue creation page as the title (and maybe description) are updated.