New Block: Flowing Masonry Gallery

[melchoyce]

What problem does this address?

A common trend on sites today is a flowing, spacious masonry gallery, often with some images overlapping:

Golden Venum	Martin Schwaibold	Laura McCluskey

@kjellr tried to make this kind of pattern (with overlapping images) work in Twenty Twenty-One with the gallery block, but we ended up having to scrap it and instead use columns. This solution worked for the theme but overall wasn't great because it meant you couldn't just upload a bunch of images and have the block intelligently arrange them for you. It also lacks the sophisticated reflow we'd get on mobile if we were able to use a CSS Grid-based gallery.

What is your proposed solution?

I'm wondering if it would be possible to make a unique block, separate from Gallery, to handle the necessary HTML structure to create a kind of flowing, overlapping masonry gallery like this. I think it would be a strong show of good design from WordPress core. Maybe something we could explore?

[glendaviesnz]

Another possibility which has been discussed is to modify the innerBlocks api somehow to allow a different element structure to be passed. Initial investigations indicated that it wasn't possible to get a tiled or masonry gallery purely with CSS, but it seems a shame to have to recreate the whole block just to get a different layout.

The other advantage is that this additional api may be useful for other uses of innerBlocks.

This idea is a very vague theory at the moment and needs some investigation and prototyping.