-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Query Loop: More multi-column layout options #25462
Comments
I can think of 2 options:
|
Yes, for now these are some options. The simple change of layout (grid/list) will be supported soon. |
cc @jeffersonrabb as well, as I know you've faced some of these challenges :) |
@mapk: these would make some great use cases to design against. |
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: |
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 Frame 19 Frames 57 & 53 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. |
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. |
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. |
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. |
That's true. What @mapk is proposing involves changes in block attributes, that will of course result in different rendered components. |
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 Edit 2023-10-06: The columns block is no longer quite as difficult to work with, and .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. |
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. |
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 { |
Though it can be frustrating at times, I am overall happy with how things have been evolving to fix underlying issues (like using 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 For @MaggieCabrera's examples: 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 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. |
Tell me more about number 2, were you able to implement that? And how? |
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/ |
@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 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 |
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?
The text was updated successfully, but these errors were encountered: