Morteza Heidarpour Morteza Heidarpour

Understanding the Query Block and Its Importance in Site Editing

Understanding the Query Block and Its Importance in Site Editing

I really don’t understand this Query block even though it’s been mentioned in several Tavern posts. My eyes seem to gloss over when reading about it – ha!

Is it important that regular WordPress users understand this block, or is it really a block for developers?


I have given the Query block a lot of attention as of late. On occasion, I may have even called it one of the largest hurdles the Gutenberg development team has needed to jump before block-based themes become a reality. However, the “query” WordPress term is not something all users or Tavern readers are familiar with. It is a concept as old as WordPress and generally something that only developers needed to familiarize themselves with. When Full Site Editing lands in WordPress, the new block will expose the Query to far more users as part of the site editor interface.

It is a block that is currently a part of the Gutenberg plugin but not WordPress core. However, at some point in 2021, more and more end-users and developers will be working with it.

In WordPress terminology, we are really talking about two things, the Query and the Loop. The Query is defined by a set of arguments or options that determine what posts to display. The Loop is the part of the machine that “loops” through the queried posts and displays them, one after another. The Query asks for posts; the Loop cycles through them.

Traditionally, theme authors were responsible for adding the Loop code to their templates, which used the global Query that WordPress supplied. Themes could also create custom queries, such as adding a posts list widget, categorized homepage post sections, or anything. And, “posts” can be anything from normal blog posts to WooCommerce products to the latest topics from the bbPress plugin.

The Query may be one of the single most important aspects of WordPress. In essence, it is the engine behind displaying the content of every page on the site. Without it, all WordPress sites would simply be a header and a footer.

The Gutenberg plugin provides two blocks for the Query:

  • Query: The outer block for setting the options for which posts will show.
  • Query Loop: The inner block, which is automatically added when using Query.

Currently, users can select between four fairly standard variations when first adding the Query block. They are combinations of the post featured image, title, date, and excerpt.

Initial Query block variations in the WordPress editor.
Query block variations.

These can be further customized via the block options panel in the sidebar. Users can also find “view” options in the toolbar for selecting between List and Grid views. The List view is the traditional list of posts flowing vertically down the page. The Grid view displays posts in two to six columns.

Grid view of the Query block in the WordPress editor.
Grid view of posts while using the Query block.

The Query block has a basic set of options for which post types to display and how to order them. It has filters for categories, tags, authors, and keywords. The block is not as robust as what is possible with code yet. It is missing some basic options like a post number limit and nearly all of the more advanced parameters. However, it is a promising starting point.

The more exciting aspects of this feature for end-users may not be the Query block at all. It is customizing the blocks that go inside, which display things like the featured image, post title, and more.

As a former theme author, I cannot count the number of times users have asked me about customizing some aspect of the posts layout. Having them dive into code to make minor changes, such as removing the post author name or displaying the category in a different place, was not an ideal experience. The site editor will put this power directly into each user’s hands.

Customized version of the Query block while in grid view.
Adding post-related blocks to the Query block in Grid view.

The comment by Marcus was on the Tavern’s post covering Gutenberg 9.6. The latest version of the plugin introduced global query inheritance for the Query block. This means that theme authors can now replicate the content layer in block-based themes. Previously, pages like archives and search results would simply display the latest posts when a theme used the Query block. Now, each of those pages can display the correct posts.

However, the Query block is so much more than that. In the hands of users, it can be a powerful tool for creating custom output on a homepage — think newspaper-style categorized sections. Users can also create post lists in a sidebar, such as the latest forum replies or products. Theme authors can offer templates or block patterns with unique designs or as starting points for end-users to modify. There is no shortage of possibilities.

Go to Source

Share Post :