WordPress Block Editor: Query Loop Block

WordPress Block Editor – Query Loop Block

WordPress Block Editor - Query Loop BlockIn 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 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.

Latest Posts
Think of the Query Loop block as an advanced 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.

Recipe page was made using the Query Loop block.
This recipe page was made using the Query Loop block.

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.
Adding a Query Loop block to a post or page.
Add a Query Loop block to a post or page using various methods.

This will add the Query Loop block to the content of your Post or Page in the location you have specified.

Query Loop block features.
Query Loop block added to post or page and default features.

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.

How the Query Loop block works.
How the Query Loop block works.

You can customize a Query Loop Block by:

  1. Selecting a Pattern
  2. Starting from a Blank
  3. 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.

Query Loop block features.
Query Loop block features.

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.

Query Loop block - Choose button.
Click the Choose button to configure the block’s option and settings.

Alternatively, you can start with a blank.

2. Start With A Blank

Click on Start blank after inserting a Query Loop block.

Query Loop block - Start blank.
Start with a blank Query Loop.

This will display a screen with different variations.

Query Loop block - variations.
Select one of these variations to start your Query Loop from scratch.

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.

List View - Query Loop block
Use the List View to edit and configure different Query Loop block elements.

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

Query Loop block editor.
The 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

Query Loop block - Change Alignment
Query Loop block – 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

Query Loop block - Display Settings
Query Loop block – 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.

Query Loop Block - List View
Query Loop Block – List View

Grid View

Selecting Grid View displays your posts in a grid view.

Query Loop Block - Grid View
Query Loop Block – Grid View
You can toggle between these options to see how the content displays using different views.
Query Loop Block - Switching between List and Grid views.
Switch between List and Grid views.

Query Loop Block Option

Click on the vertical ellipsis (3 vertical dots) to bring up additional options for configuring the Query Loop block.

Query Loop Block - Options
Query Loop Block – Options

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

Query Loop Block - Block Settings
Query Loop Block – Block Settings

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.

Query Loop block settings - Inherit query from template toggle on.
Query Loop block settings – Inherit query from template toggle on.
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.

Query Loop block - Filters
Query Loop block – Filters
  • 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

Query Loop block - Color
Query Loop block – 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 - Advanced Settings section.
The advanced section lets you add a CSS class to your block and assign an HTML element.

Query Loop Block – Additional Info

The Query Loop block can be converted into the following block types:

Query Loop: Change block type of style.
Query Loop: Change block type of style.

Congratulations! Now you know how to use the Query Loop block to insert dynamic content into your site’s posts and pages.

Query Loop block.
Query Loop block.

***

Print Friendly, PDF & Email

Terms Of Use | Privacy Policy

Scroll to Top