Creating a new query loop

GREYD.SUITE, Gutenberg, Gutenberg

GREYD.SUITE, Gutenberg, Gutenberg

Query Loop Block: The Underdog Among WP Features

Patrick Mittner

Patrick | July 4, 2022

  • Reading Duration: 7 minutes

The online world is always eagerly awaiting new features of WordPress 5.8, one of the most extensive WP versions in a long time.  

WordPress 5.8 introduced new features such as the template editor, block-based widgets, and the pattern directory, all of which support full site editing

The Query Loop block, implemented in July 2021, may not be in the spotlight compared to the features mentioned, but it is one of the most powerful features that the WordPress update offers.

What Is the Query Loop Block In WordPress?

The Query Loop block in WordPress doesn’t seem to be an immediately familiar term to everyone. Even with experienced users, this rather small but powerful feature often raises questions. Therefore, let’s establish some basic definitions.

The Gutenberg Query Loop block is a layout block that displays a dynamic list of posts and pages from your site on another site for easier navigation. It allows users to query a set of posts and view each one.

Query Loop Block in WordPress

You can think of the WP Query Loop block as an extended, more complex, and, above all, more powerful version of the Latest Posts block. The advantage is that the Query Loop block no longer requires any PHP code.

It’s an advanced block that allows you to display posts based on certain parameters. With various block patterns that are integrated into the setup, you can easily create a portfolio, for example.

The Query Loop block comes with six preconfigured layouts that you can choose from: 

  • Standard
  • Image at Left
  • Small Image and Title
  • Grid
  • Large Title
  • Offset

Sample Query Loop Blocks

The WordPress Query Loop block is characterized by two things: A PHP-free solution, and dynamic lists. 

You can have automatically updated lists on your homepage and other websites without programming skills. Instead, the Query Loop blocks work with HTML, JavaScript, or other scripting languages. 

For example, you can easily display the following with the Query Loop block:

  • Recent posts on your homepage
  • Posts with the same category or tag for further reading
  • Pages or custom content such as portfolios and testimonials
Query loop block on website

The good thing about this type of block editing is that working with Gutenberg blocks does not require any knowledge of the scripting languages ​​mentioned above. Despite everything, of course, you have to understand the basic functionality of the Query Loop blocks to be able to use them optimally. So, here goes:

How to Correctly Use the Gutenberg Query Loop Block

According to some forums, the use of the Query Loop block still leads to confusion. That’s why here’s a step-by-step guide on how to use the Query Loop block builder on your website.

  1. A Query Loop block

To use the WordPress Query Loop block, add the block to the page or post where you want the dynamic list to appear. There are 2 options here:

  • Click the “Add Block” button and select the Query Loop block. 
  • Or type “/query loop” and press Enter in a new paragraph block.
  1. Configuring a Loop block

Now that you’ve inserted the Query Loop block, let’s configure it so that the posts are displayed according to your specifications. Again, there are several options: 

  • Choose a pattern

After adding the block to the post or page, you will see different layout options. They show you how the dynamic list will be displayed. You can choose between carousel or grid format.

  • Start blank

Alternatively, you can also start blank. To do this, click on “Start blank” after inserting a Query Loop block. You have 4 different variants to choose from: 

  • Title and date
  • Title and excerpt
  • Title, date, and excerpt
  • Image, date, and title

Each query loop consists of several nested blocks. While customizing the look and layout is allowed, editing the content of the nested blocks is not.

  1. Editing the block

To edit the Query Loop block, first click on the block. A sidebar will appear. Then customize the block to choose the content to display or to change the look of the block.

How to Easily Customize the Look of the Query Loops

There are various ways to customize the query post in WordPress. One of the reasons why this works so well is that it consists of nested blocks that you can all rearrange and add to. 

Important: If you want to customize a block in the query loop, the changes will apply to all blocks of the same type. Therefore, using the list view in the top toolbar can be helpful.  

Here are some customization ideas to get you started:

  • You can change the width of various aspects in the WordPress loop post.
  • In addition, the alignment of the blocks within the query loop can be changed.
  • Also, you can easily insert blocks.
  • You can rearrange the blocks however you want by dragging and dropping or using the move functions.
  • By selecting the query loop and adjusting the Display Settings option in the block’s toolbar, you can change the number of posts listed.
  • The “Block Settings” option allows you to set different color options.
  • Additionally, you can insert images by adding the Featured Image block.

Advantages and Disadvantages of the Block

