Query Loop: More multi-column layout options

[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.

[cr0ybot]

While multiple query loops is a solution, I think it's a terrible one and does not work well with the pagination block.

I'd like to see the ability to add additional Post Template blocks within a Query Loop in order to create alternating or irregular loop layouts. Currently you can actually do that, but the entire loop is repeated per Post Template. It would be nice if the Query Loop block would follow the order of the Post Template blocks within until it reaches the end and then repeat. I realize that currently this is wishful thinking since it seems you can add just about any block within a Query Loop (outside of a Post Template), which I guess makes sense if you want to do something crazy like display the pagination vertically on the side using the Columns block. Perhaps the Post Template block itself could actually transition into a container of multiple Post Templates, similar to how the original Button block became Buttons?

Edit: I'd like to note that I started going down the road of using a class name to alter the columns blocks to alternate post images left and right, but the way the Columns block styles are written makes that harder than just flex-direction: row-reverse due to complicated selectors adding margin rules (somewhat related to https://github.com/WordPress/gutenberg/issues/35848).

Edit 2023-10-06: The columns block is no longer quite as difficult to work with, and flex-direction reversal using a block style with something like the Sass below works quite well.

.wp-block-query {
    &.is-style-order-alternate {
        .wp-block-post:nth-child(even) {
            .wp-block-columns {
                flex-direction: row-reverse;
            }
        }
    }
}

I've added more thoughts below in a new comment regarding the advanced layouts others are looking for.

[iamtakashi]

I was trying to build a similar layout to this example for a blog, (featured images align at the bottom, everything else aligns at the top) but, as @cr0ybot said above, the pagination didn't work because I needed to use multiple Query Loop blocks to achieve the layout. It'd be nice to be able to create nice blog layouts freely while the pagination works as expected.

[MaggieCabrera]

I was about to open an issue to express the same situation. I will simply share a few layouts that I've encountered that would benefit from more granular control of the blocks within the query block. Also here to note that not only multiple query loops break the possibility of pagination, they are no longer an option if you use inherit query from template because the offset option will not be applied anymore.

[vncntdvrs]

Hi all, I was just running into the same issue and was able to get a multi column setup by addressing the 'post id' with below piece of code.

.post-461 { grid-column: 1 / span 2; }

[vncntdvrs]

[cr0ybot]

Though it can be frustrating at times, I am overall happy with how things have been evolving to fix underlying issues (like using gap instead of margins in the columns block) instead of giving us overcomplicated solutions with multiple blocks and layouts. I'd argue that what I was suggesting a year ago above regarding additional post template blocks is the wrong way of handling this, since you'd be outputting different markup per item. Instead, I think a better approach is to use advanced CSS to alter the layout via flexbox or grid, while keeping the markup the same for better accessibility.

Most of the screenshots between this comment and my previous one should be accomplishable with a custom block style.

For @iamtakashi's case, I'd suggest a block style that sets an aspect-ratio on the post featured image block and uses object-fit: contain and object-position: bottom.

For @MaggieCabrera's examples: image 1: Similar to the one above, just use an nth-child selector on .wp-block-post and add a rotation transform. images 2-4: These should all be doable with display: grid on .wp-block-post-template. Again, use the nth-child selector on .wp-block-post to set specific styles for each, such as spanning rows or columns, etc.

For @vncntdvrs: Same as 2-4 above, instead of using a post id class which will break as soon as you add a new post, try nth-child selectors.

I think it would be possible for core to provide some advanced layouts like the above, but I expect that these things will be the purview of plugins and block patterns more often than not.

[dhanson-wp]

I'm running into a similar scenario and struggling to find a solution. I want to keep the query loop grid with a standard layout of image/title/excerpt, but if any posts don't have a featured image there are huge gaps because posts flow to new rows. I would like to see posts flow up in a column to remove the empty space.

I think I'll try the columns with separate query loops, even though pagination won't work. I'll have to live with it for now and have a set number of posts displayed without pagination, then a button linking to all posts and using a different layout. Not ideal.

[jabeztadesse]

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

Tell me more about number 2, were you able to implement that? And how?

[davewhitley]

Masonry should be becoming standard in browsers soon-ish. If you'd like to contribute how it works (I think maybe we can have a big impact!). I think this would solve the masonry problem at least.

https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/

[dhanson-wp]

Tell me more about number 2, were you able to implement that? And how?

@jabeztadesse I was able to implement this, but it is not very flexible or efficient. I had to create 3 columns. Each column has its own query loop. I chose a random number of posts to display for each column—4 or 5 I think. The second column I then set the post Offset to 4 and the third column to 8 or 9.

This does work, but it is limiting. Post pagination doesn't work because it is three different query loops instead of one. I mitigated the pagination by just adding a call to action to view all posts.

Also, you are not guaranteed a consistent layout for your posts, so it looks empty at the bottom depending on which collection of posts is in each column.

I did come across this video for a Masonry "hack" that uses the List option for Query Loop instead of Grid. This is how masonry layout could work fluidly, but it requires some css. It would be nice if Masonry was just an option in the Query Loop toolbar.