Gutenberg Query Loop Block – WPQuickies

In this lunchtime #WPQuickies, I’ll be looking at the new WordPress Editor “Gutenberg” Query Block.

What Is A WordPress Query?

A WordPress query is a call to retrieve information from the connected database.

A simple illustration of this would be the WordPress blog page.

The query may be to get the latest 10 blog posts by publish date.

Queries can be more complex in nature and not limited to the built-in WordPress posts and pages.

What Is The WordPress Loop?

The WordPress loop often refers to the PHP code in a theme template that queries retrieves and outputs blog post data to the screen.

A simple block of code to illustrate this would be:

<?php
while ( have_posts() ) :
    the_post();
   
    the_title();
    the_excerpt();
endwhile;
?>

The code above loops through posts and outputs the title and excerpt for each.

There’s actually quite a lot going on here.  

Let’s zoom out have a look at the structure.

Let’s quickly break this down.

• Main Query:
  This is the main query that the URL is running and is usually based on the code in a template.  In this instance, it’s displaying the latest blog posts.
  Query information is stored in a global variable called  $wp_query global.
• While Loop:
  This is the line while ( have_posts() ) : and the line endwhile;
  While the condition have_posts() which means there are still more posts to process, run the code in between while and endwhile;
• Post Globals:
  This is set by using the_post() function and basically does two things.
  1. Advance the post counter by 1 (to get the next post or return nothing for no more posts)
  2. Sets up the variables to get data content out of the post
• Template Tags:
  The functions the_title() and the_content() output the post content to the theme for it to be displayed on the screen.

Phew!

There’s actually a lot going on for a basic query.

Of course, real templates have much more complicated loop statements, but, traditionally this is what you have to do to display posts on a theme template page.

The example I just ran through was to illustrate how complex the process of displaying your latest blog posts on a page can be.  

Lots of stuff to consider and PHP code to write that usually requires the engagement of a developer.

The Query Loop Block

WordPress 5.8 includes the new Query Loop block that does the same thing as we’ve described above, but simply and visually.

If you’ve used a page builder like Elementor or Beaver Builder then you’re probably already familiar with how these types of blocks work.

You can find the Query Block in the theme section of the blocks navigation area.

When you add this to your post, you will need to choose a variation or style to format your Query Loop block.

There are currently four styles to choose from:

• Title and Date
• Title and Excerpt
• Title, Date and Excerpt
• Image, Date and Title

I’ve chosen the Title, Date and Excerpt variation, just as an example.

The Query Loop block options are Color, Settings, Filters and Advanced.

Color

The colour controls are pretty basic, allowing you to change the text and the block background colours.

It would be nice if you could control other HTML elements inside the block like links and hovers and H2’s etc.

Settings

The settings are is the building blocks of the query loop block.

From here you can build up your query, selecting the post type and other arguments to determine what results come back.

You can build your own query or inherit the query based on the template for the post.

For example, if you were modifying a search results template then you could inherit the query from that template, so your query would be the set of posts returned by the search.

If you were editing a category archive the default query would inherit the posts returned in the categories selected.

Filters

The filters settings allow you to change the output of the post depending on your selected categories, tags and authors.

Advanced

The advanced block is pretty standard and allows you to choose the HTML element wrapper and any additional classes to target the block with.

WordPress Full Site Editing

So what does this Query Loop block mean in the grand scheme of things for WordPress?

Previous to WordPress 5.8, the blocks have been purely design-focused.

The Query Loop block is the first attempt in being able to edit the structural theme elements of a WordPress website.

You may have heard the phrase “Full Site Editing” being banded around.

The goal is to provide ways in the WordPress core app, to be able to modify everything that traditionally PHP developed themes provide.

We’re talking about navigation, header, footer, sidebar, widget areas – everything.

That functionality has existed in page builders for a long time, so the concept is nothing new, it’s just never been applied within the WordPress core app.

Nobody is really sure what the end result of WordPress FSE will look like, as there aren’t really any solid plans or concepts.

The development of WordPress over the past few years has mostly been like the early days of Facebook; move fast and break things.

I’m going to ask you, what do you think of WordPress Full Site Editing?  How would you like it to evolve?

Summary

Are you using the new Query Block? What are your thoughts?

Answer in the comments below.

#WPQuickies

Join me every Thursday at 1 pm Sydney time for some more WPQuickies – WordPress tips and tricks in thirty minutes or less.

Broadcasting live on YouTube and Facebook.

Suggest a #WPQuickies Topic

If you have a WordPress topic you’d like to see explained in 30 mins or under, fill out the form below.

https://forms.gle/mMWCNd3L2cyDFBA57

Watch Previous WPQuickies

Tips To Increase Organic Traffic For Better SEO