One of the most obvious advantages of the WordPress query loops is the fact that no programming skills are required to have automatically updated lists on your personal website and other websites. 

Query Loop blocks can be used to showcase blog posts, pages, categories, tags, and much more. It sounds wonderful at first. So what’s the catch? 

A Query Loop block has limitations when it comes to filtering options and design customizations. 

With WordPress 5.8, the query loops styling options are limited to basic typography and color customizations. Anything beyond that (e.g. changing the margins, or adding borders or shadows) is not possible in the current version.

Also, when it comes to filtering options, the current version isn’t ideal yet. This is because you can only show list items that match certain criteria, such as posts that belong to the same category or tag.

For example, if you have custom tags set up on your site, you won’t be able to sort by those values. As a result, you cannot take full advantage of your site’s custom structures because you are limited to displaying content in standard fields. 

In short: For the time being, you can only change the color and typography. And when it comes to filtering options, you can only sort by category, tag, author, or keyword.

The Perfect Add On for the Wp Query Loop Block

And what if we told you now that despite everything, you can already use WordPress Query Loops to their fullest potential without sacrificing a thing? Where the native WordPress features have shortcomings, that’s where we come in. 

GREYD.SUITE makes it possible. With the world’s first WordPress suite to natively integrate the Gutenberg block editor, you’ll find everything you need for a creative, fast website in one tool. 

GREYD.SUITE fills in all the gaps left by the Query Loop block:

  • You get significantly more filtering and sorting options, like a slider feature.

  • It can be easily combined with custom post types of all kinds.

  • Together with other GREYD features (like Dynamic Tags, Dynamic Templates, or Global Styles) you can create individual displays without any programming.

Vimeo

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren

Video laden

Whether it’s agile content management or global content, with GREYD you can access, customize, update and automate your content from anywhere.  

Since GREYD.SUITE completely eliminates the need for additional plugins, you will also be able to significantly increase your page speed compared to leading page builders.

GREYD.SUITE mit Block Editor

GREYD.SUITE offers you possibilities that go beyond the well-known WordPress standards. Design websites faster and according to your taste! 

Bottom Line

Although the Query Loop Block has only limited functionality so far, in combination with Full Site Editing it offers great potential for the near future of web creation. 

The plan of WordPress for Full Site Editing is clearly to ultimately allow users to create all parts of their websites without PHP, but by using blocks. 

This includes full control over page, archive, and 404 templates, as well as areas previously controlled by themes, such as headers and footers. Slowly but surely, WordPress will start to work more and more like a theme or page builder. 

Want to know what’s next for WordPress? You can actively experience the further development with GREYD and you will benefit in the long run.


Patrick Mittner

By Patrick

Patrick loves good texts. Preferably about topics concerning online marketing and WordPress. Having built websites by using well-known page builders on his own and being very experienced in the SEO industry, he is very familiar with any kind of problems regarding those plugins. This is the reason why he adopted GREYD’s mission to simplify work for web designers as well as agencies


Our Blog Topics

Development Events GREYD.SUITE Gutenberg Marketing News Newsflash

Newsletter

Subscribe now and don’t miss any news on WordPress and GREYD.SUITE:

Skip form
The email address should contain an ‘@’character and a valid domain with a period.
Form skipped

Latest Posts

GREYD wordpress for enterprise

Marketing

WordPress as a Solution for Enterprise and large Companies

Read More

Acropolis Athen

Events

We’re Excited to Sponsor WordCamp Europe 2023

Read More

WCDE2024

Events

WordCamp Germany 2023, a different kind of recap

Read More

web design proposal blog image

Marketing

How to create a web design proposal that no one can refuse

Read More

GREYD synchronize WordPress sites

Development

How to synchronize WordPress sites

Read More

Purple background with a screenshot of the GoDaddy webpage announcing the webinar in this post. In the foreground is Jakob Trost, a short-haired blond white male, wearing a yellow t-shirt with the GREYD logo.

Multisite demystified – free webinar

Read More

CMS

Development

Why WordPress is the best CMS for web designers

Read More

Web shop

News, Marketing

News, Marketing

WooCommerce vs Shopify: Which one is better for you?

Read More

Woman sitting at a table with her laptop, looking into it questioningly and raising her hands.

News

The 17 most common WordPress errors

Read More

https://greyd.de/wp-content/uploads/2021/09/Custom-Post-Types.jpg

Development

What are Custom Post Types?

Read More

Man sits in front of a screen and reads through a post.

Gutenberg

Pagebuilders are not sufficent for real webdesigners

Read More