Block Patterns and Block Variations of the Query Loop

The core blocks which are provided as part of WordPress itself are very powerful, but most non-expert users will benefit from a developer providing them with pre-defined configurations.

Take the core/heading block, for example. Simply inserting the Heading block into the editor will default to H2 styling. It would be much easier for the user if they can also insert an H1, H3 and so on without having to first insert the Heading block, then changing the size manually.

Block Variations

I wrote last year about how a developer can add Block Variations to a website instead of needing to add a custom Block. Instead of using the block selector, finding the block, adding it to the page, then changing the size setting, adding a Block Variation enables the keyboard-friendly option of typing /h3 and then pressing enter. This is several seconds faster in every instance and is a huge help to anyone who writes longer articles on a regular basis. You can find out more in the blog post “Gutenberg keyboard shortcut for headings”.

A more complex example is setting up a Block Variation for the Query Loop block. With this block, it’s possible to provide pre-defined variations so that a user can quickly insert a list of posts in a particular layout. For example, the latest 3 posts tagged with a certain keyword, grouped in a grid layout and with a custom background colour, padding and text sizes. The Query Loop block contains a Post Template, whose blocks are used to output every post in the list.

The layout above (created with a Query Loop block) is achievable within a couple of minutes if you are an experienced Block Editor user and if you know your site and its layout principles. It’s also possible for a developer to add a Block Pattern for layouts like this. It’s possible to write a Block Pattern by hand, but it’s easier by far to create the content in the editor, then copy it over to a Block Pattern file in the Theme and add the necessary configuration comments.

Reusable Blocks

If a user wants to create the example above by hand and then use it in several places across the website—remaining the same everywhere when it’s modified anywhere—then converting the wrapping block to a Reusable Block in the editor is the way to go. (This is a no-code solution and works very well if you want to have a piece of editable content which remains synchronised across multiple pages on the site.)

Block Variation or Block Pattern?

A Block Pattern allows us to define a group like the query list above so that the user can insert it and then modify it. A block pattern which uses blockType: ['core/query'] in its configuration will appear in an attractive carousel selector like this one.

Confusingly, it’s also possible to configure a Block Variation on the Query Block, but these aren’t loaded in the carousel selector. Patterns appear to take priority here, with the user being presented with the available patterns first, or the option to “start blank”. The only advantage I can see for a Block Variation here is that it can be configured so that it appears in the regular block selector. (Patterns don’t usually appear in the selector.) This means I can type /WordPress in the editor and it will suggest my Block Variation “Query Loop – latest posts about WordPress”.

If there are no Block Patterns defined for the Query Loop Block, the user has to choose “start blank” and then select from the available variations instead. This seems to be somewhat confusing in many instances, and I hope that the core development team will address this UX confusion in a future update.