Gutenberg: Query Loop in Multi-column?

[iamtakashi]

Hi all! This is more of a question, and my apologies if this has been discussed in somewhere else. Please point me there :)

Currently, the posts in a Query Loop block only show up vertically, and I was wondering about how the user could make multi-column layout that we often see in a "magazine" layout for example.

These are just a few small examples, we can find more complex layouts in newspaper websites.

Masonry, checkered(?), and asymmetry grid layouts also come to mind as popular layouts to show a series of posts

Again, I wouldn't surprise if this has already been discussed in somewhere else, but if not, how can we use the block to make layouts like these?

[aristath]

I can think of 2 options:

1. Use columns and multiple query blocks, each one with a different offset to get the 1st, 2nd, 3rd etc posts.
2. custom class and css

[ntsekouras]

I can think of 2 options:

1. Use columns and multiple query blocks, each one with a different offset to get the 1st, 2nd, 3rd etc posts.
2. custom class and css

Yes, for now these are some options. The simple change of layout (grid/list) will be supported soon.
Check display options in this issue: https://github.com/WordPress/gutenberg/issues/24934

[mtias]

cc @jeffersonrabb as well, as I know you've faced some of these challenges :)

[kellychoffman]

how can we use the block to make layouts like these?

@mapk: these would make some great use cases to design against.

[jeffersonrabb]

cc @jeffersonrabb as well, as I know you've faced some of these challenges :)

For the Newspack Homepage Posts block it's common to create newspaper layouts with many instances of the block nested in Column blocks. However the Homepage Posts block does have a "grid" view option and a columns control:

[mapk]

Yea, swapping between a grid or list view is relatively straight forward as seen in the Latest Posts block that uses a toggle. But once the layout breaks from these, I imagine the HTML strays further from the simple columns/rows with repeated content. This means these patterns won't quite fit in with Style Variations but seem to tie in better with Patterns.

Dropping in patterns into the editor is a process of adding _more_ content, not updating existing content. So this makes it tricky. How do we swap patterns out for a specific block (ie Query block)? Right now, I'm not aware if that UI exists to pull into the Query block so I'll be exploring this in design.

Thinking through some of this...

Frame 66
This looks like it can be built with 3 different Query blocks (or variations) in 3 different columns. It can still be a pattern that a theme could provide, but just noting how it could be built by a user.

Frame 19
A simple grid view that can work similarly to the Latest Posts block.

Frames 57 & 53
These feel more like patterns/layouts that a UI for the Query block should support.

To provide some context on how I'm iterating, I don't think these patterns will live in either the Inserter panel (which adds to the content) or in the Sidebar Settings (small space already filled by settings). I'm exploring ideas around how to invoke these different patterns from the block toolbar. My first thought is to open a modal that displays the various patterns/layouts. I'll create another issue around this UI specifically.

[ianstewart]

I don't think these patterns will live in either the Inserter panel (which adds to the content) or in the Sidebar Settings (small space already filled by settings)

Do you mean patterns in general or specifically patterns that use a query block?

This pattern from the "Suite of Post Blocks" issue …

… seems like something someone would want access to when, say, editing a home page or perhaps (in a future version of the site editor) a 404 template ("Can't find what you're looking for? — check out my latest posts!") in the same way they may want to access patterns with headings, columns, and images for similar pages and templates.

[mapk]

Do you mean patterns in general or specifically patterns that use a query block?

Patterns specifically tied to the Query block. Currently, the Pattern library is great for adding new content to my page, but I think something like the Query block may need a way to change layouts _after_ it's been added to the page.

[hacknug]

I think something like the Query block may need a way to change layouts _after_ it's been added to the page.

Wouldn't block styles solve that issue?

[mapk]

Wouldn't block styles solve that issue?

I don't think so because in many cases we're not just changing the CSS. Some of these patterns may involve major HTML changes to accommodate the pattern. In the past, I believe we've reserved style variations to CSS only changes.

[ntsekouras]

I don't think so because in many cases we're not just changing the CSS. Some of these patterns may involve major HTML changes to accommodate the pattern. In the past, I believe we've reserved style variations to CSS only changes.

That's true. What @mapk is proposing involves changes in block attributes, that will of course result in different rendered components.