Block audit: Gallery

[kjellr]

Note: We'll be doing these audits in waves and editing this as we work through the blocks, so this text will be updated and fleshed out as we progress. See the full picture here.

Overview

Name: Gallery
Description: Display multiple images in an elegantly organized tiled layout.
Category: Common blocks
CSS class: wp-block-gallery in frontend and editor
Can be converted to: Image

States

Empty:

Selected:

With one image added:

With two images added:

With one image selected:

With one image selected + caption:

Unselected:

Placeholder:

Primary (toolbar) settings

Align: left, centre, right, wide, full
Edit

Secondary (sidebar) settings

Gallery Settings: Columns, Crop Images, Link to
Advanced: Additional CSS Class

Frontend appearance

Gutenberg starter theme:

Atomic Blocks

twentyseventeen:

twentyten:

Documentation

No devdocs in https://github.com/WordPress/gutenberg/tree/master/core-blocks/gallery

Suggestion for user-facing docs:

Performance on mobile

Accessibility

Bugs/errors

Individual issues will be opened for these soon

• Links in gallery captions are low-contrast (Links in Gallery captions are low-contrast #7952)
• Gallery captions placeholder text is low-contrast (Captions "placeholders" color contrast too low #5838)
• In multi-line captions, the bottom-most line appears closer to the bottom of the box than to the line of text above it. This creates uncomfortable visual tension on that last line, and pulls it away visually from the text above it. (Multi-line gallery captions are visually imbalanced. #8018)
• Long captions are unwieldy to edit. They sometimes result in cut off controls. (Add Caption to Gallery Images within Block is impractical. #6858)
• Using the "Edit Gallery" option erases any previously entered image captions without warning. (Gallery Block: The "Edit Gallery" modal is unaware of any captions added within Gutenberg.  #8310)

Suggestions

Individual issues will be opened for these soon

• We should add a clear visual affordance for scrollable image captions (It's not clear that you can scroll to view long gallery image captions.  #7963)
• We should consider offering a caption style that doesn't layer text on top of the images. (Consider a different caption style for image galleries  #8030)
• Once an image has been added to the gallery, we don't provide a straightforward way to add more images from the media library. We should consider adding "Upload / Media Library" buttons to the "Add an Image" placeholder area. (Gallery Block: Add "Upload / Media Library" buttons to the "Upload an Image" placeholder area. #8309)
• Consider allowing users to reorder the gallery from within Gutenberg, instead of having to jump into the media modal. (Gallery Block: reordering images, including support for Drag&Drop #743)
• Consider an enhancement that allows individual images to link to custom URLs.
• A philosophical question: Should this block be recreated so that it uses columns and nested blocks?
• Empty state could be improved from a consistency standpoint. (Improve consistency of empty states for media blocks #8409)

[markfinst]

+ to suggestions:

• Store gallery image attachment IDs in JSON <!-- wp:gallery --> block to allow overriding gallery by theme developers (from backend side) without having to parse HTML. Issue: Core blocks Image and Gallery should provide easy access to their data #8193
• When generating gallery - use gallery_shortocode method https://developer.wordpress.org/reference/functions/gallery_shortcode/ Besides old [gallery] shortcode, this method is also used by Gallery Widget introduced in WP 4.9

[sarahmonster]

It looks as though all issues surfaced here have been discussed in issues elsewhere. I'm going to close this tracking issue out, but please do go ahead and file new issues if there's anything that hasn't been brought up for discussion yet! 📈