WordPress Gutenberg Patterns: The Solution for Web Design?
| 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.
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.
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:
The WordPress Query Loop block is characterized by two things: A PHP-free solution, and dynamic lists.
For example, you can easily display the following with the Query Loop block:
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:
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.
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:
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:
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.
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:
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.
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.
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:
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.
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.
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 offers you possibilities that go far beyond the well-known WordPress standards. Design websites even faster and according to your taste!
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.
Patrickloves 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
Register now and don’t miss any news about GREYD.SUITE & WordPress:
WordPress Gutenberg Patterns: The Solution for Web Design?
Query Loop Block: The Underdog Among WP Features
Gutenberg WooCommerce Themes: Should you use them?
How good are WordPress Full Site Editing Themes anyway?
How WordPress Dynamic Templates Make Your Work Easier
Combining WooCommerce and Gutenberg Blocks the Right Way
WordPress Full Site Editing: What to Expect From the New Editor
WordPress Gutenberg Is the Future – But Is It Ready for Responsive Design?
Simplify Your Marketing With Content Automation