Gallery Block Refactor should land in WordPress 5.9 – WP Tavern
Last week a GitHub extraction request I was watching since October 2020 on the Gutenberg repository has finally been merged into the codebase. It changes the structure of the WordPress Gallery block to make it a container for nested image blocks. The new format is expected to land in WordPress 5.9.
For those who want to start testing it early, it should ship with Gutenberg 11.4 next week. However, you can take the night test version from the Gutenberg Times to see it in action now. To use the new Gallery format, you need to activate it from the Gutenberg> Experiences admin screen.
“If you’ve ever added a custom link to a picture box and then tried to do the same on an image in the gallery, you’ll understand the frustration and confusion of not having consistency between the different types of picture blocks, “wrote Glenn Davies in the refactor the announcement message. “This inconsistency is due to the fact that the main gallery block stores the details of the included images as nested
elements in the block content. Therefore, images in a gallery look and behave differently from images in an individual image block.
At the surface level, the Gallery block refactor doesn’t change much for many users. They will still add images to galleries as they have for years. However, for further use, it opens up a world of possibilities.
An often requested feature is the ability to add links to individual images in galleries. Previously, users could only link to attachment pages or the media file itself. Both options apply to all images. With the most recent change, users can edit each Image block, including customizing its link.
While this makes it possible to manage something as simple as links, there is so much more that users could do.
In a theme I built, I have a custom gallery block style that allows users to create a group of images with a Polaroid style frame around them. It’s something fun for people who don’t want the look all the time. Sometimes I like to add a little whimsy.
The problem with this style of block is that it doesn’t go far enough. For example, I also have Tilt Right and Tilt Left styles for individual picture boxes. However, users cannot apply them in a gallery. It would be easy to make them available to the whole set or to randomize different styles of “tilt”. However, the ideal method would be to control the design at the image level.
The same is true for the other options. Users can do something fun like add block styles and mix custom colors, borders etc.
There are other fun things users can do, like alternating square and rounded styles:
The new structure may not be without problems at first. WordPress will likely continue to support the old format for some time for backward compatibility. All new Gallery blocks will be in the new one. However, the kernel should eventually automatically transform the old markup.
Theme authors who have added custom CSS will be the ones with the most potential for future work. Trying to support both the new and the old markup could be a frustrating exercise. The new Gallery block broke the output with my custom theme – the margins and widths are disabled.
All styles for the new format begin with, at least,
.wp-block-gallery.blocks-gallery-grid.has-nested-images. This will likely override the custom theme styles. I haven’t yet figured out the obsession with sequencing selectors in the main code. This creates a ton of code and forces theme authors into a battle of specificity. I hope this will subside a bit. Either way, theme authors have plenty of time to test and implement fixes if necessary.
In the long run, I’m excited about the potential to break away from the idea of only add images to galleries. For example, I’d like to see a grid option for something like the following:
Nesting a quote in the middle of my image gallery could be a fun block pattern idea that doesn’t rely on a mishmash of stacked column blocks. We will see what the future holds.
For now, turning Gallery blocks into containers is a welcome step.