Wp-calypso: Gallery Block: Unable to reorder images in Safari

[jamiepalatnik]

Steps to reproduce

1. Log into WordPress.com in Safari
2. Add a gallery block with multiple images
3. Try to reorder the images by clicking the arrows on the images

What I expected

The images should move so they can be reordered.

What happened instead

The images do not move. It's also not possible to remove images from the gallery.

Browser / OS version

Replicated on Safari Version 13.0.5.

Screenshot / Video

GIF: https://d.pr/i/qNNu3a

Context / Source

user-report

19757880-hc

[spencerberry]

Reported again in WordPress.com live chat:

19666021-hc

user-report

[xpurichan]

Another report 16716231-hc

[lancewillett]

For folks reporting this, have you replicated in a non-WP.com Simple environment? Atomic site, or Jetpack self-hosted?

[xpurichan]

@lancewillett good question! I had not previously tested this.

I just took a moment to try this on my Atomic site and the same problem exists there. Individual images can't be moved or deleted from the gallery.

[jamiepalatnik]

I can replicate this on an Atomic test site, but not on a Jetpack self-hosted site. On the self-hosted site I can reorder and delete gallery items as expected.

[lancewillett]

Confirmed with Safari desktop version 13.1 on macOS Catalina.

I'm not able to rearrange images using the arrows inside the Gallery block. (Tiled Gallery block works as expected. Other browsers work, too.)

[noahtallen]

I can also replicate it on Gutenberg 7.7.2, but it is thankfully not an issue on Gutenberg 7.8.1. So this issue will be fixed as soon as the Gutenberg version is updated on dotcom (which I am working on at the moment ;)). Hopefully that happens today or tomorrow!

[noahtallen]

7.8.1 is now active in production, so this should be fixed. Let me know if this is not the case!

[jamiepalatnik]

@noahtallen I am still experiencing the same error when I try to edit an existing gallery and a new gallery in Safari.

[noahtallen]

@jamiepalatnik Hm. I can replicate that too. I'm 100% sure it was working yesterday!

[lancewillett]

Same here — still happening in Safari.

[alshakero]

After some investigation, I found that this PR from 3 years ago is probably the cause of this issue, it may have coincided with some new Safari change. The arrow icon in the button is not focusable (focusable=false), which means when you click on it, the focus event isn't fired and the onBlur event plays out, at least this is the case in Safari. This results in blurring the whole block and canceling out the click action.

I'm looking for a fix.

[alshakero]

This PR should fix the issue.

[andrewserong]

This issue reported again in https://github.com/Automattic/wp-calypso/issues/43780 by @automattic-ian (thanks for reporting!)

[alshakero]

This should be fixed in https://github.com/WordPress/gutenberg/pull/23586.