WordPress Block Editor – Query Loop Block
In this tutorial, you will learn about using the Query Loop block – an advanced block that lets you display posts based on specific parameters and do complex things like creating a portfolio or a page with your favorite recipes.
You will learn what the WordPress Query Loop block is, what it does, and how to use it.
Refer to the tutorials below if you need help with this section:
- What’s New In WordPress – WP 5.8
- WordPress Block Themes
- The WordPress Block Editor
- How To Use WordPress Blocks
- Latest Posts Block
- Video Course – WordPress Gutenberg
***
What Is The Query Loop?
The Query Loop block is a layout block that displays a dynamic list of posts and pages from your website on a web page for easier navigation.
With the Query Loop block, you can display things like:
- Recent posts on your homepage (or any other page on your website).
- Posts filtered by specific categories or tags for further reading.
- Posts, Pages, or Custom post-type content such as portfolios, testimonials, etc.
The Query Loop block also lets you display dynamic lists (i.e. automatically updating lists) on your homepage and other web pages filtered by a category, tag, author, or keyword without any coding skills required.
You can also change the block’s color and typography and use plugins to extend the functionality of the block, such as combining dynamic content display with more advanced features.
You can think of the Query Loop block as an advanced version of the Latest Posts block.
The Query Loop block, however, is a lot more customizable. You can use different pre-configured layouts and block patterns to create a specific layout for your web page, such as a blog posts page, portfolio page, recipe pages, etc.
We recommend watching the Query Loop block video in the WordPress updates section of our tutorials for an overview of this block.
How To Use The Query Loop Block
Follow the step-by-step tutorial below to learn how to add, edit, customize, and use the Query Loop block on your website.
If you need help with these steps, see our tutorial on How To Use Blocks.
Adding The Query Loop Block
You can add the Query Loop block where you want a dynamic content list to display on a page or post using the following methods:
- Enter a forward slash and begin typing any portion of the phrase “/query loop” then hit enter in a new paragraph block.
- Click the Add block button (+) and select the Query Loop block from the menu.
- Click the Toggle inserter button [+] in the Block Editor Toolbar and select the Query Loop block from the block library.
This will add the Query Loop block to the content of your Post or Page in the location you have specified.
The inserted block displays a number of default features, such as:
- Block Editor – This lets you configure and adjust your Query Loop block settings.
- Previous/Next Pattern buttons – This lets you cycle through all the available patterns for your block.
- Views – Displays your list in Carousel or Grid mode. The default block setting is Carousel.
- Start Blank – This lets you select a pattern from pre-configured layouts.
- Choose button – This lets you customize options and settings for your selected pattern.
We’ll cover all of these features in more detail below.
Once you have inserted the Query Loop block, the next step is to configure it.
Configuring The Query Loop Block
After inserting the Query Loop block into your content, you can configure the block to display posts according to your specifications.
You can customize a Query Loop Block by:
- Selecting a Pattern
- Starting from a Blank
- Editing the Block
Let’s go through these options:
1. Select a Pattern
After adding a Query Loop block to your post or page using your chosen method, you’ll see a number of different patterns and layout options for displaying your dynamic list.
Scroll through the available patterns using the Previous/Next Pattern buttons and choose whether to display these layout options using a carousel of options (default) or view all options in a grid format. You can toggle which method you prefer at the top of the block.
Select the option you want to use by using the “Choose” button in the carousel view or by selecting the option you want in the grid view.
Alternatively, you can start with a blank.
2. Start With A Blank
Click on Start blank after inserting a Query Loop block.
This will display a screen with different variations.
There are four variations to choose from:
- Title & Date
- Title & Excerpt
- Title, Date, & Excerpt
- Image, Date, & Title
Each query loop block comprises multiple nested blocks, such as the Post Title block and Post Excerpt block. While customizing the appearance and layout is allowed, editing the nested blocks’ content is currently not possible.
3. Editing the Block
To edit the Query Loop block, click on the block, and a sidebar will display. This lets you customize the block by choosing the content you want to display or changing the appearance of the block.
Block Configuration
A Query Loop block is basically made up of nested blocks that you can rearrange, add to, and more, so there are a number of ways to customize it.
Note: When you customize one block in the Query Loop block, any changes you make will apply to all blocks of the same type. We strongly recommend using the List View found in the toolbar, therefore, while customizing the Query Loop block.
Some of the things you can do to customize the Query Loop block, for example, include:
- Change the width of various aspects of the Query Loop block.
- Change the alignment of blocks within the Query Loop block.
- Add blocks into the Query Loop block, like Post Author or Post Excerpt.
- Rearrange the blocks by dragging and dropping or using the moving tools.
- Change the number of posts listed by selecting the Query Loop block and adjusting the Display Settings option in the block toolbar.
- Set color options using the Block Settings options.
- Add featured images by adding the Featured Image block.
Query Loop Block Tools, Options & Settings
The Query Loop block includes tools, options, and settings for:
- Query Loop Block Editor
- Query Loop Block Options
- Query Loop Block Settings
- Controls for the different blocks included in the Query Loop block. Each block has its own block-specific controls that allow you to manipulate the block right in the editor.
Query Loop Block Editor
In addition to the options for changing block type and controls for dragging and moving the block up and down on the page, the block toolbar for the Query Loop block includes the following options:
Change Alignment
- None – Keeps the block alignment as is.
- Wide width – Increases the width of the Query Loop block beyond the content size (up to a defined maximum width).
- Full width – Extends the Query Loop block to cover the full width of the screen
Display Settings
This option lets you control the following:
- Items per Page – Choose how many posts you want to show within the Query Loop block.
- Offset – Enable the Query Loop block to skip a certain number of WordPress posts before starting output.
- Max page to show – Limits how many pages you want to show. To show all pages, enter a value of “0” (zero).
List View
Selecting List View (default) displays your post in a stacked list.
Grid View
Selecting Grid View displays your posts in a grid view.
Query Loop Block Option
Click on the vertical ellipsis (3 vertical dots) to bring up additional options for configuring the Query Loop block.
To learn about using the different options in the Options section go here: How To Use Blocks
Query Loop Settings
In addition to the options found in the block editor toolbar, the Query Loop block includes specific block customization options in the editor sidebar. (If you cannot see the sidebar, click on the ‘cog’ icon next to the Publish button to display these).
Block Description
This section provides a description of the block. It also includes a link that when clicked on, will create a new post based on the settings specified for this feed.
Layout
Toggling the Inherit default layout on switch applies the default layout of your theme to this block. Alternatively, you can customize the width for all elements assigned to the center or wide columns.
Settings
This section lets you customize a number of important settings for the Query Loop block:
Inherit query from template
This is an option that you can toggle on and off, depending on whether you want to customize the query that the loop relies upon. Otherwise, WordPress will rely on information from the current template being used to determine which posts appear.
If you toggle it on, certain customization options will be hidden. If you toggle it off, more customization options will appear.
Post type
Different content types in WordPress are divided into collections (also called taxonomies) called “Post types.” Typically, content in WordPress is divided into posts and pages, but installing various plugins could add more (e.g. products, testimonials, etc.). This setting lets you select the post type to display in the block.
Columns
Use the slider or enter a value in the field to specify the number of columns for the block (min = 2, max = 6).
Order by
Select one of the following ordering options from the dropdown menu:
- Newest to Oldest (default)
- Oldest to Newest
- Alphabetical (A to Z)
- Alphabetical (Z to A)
Sticky posts
This option lets you choose between three options:
- Include (default) – Displays sticky posts.
- Exclude – Removes sticky posts.
- Only – Shows only sticky posts.
Filters
This option lets you further customize which posts are being displayed in the block.
- Categories – List any categories you want to be included separated by a comma.
- Tags – List any tags you want to be included separated by a comma.
- Author – Select from a list of all authors.
- Keyword – Enter any keywords you want to be included.
Note: If you can’t see this section, try toggling the “Inherit query from template” setting to off.
Color
The color options for the Query Loop block impact the entire Query. Keep in mind that you can also customize the individual blocks that are within the Query Loop block too.
- Text color – Controls the color of any text.
- Background color – Controls the overall background of the block.
- Link color – Controls the color of any links.
Advanced Settings
The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit. It also allows you to assign an HTML element.
Query Loop Block – Additional Info
The Query Loop block can be converted into the following block types:
Congratulations! Now you know how to use the Query Loop block to insert dynamic content into your site’s posts and pages.
***
Updated: July 5th, 2024