Gutenberg Gallery Test Page

This is an (internal) test page for the new “Gutenberg” WordPress “block editor” and its gallery view, as well as some built-in alternatives.

Reference

This is the Classic Editor’s [gallery] shortcode:

This is my preferred way of showing photos: a single-column “gallery” where the “thumbnails” are actually large images. This is my favorite because it works well on both mobile and desktop alike, and the captions don’t interfere with the photos.

Realistically, not a lot of users click on thumbnails nowadays, but it’s possible for a visitor to do that, and open the “Carousel” lightbox. Except that the Carousel view appears to be completely broken with these settings (single column, full size image, center aligned). I only get a black screen and can’t close it.

Gallery Block

Next is the Gutenberg “Gallery” block. This SHOULD by all means be the same as the Classic Editor’s gallery but as you can see, it isn’t.

WARNING: this feature has a bug. When you click on an image, you get a blank screen. You need to use the X to “close” it and then RELOAD the page.

Problems with this, aside from the bug mentioned above:

  1. the captions are INSIDE the image. They obscure a part of a CAREFULLY COMPOSED photograph, and also block the copyright notice that is in the photo.
  2. the captions are not aligned with the image’s width, but instead with the full width of the container. This looks almost comically bad for vertical images.
  3. the Carousel view (if it would work) is missing the captions and only shows the title

Single Images

Next, here are the three images as single “image” blocks. Clearly, this is preferable, but what’s missing is obviously that they’re not “connected” for viewing in the “Carousel” slideshow view. Even when linked to “Attachment page”, the image “Carousel” view is not used.

Burned landscape after the Chariot Fire appears like an infrared false-color rendition; Laguna Mountains, California, July 2013.
Burned landscape after the Chariot Fire appears like an infrared false-color rendition; Laguna Mountains, California, July 2013.
Dodder draped over California Buckwheat looks like a spooky cocoon; Rancho Bernardo, California, October 2020.
“Cocoon” — Dodder (Cuscuta californica) draped over California Buckwheat looks like a spooky cocoon; Rancho Bernardo, California, October 2020.
Sunshine on the raindrops on an autumn leaf that the wind blew onto the sidewalk. November 2020.
Sunshine on the raindrops on an autumn leaf that the wind blew onto the sidewalk. November 2020.

Image Stack

Last not least, here is a “stacked images” block. This block omits the captions entirely by default, and they must be turned on manually. Furthermore, images default to “full width” and the vertical image is then upscaled beyond its upload resolution.

Beyond that, a “lightbox” mode can be enabled but it’s entirely different from the familiar “Carousel” lightbox.

Last not least, the caption text is smaller than in the single image view (above). This will probably lead to Google complaining that the text is too small on mobile.

Summary

There is no way to get both the look and functionality of the “Classic” [gallery] shortcode with Gutenberg image or gallery blocks.

The only way is to use the Classic Editor block, and then manually type in the [gallery] shortcode (the option to insert media does not exist). After that, cut & paste the shortcode, and it will instantly change to the familiar placeholder from where you can invoke the Media Library to add images.