Tiled Gallery: Missing arrows to rearrange images

[vparkhere]

Impacted plugin

Jetpack

Quick summary

The Tiled Gallery Block does not display arrows to rearrange images after a gallery is created.

Steps to reproduce

1. Go into a page or post.
2. Add a tiled gallery block.
3. Select at least 2 photos to add to the gallery and insert images.
4. Click on an image in the Editor.

A clear and concise description of what you expected to happen.

After an image is clicked, there should be < and > arrows at the top left of the image as well as the X at the top right of the image, like this:

What actually happened

The images are not individually highlighted and the arrow buttons don't appear. Instead, the entire gallery block is highlighted.

Impact

Most (> 50%)

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

Users can either use the Classic Editor and insert a gallery there, or use the regular gallery block. Both options will have a slightly different look and doesn't have the mosaic capability of the tiled gallery block.

Platform (Simple and/or Atomic)

Simple

Logs or notes

Can be reproduced on Simple sites. Not an issue on Atomic sites.

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Content Management: The issue pertains to managing content within the Tiled Gallery Block, which affects how images are arranged and manipulated in the editor.
• [Feature] Tiled Gallery: The problem specifically relates to the Tiled Gallery feature, which is directly impacted as it does not display the expected functionality for rearranging images.
• [Feature] Images: The issue involves images since it concerns their arrangement and the display of arrows for manipulation within the gallery.

[ezebecke]

+1 on 9214086-zd

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 9214086-zen
• 9214383-zen
• 9217354-zen
• 9219501-zen
• 9240861-zen
• 9246232-zen
• 9248930-zen
• 9250936-zen
• 9214807-zen
• 9211846-zen
• 9258579-zen

[ezebecke]

Also on 9214383-zd

[jerrysarcastic]

Also reported in 9217354-zd-a8c

[coder-karen]

This appears to be due to a change in Gutenberg v19.9, conflicting with the Tiled Gallery block. I can replicate on self-hosted (tested all the way back to 13.0 to confirm it wasn't related to any recent Jetpack changes), if the Gutenberg plugin is active. Simple was upgraded to Gutenberg 19.9 on Dec 24th.

There is also another workaround on affected sites for the moment - you can click on the edit icon in the block toolbar, and rearrange images (or remove them) from the media library 'edit gallery' modal itself.

The Gutenberg PR that appears to be the cause is WordPress/gutenberg#67305.
The issue is that we can now no longer select the individual images within the TG block, and it's only upon selection that the otherwise hidden arrows and remove icon will appear. This can be solved at the Jetpack end though for the Tiled Gallery block, but I'll investigate more to determine whether it is best fixing this in Jetpack or Gutenberg.

[cselamor]

+1 9219501-zd

[supernovia]

Also: 9240861-zd-a8c

[elcristofue]

Also reported here: 9246232-zd

[elcristofue]

Also here: 9248930-zd

[aisajib]

This was also reported here: 9250936-zd-a8c

[abonnar]

Also here: 9214807-zd

[mxhassani]

9211846-zd

Workaround
The WP-admin editing UI works fine. Predef:
..
You can use the Classic Admin interface, under Settings → General → Admin interface style → Classic, as explained here: Set Your Admin Interface Style

[mxhassani]

9258579-zen

[coder-karen]

This should now be fixed on Simple sites. WoA sites that use the Gutenberg plugin will have the fix in the next Jetpack on WoA release (next week), and any self-hosted sites that also used the Gutenberg plugin would need to wait until the next Jetpack release (14.3).