Skip to content
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

Open
iamtakashi opened this issue Sep 18, 2020 · 21 comments
Open

Query Loop: More multi-column layout options #25462

iamtakashi opened this issue Sep 18, 2020 · 21 comments
Labels
[Block] Query Loop Affects the Query Loop Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Enhancement A suggestion for improvement.

Comments

@iamtakashi
Copy link

iamtakashi commented Sep 18, 2020

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.

Screenshot 2020-09-18 at 16 45 16

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

Screenshot 2020-09-18 at 17 01 16

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?

@ianstewart ianstewart added [Block] Query Loop Affects the Query Loop Block [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. labels Sep 18, 2020
@aristath
Copy link
Member

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
Copy link
Contributor

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: #24934

@mtias
Copy link
Member

mtias commented Sep 25, 2020

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

@kellychoffman
Copy link
Contributor

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

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

@jeffersonrabb
Copy link
Contributor

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:

Screen Shot 2020-09-25 at 4 36 24 PM

@mapk
Copy link
Contributor

mapk commented Sep 29, 2020

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.

layouts

@ianstewart
Copy link
Contributor

ianstewart commented Sep 29, 2020

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 …

image

… 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
Copy link
Contributor

mapk commented Sep 29, 2020

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
Copy link

hacknug commented Sep 30, 2020

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
Copy link
Contributor

mapk commented Sep 30, 2020

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
Copy link
Contributor

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.

@mtias mtias added the [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi label Jul 27, 2021
@cr0ybot
Copy link
Contributor

cr0ybot commented Jan 4, 2022

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 #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
Copy link
Author

Screenshot 2022-06-29 at 14 59 56

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
Copy link
Contributor

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.

Screenshot 2023-08-02 at 17 07 12 Screenshot 2023-08-02 at 17 07 36 Screenshot 2023-08-02 at 17 11 36 Screenshot 2023-08-02 at 17 12 03

@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Sep 8, 2023
@jordesign jordesign changed the title Query Loop in Multi-column? Query Loop: More multi-column layout options Sep 8, 2023
@vncntdvrs
Copy link

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
Copy link

Screenshot 2023-09-13 at 16 34 50

@cr0ybot
Copy link
Contributor

cr0ybot commented Oct 6, 2023

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
Copy link

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

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
Copy link

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
Copy link
Contributor

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Query Loop Affects the Query Loop Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests