The ins and outs of one of the most powerful features in WordPress 5.8 – WP Tavern

0


WordPress 5.8 is live on July 20, just 10 days away. The release is designed to be the most feature-rich update the community has seen in quite some time. Block-based widgets, template directory, WebP image support, template edit mode, and many other tools are almost ready to go to the general public.

However, one of the most powerful features is the Query Loop block.

If you are unfamiliar with the terms “query” and “loop,” these are essential concepts in WordPress. Traditionally, they were only needed for theme and plugin development. However, thanks to the Query Loop block, users will be exposed to what is, for all intents and purposes, the backbone of how WordPress displays posts on a site’s front-end.

Questions ? Loops?

Not everyone will be immediately familiar with these developer terms that WordPress implements in the user interface. For theme and plugin authors, these are everyday concepts. However, even some users who have been using the platform for a decade have never been exposed to it. So we should set up some basic definitions.

The term “query” is simpler than you might think. It simply means to “query” or “request” messages from the database based on a defined set of options. For example, one can try to get the last 10 blog posts.

“Loop” is an even easier concept to understand. It means to “loop” or “step” through each message queried and output it. Technically, a developer could do something other than display the messages during this process, but we’re only concerned with what’s printed on the screen.

The two items combined become the Query Loop block. It allows users to request a set of messages and view each one.

There is also a Post Template block, which throws a wrinkle into all of this. Aside from the overused word “template” in WordPress for various features, this is a new method for an old concept. Traditionally, WordPress theme authors would write all HTML code and call specific template tags in the queried posts loop to display things like post title, author, content, and more. It’s easy to do in a PHP file. However, in the block editor there had to be a new way to group these elements. The Post Template block acts like this group, housing the items that users want to view in the query loop.

WordPress also offers a variant of the Query Loop block called Posts List. They do the same, but the latter has a more user-friendly title than the former. The only problem with this variant is that when inserted the user always sees the same “Query Loop” block title. There is a ticket to fix this issue, but it is unlikely to be integrated into WordPress 5.8.

Query Loop Pattern Inserter

When first inserting a query loop into the editor, WordPress will introduce users to another feature from version 5.8: inserting patterns. Instead of having immediate access to interact with the block, users can choose from a list of predefined templates.

By default, the inserter is a carousel that allows users to cycle through models individually:

Query Loop Pattern Inserter: Carousel View.

However, they can switch to a grid-based layout and display all of the templates at once:

A two column grid view of the available templates to insert into the WordPress editor.
Query Loop Pattern Inserter: Grid View.

WordPress 5.8 is set to ship with six default query loop templates, unless more are added in the coming days:

  • Standard
  • Image left
  • Small image and title
  • Wire rack
  • Great title
  • Offset

I don’t particularly like the default patterns other than the “Headline” (shown in the screenshots above with the black background and white text). For this block to shine, users will have to create their own designs or wait for theme authors to start putting together custom query loop templates.

And, this is how it should be. Core WordPress should provide some basics while letting our community of theme designers showcase their craft.

A query loop template in the WordPress editor that displays the post date, title, and snippet.
A simple personalized list of blog posts.

It is also an opportunity for theme authors to offer alternatives to their custom page template designs. It is not time to throw them away completely. However, it’s a way to start recreating old ideas in the block age, such as building ecommerce plugin integrations, portfolio grids, and more. Some of the tools are still limited (we’re getting to the next ones), but there is enough groundwork for exploring, helping users experience WordPress in new ways.

Blocking options

The Query Loop block has several options that allow users to customize the posts to to question the database for:

A Query Loop block inserted in the WordPress editor.  Both the blocking options sidebar and the display settings pop-up window are open.
Query loop block and its options.

In the block toolbar, there is a “Display settings” button. When you click on it, it creates a pop-up window with options for the number of posts to display:

  • Objects per page: Number of publications to display per page
  • Offset: Number of messages to ignore
  • Maximum number of pages to display: Limit pages (this requires the use of one of the request paging blocks)

The “Parameters” panel in the block sidebar of the query loop has several secondary options. Users can enable “Inherit query from model” to use WordPress global query, but this is mostly unnecessary for WordPress 5.8 users without the Gutenberg plugin enabled and a block-based theme. For now, you’ll almost always want to turn this option off. This will give access to a multitude of new choices, such as:

  • Position type
  • Ordered
  • Filter panel for categories, tags, author and keyword

The Parameters and Filters panels are the most refined elements of the Query Loop block. The development team struck a smart balance between ease of use and the dozens of query-related parameters available through code. It provides users with a ton of power right off the bat, but should be flexible enough in the future for plugin authors to expand.

The publication model

When inserting a query loop, the editor automatically adds its internal Post Template block. This is where most of the magic happens. Users can directly change the way their posts appear. Primarily, they will do this by adding blocks from the Theme category, many of which are intended for the output of data related to posts.

Insert block open in the WordPress editor, showing the blocks of the Theme category.
Blocks sorted by topic for dynamic data output.

Almost all other blocks are available for insertion here as well. However, many of them will not be good candidates for use in the request loop.

One thing that might not be immediately obvious is that changes you make to one post in the Post Template block will affect all others. So if you add a Video or Buttons block here, they will be the same. Keep in mind that this is a “template” for designing how all of the posts in the query loop will appear.

The downside to customizing the output of the Post Template block is the lack of design options for some blocks. It’s easy to create something like a simple message list:

List of articles in a single column with their titles and publication dates.
List of articles with titles and dates.

You can also create a layout like a portfolio projects grid, as shown in the following screenshot. However, the Post Featured Image block currently doesn’t have sizing controls, so you’re stuck with your theme’s default post-thumbnail size – assuming it’s actually saved. Experiences may vary. Savagely.

Three column post grid in the WordPress editor.
Build a basic portfolio grid.

For things more advanced than changing typography, colors, and spacing, users will have to wait for WordPress 5.9 and beyond. However, theme authors still have the Block Styles API available to them. Personally, I can’t wait to see what they do with it.


Leave A Reply

Your email address will not be published.