query loop block with offset pattern

The preview shows odd posts in the first column end even posts in the second column.

Hi @enve I checked the page and it looks like you added Query Loop Blocks inside columns, each column will display posts depending on how you filtered the blocks.

May I ask what you want to achieve exactly ? How do you want to filter the posts?

Hi @thelmachido

I just selected the query loop, clicked “replace” and chose the offset pattern.

I was surprised that two columns were inserted, obviously they were a part of the pattern..

In the preview it looked like a timeline (without the line), that was what I had in mind

• This reply was modified 1 year, 8 months ago by Nico Verschuren.

I just selected the query loop, clicked “replace” and chose the offset pattern.

Hi @enve I think they might have been some mixup there. I will try and explain a few things before proceeding, the Replace option allows you to change how posts will be displayed. Next to replace you have the List View and Grid View – the grid view will display your posts in columns.

When using the Grid View the number of columns can be set in the block settings as shown below.

In addition, Offset?allows you?to skip a certain number of WordPress posts before starting output.

On my site I have 1 post so entering 1 would mean that nothing will be displayed.

I hope that clarifies a few things for you.

I was surprised that two columns were inserted, obviously they were a part of the pattern..

From my end, it looks like you have a query loop block inside columns it doesn’t look like a column that was added by the Query Loop.

In the preview it looked like a timeline (without the line), that was what I had in mind

I would suggest adding another query loop to the page, without adding any other block add the Query Loop and pick the design you would prefer. I checked the block on my site and everything is being displayed as expected.

Hi?@thelmachido

I like to clear this: the “offset” you mention is a different one

After I clicked “replace” I had to “chose a pattern” out of 6 possible patterns the last of the patternss had the name “Offset”. When I chose this pattern the original query loop block was replaced by two columns, each containing a query loop block….

I have cleared the customizations and the original loop is back..

What I am looking for, looks like a grid view with two columns. On the first line it should display post nr 1 on de left column with right column empty. On the second line it should display left column empty with post nr 2 on the right column. On the third line post nr 3 on the left column with right column empty, and so on.

Hi @enve – I see you’re using Twenty Twenty-Three. I added the Offset pattern from the Pattern library to a page in this theme, and this is what it looks like in the editor:

And this is what it looks like on the front end:

Is this the display you’re looking for?

If so, could you try repeating this process on a test page at Pages > Add New and provide a link to the new page here?

HI (@zoonini)

Here an update of the archive template

https://www.nicoverschuren.nl/category/berichten/

The result is better, almost what I hoped for..

on mobile it is different..

• This reply was modified 1 year, 8 months ago by Nico Verschuren.

@enve Glad it’s looking more like what you had in mind now.

If you’d like to remove the spacer blocks on mobile, when the posts go down to one column and the offset/staggered effect is not present, you can try this custom CSS:

/* Archive pages - hide spacers in Post Template block on smaller screens */
@media screen and ( max-width: 783px ) {
  .archive .wp-block-post-template .wp-block-spacer {
    display: none;
  }
}

While the Customizer is not exposed by default when using Site Editing, you can still access it manually by adding /wp-admin/customize.php after your URL. You can then add custom CSS in the Additional CSS area.

(@zoonini) Thank you !

I think the best solution would be to use a normal flex-grid with two columns and to precede every second post with two empty blocks. I have absolutely no idea how complicated that is, but I think that only in that case the order of the posts remains unchanged on smaller screens.

The developers working on the block editor are definitely thinking about how best to display blocks in the best way in various contexts and at various screen sizes by using a technique called “intrinsic design.”

For now, what I’m able to offer as a workaround is the CSS above, but down the road, there will hopefully be more integrated solutions.

I’ll go ahead and mark this thread as resolved, but feel free to start a new one if you have other questions!