Fix: WordPress 5.0.2 Gallery Block Images Expand to Fill a Row

I haven’t been able to discover the rationale behind it, but the developers of the Gallery Block for WordPress 5.x, at least up until version 5.0.2, decided that images should expand to fill a row in the gallery.

WordPress Gallery Block Images Expand to Fill a Row
Gallery Block: with Flex-Grow Set to One

If, for example, you have a Gallery Block with the columns set to three, and there is a row with less than three images in it, the images will expand proportionally to fill the available space. Two images will expand to fill half the space, and one image will expand to fill the entire width of the column.

As you can see in the image “Gallery Block: with Flex-Grow Set to One,” the bottom row of the Gallery Block is filled with a single image that has expanded to fill the entire row. It’s not a particularly bad effect, but it certainly takes away from the images that aren’t so large.

My clients were not happy.

Gallery Block with Flex-Grow Set to Zero

It turns out that the culprit is the CSS3 flex-grow property, which was set to “1” in /wp-includes/css/dist/block-library/style.min.css for the list items that contain each Gallery Block image. The list items all have the class “blocks-gallery-item” and have their display property set to “flex” and the flex-direction set to “column.”

I’m not an expert on flex elements, but the workaround I tried, which has so far been effective, is to add the following CSS to my child theme:

.blocks-gallery-item {
	flex-grow: 0 !important;
}

It’s possible that the display property should be changed as well, but so far, my workaround seems to work on all the sites I’ve tried it on.