The WordPress Gutenberg Query Loop Block - a beginners guide

The WordPress Gutenberg Query Loop Block is the most important Gutenberg Block, as it lets us create custom and dynamic pages, for example, a custom blog page.

In this video, I'll show you how to use the Query Loop Block to create the following dynamic pages.
1) Custom Featured Post Blog Page template
2) Custom Masonry Blog Page template
3) Custom WooCommerce Shop Page template

What is the Query Loop Block?
The Query Loop block is an advanced block that allows you to display posts based on specified parameters; like a PHP loop without the code. You can think of it as a more complex and powerful Latest Posts Block. With various block patterns integrated into the block setup, you can do things like create a portfolio or a page full of your favorite recipes.

Timeline
0:00 - Intro
0:45 - The pages we are going to create
0:47 - Featured post template example
0:55 - Masonry Blog template example
1:05 - Custom Woocommerce Shop page template example
1:18 - Full Site Editing requirements
1:35 - How the Gutenberg query loop block works
1:45 - How to Build a custom blog page template with the Gutenberg query loop block
8:11 - How to build a custom masonry blog page template with the Gutenberg query loop block
11:46 - Custom WooCommerce Shop page with the Gutenberg Query Loop Block

[primewholeness]

I just saw your other video on FSE...and now this. I didn't know this block existed. I had created a couple of custom post types and taxonomies to go with them, and I was trying to figure out how to best disoplay them on the frontside... I created a new page, chose this block and bam! LOL...eazy reazy. Wow. I was copy the archive and single posts pages into my child theme for each custom post type... It looks like with this I can kiss that goodbye...wow. Thanks! This one block is everything I was looking for. Thanks.

[Sxzod]

That intro rap caught me off guard lol. Amazing tutorial!

[menaregood]

Yet another informative and clear tutorial about 5.9. Can I subscribe twice?? lol

Just seeing this video has shown me how I can easily create a blog on my site that features the last three posts of multiple authors. Thank you Sir!

[mikeinsw]

Good one Jamie.
There are many plugins with a Query Loop type block, but having used WP for over 15 years (although I still consider myself a WP newbie) one of my current aims is to reduce plugins as far as possible; the Query Loop Block covers one of the design patterns I like.
I do find it doesn't yet have enough flexibility. For example the Post Template allows Post elements to be included, but the styling is limited, so achieving, say, a post title and post extract overlaying the post featured image doesn't seem straightforward.
Anyway, keep on posting and I'll keep on liking!

[mehrshadpiano]

Hey. Thanks for the video. My theme doesn't have a template to load and shoe Gutenburg. How can I write a simple PHP template that lods the Query loop block on the page?

[gethsemane-]

Thanks for this tutorial, I was wondering why I had only three result showing. I would have never guessed on my own the setting is via the small icon, I was looking on the block panel on the right side. They didn't make some of these options so obvious...

[KandasRodarte]

Thank you so much for this tutorial. It was exactly what I needed to edit my blog page!! Question: I host a podcast and my podcasts are in a category called podcast. Is there a way to add a podcast player to a query loop for the podcast category?

[spoolyz]

Thanks for the info, how difficult would it be to create a trending query loop? I currently have a main block with one article/excerpt on the left and recent articles on the right with no excerpt

At the bottom I want to create a trending query loop that goes from left to right with about four posts with no excerpts.

Im having a hard to finding where to start to make them queried by Trend/clicks

[kanishindia]

Great... Is there a way to display both products and posts in a customised design in a single search result page

[stuartmorley]

When I use the query loop I don't get the option in the toolbar that you show at 7:20 and can't see all the block options.

[ujo]

NIce video :D, is there any way to enable searching, filtering and sorting for visitors? Id like to make archive with pdf files that could be searched, filtered and sorted by tayonomies. This could be useful also for produst listing.

[MommeKrahn]

Hi Jamie, great video once again, thanks a lot for this! One question regarding the masonry layout: would you please be able to explain how / where to put the pagination for the query loop in case of those two columns? Thanks!

[ramimer]

Kind of new to the blocks. Very well explained. One question if I may: The query loop, is it possible to use it to pull single services ( from pages) instead of blog items, and place them on the home page as masonry? Do you know of an example that I have to look at? Thank you again and keep up the awesome work

[Kris-ygub]

does it only work with posts? I feel like this would work for services pages where you have a repetitive grid on things you want to show.

[HullioGQ]

Thank you for this tutorial. Quick question; I know this was made over 2 years ago but does Query Loop support ACF or just posts and pages?

[shaolin]

Hey there! Thank for video! Gutenberg loop is have some limitations when I want to reproduce html design. Is it possible to create custom design for CPT and use it in loop? For instance I can create element in Kadence Theme. But I can't use this design for loop. Do you know any solution on this?

[OtsoO]

These new blocks are pretty nice for bloggers/e-commerce-shop users who are tech savy, but for your standard WP developer it doesn't add anything. All these extra settings make these new blocks just unusable in client projects, because you don't want to add such flexibility which could break the design. Why would anyone want options for custom font-sizes and line-heights? Typography isin't something what you want to change even on yearly basis. Highlight colors are nice though. Just sticking with fewer options, would make more sense to me, because I don't really understand who are these features made for.

[rmcellig]

Can this block be used for podcasts instead of blog posts?

[stuartmorley]

Great Block and has the usual Guternberg feature of being 60% useable. Why on earth would you create a query loop that doesn't allow multiple tags (using and AND operator). If using multiple the operator is OR and no way to change it, It seems these blocks are created by designers with no idea of how the real world works. This is so typical of gutenberg block, some of them are missing simple things and then we get all excited when another plugin (which usually breaks things) give us borders or something just as simple. You only have to take laying out the product page and how long that took. The money I've spent on plugins that took ages to get working only to then break later on is frightening. Gone back to the standard woocommerce ones as they work.