Gallery Block: Use CSS grid instead of flexbox to style the Gallery block

[daviedR]

What problem does this address?

Currently, gallery block rely on flexbox CSS to style. The flexbox styles are generated because of the Layout block support as registered in the block.json:

"supports": {
	...
	"__experimentalLayout": {
		"allowSwitching": false,
		"allowInheriting": false,
		"allowEditing": false,
		"default": {
			"type": "flex"
		}
	}
},

With the definition above, WordPress will automatically generate flexbox styles for the gallery block. But, no further layout options are actually configurable in the block options.

Hence, I think using the Layout block support is not suitable for Gallery block.

What is your proposed solution?

Remove the Layout block support and then set a fixed CSS for Gallery block using CSS grid.

Gallery block is rigid. Each items (columns) will have consistent width. In this case, CSS grid is more suitable.

We can use simpler CSS (style.scss) like this:

.wp-block-gallery {
	display: grid;

	&.columns-2 {
		grid-template-columns: repeat( 2, 1fr );
	}
	
	&.columns-default,
	&.columns-3 {
		grid-template-columns: repeat( 3, 1fr );
	}

	...
}

Using CSS grid, all items will be aligned well without bothering about flex-grow, flex-shrink, and flex-basis.

[glendaviesnz]

Thanks for the suggestion @daviedR. We did experiment with switching to grid when refactoring the Gallery block recently to use nested innerBlocks Image blocks. We struck a blocker with the use of CSS grid in that it can't be used to support the current Gallery block functionality of making orphan items fill the full width of the last row, eg.

currently a 3 column gallery will display as above. With the grid layout you suggest it will display as below:

This would be a change to the layout which a lot of people may not be happy with, unfortunately, and it seems like it is impossible to get grid to replicate the current flex layout without adding javascript to calculate the number of images versus number of columns and dynamically update the grid settings. But, if you know of a way to replicate the existing layout using grid for any number of columns and images let me know, I may have overlooked something in my explorations.

Having said all that, it would be good to have an option to select grid for those people that prefer its advantages and don't mind the orphaned items in the last row. You could create a block variation that overrides the core gallery css with your own grid version.

It is on the roadmap, but not sure when it will be looked at, to allow the easier application of different styles, like masonry, to the core Gallery block.

[daviedR]

Thanks @glendaviesnz for the quick response.

You're right about the orphan items in the last row. Although, it's an opinionated design of how the orphan items in the last row should be treated. There might be some theme designers who opt-in to leave the orphan items as they are, not spanning to the rest of the horizontal space. You're right, in this case, flexbox will give more flexibility.

Regarding, the use of Layout block support, I think there's no need to use Layout block support for Gallery block. I know, we can take advantage of auto CSS generation for the flexbox.

But the Gallery's flexbox CSS is 100% static. I think it would be better to set the CSS directly on the block's style.scss rather than relying on Layout block support to generate flexbox CSS for each gallery instance.

If we have 2 gallery blocks in a page, there would be 2 generated CSS for those gallery blocks, which are 100% identical.

What do you think?

[glendaviesnz]

Good point about the duplicated styles @daviedR. There is some work underway here, which includes adding some deduping of styles like this. If it looks like there will be a delay in getting this added, then it could be worth revisiting the Gallery flex styles as you note.

[glendaviesnz]

@daviedR It looks like the duplicate flex definitions in the case of the gallery have been removed by this PR

[andrewserong]

Could one option for this issue be for the Gallery block to support both flex and grid layout types, with an option to switch between them? I really like the idea of using grid as it'd allow for column and row span and more complex layouts, but one of the things I like about the current flex implementation (similar to the above comment from Glen in #42240 (comment)) is how rows are handled when fewer than the target number of columns are present. For example, in a 3 column Gallery block, if I have 5 images, the second row elegantly fills up with two images. It'd be nice to be able to continue to support existing flex layouts like this one:

[tellthemachines]

It'd be nice to be able to continue to support existing flex layouts like this one

Thanks for bringing this up!

Now that we have support for static column numbers and child spans, replacing flex with grid doesn't prevent us from keeping those layouts. My plan is to, as an initial approach at least, reproduce current behaviour using grid. The main difference is that we'll be able to expose the grid layout controls so users can make any changes they want to the size and position of child blocks, which currently isn't possible.

The current flex implementation involves a ton of conditional styles to essentially reproduce grid behaviour, and it's not customisable except for the column number. So switching to grid needn't remove any existing functionality! For instance, the layout above can be reproduced with a 6 column grid, and the children each spanning 2 or 3 columns. The advantage is that with grid it's easier to allow further editing of the image placement, so if someone prefers to have the two bottom images display full width, each in their single row, that is easy to achieve.

[andrewserong]

For instance, the layout above can be reproduced with a 6 column grid, and the children each spanning 2 or 3 columns.

Good point! I suppose part of the challenge is in making this easy to achieve and in a backwards compatible way. Currently one of the things I quite like about the existing behaviour is that while we don't have explicit control over column span, when you go to add or remove blocks, there's immediate visual feedback on filling out that final row:

2024-03-20.11.33.34.mp4

Also, for a 6 column grid where the user really wants it to look visually like a 3 column grid, it'd be good if they don't have to manually set 6 and then drag each individual block over to span 2 columns, etc. I imagine there'll be a bit of a balancing act between advanced control vs easy to use defaults?

The advantage is that with grid it's easier to allow further editing of the image placement, so if someone prefers to have the two bottom images display full width, each in their single row, that is easy to achieve.

Yes, I think the advantages of grid will be really cool. If we're thinking of replacing flex with grid, rather than having it as an additional option, I'll be curious to see how it can translate across all the existing column options, with how that final row gets filled out. I.e. an 8 column Gallery block with 5 images in the final row, etc. There could be a few different combinations that might not slot in neatly.

I guess my main question is how might the features that we already use in flex be preserved while ensuring backcompat, and whether it'd be easier to have grid as an addition to potentially avoid wrestling with those concerns, since there's a precedent with Group supporting multiple layout types... but I might be pondering prematurely here. Happy to keep my thoughts for when there's a WIP PR to play with!

[tellthemachines]

for a 6 column grid where the user really wants it to look visually like a 3 column grid, it'd be good if they don't have to manually set 6 and then drag each individual block over to span 2 columns, etc.

Yes! What I hope is that this will inform design and implementation of the interactive grid UI with some real world use cases 😁

how it can translate across all the existing column options, with how that final row gets filled out. I.e. an 8 column Gallery block with 5 images in the final row, etc. There could be a few different combinations that might not slot in neatly.

The current layout spreads the remainder of the images equally across the bottom row. This should be achievable by finding the minimum number that's divisible by both column number and remainder, and setting columnCount to that number.

We might want to preserve the Gallery block's custom column control for now, so that we can keep the number of columns the user wants separate from the columnCount of the actual grid. Potentially, if this "smart" distribution of content is something we'd like to have on other grid blocks, this might also inform how the grid layout controls evolve.