Designing the Next Series of Query Block Templates – WordPress Tavern


The Gutenberg plugin repository currently has an open ticket calling for community-provided query block templates. These would launch alongside the inclusion of the full site edition in WordPress, which could be as early as version 5.8 – no tough decisions have been made on this yet. Some may not be integrated directly into WordPress but could be included in the next template directory.

Gutenberg 10.2 introduced a new feature called “scope models”. This system allows developers to create block models in a specific context instead of always being available from the inserter. Specifically, the Gutenberg development team created a handful of templates for the Query block. When inserting the block, users can choose between each of these templates as a starting point for the output of their messages.

Template selections for the query block in its initial state.

The models are far too generic and come close to replicating the range of design options in the real world. While the end goal is not to cover every conceivable scenario, WordPress should ultimately give users a bit more flexibility as a starting point.

“These were always meant to be temporary to begin with,” wrote Kjell Reigstad, senior WordPress contributor and design director at Automattic, in the GitHub post. “Let’s take another look at these, both to replace the current ones for now, but also so that we finally have a nice set of WordPress community-designed query block templates to add to the repository of. models at launch.

Theme authors will also be able to publish their own scope models for the query block. However, with block-based themes being few in this phase of the project, WordPress needs to prepare the ground.

This is one of the reasons I was so vocal before WordPress 5.5 about the first pattern templates, and why I was happy to see them revised before launch. A lot of users need this little inspiration, this push to try out other layouts instead of creating them themselves. They need options beyond the typical layouts of stacked blog posts.

A few well-designed query models do this.

I decided to have a go at creating what I think is a fun query model to use:

Two blog posts stacked on top of each other.  Each has a custom background image that spans the page.
Query block template with full-width background image.

I built this using basic blocks instead of the query block with the Eksell theme installed. Side note: let me reiterate my previous review of Eksell. It is such a comprehensive design that anyone can create all kinds of custom designs. It provides an easy-to-use test bench for exploring design concepts.

The idea was based on a model Mel Choyce-Dwan shared in the post:

Two blog posts stacked on top of each other.  Each has a custom background image that spans the page with centered text.
Query block template with background image and centered text.

I don’t think it’s currently possible to build this query model idea with the site editor. Unless I’m mistaken, there is no way to use the article’s featured image as a background or in the Cover block, a common layout design.

Eventually, the site editor should get to the point where theme authors can move at least a hair beyond the basics. It will take a while for the tooling to catch up, but we are approaching the point where designers can build more complex things. This is another reason why theme authors should be involved in this discussion. It needs input and ideas from users who deal with users in real contexts. The Gutenberg team can’t know everything they need to build without this vital community source.

Choyce-Dwan shared several other models in the post that are worth exploring. Along with Reigstad, Beatriz Fialho and Paal Joachim Romdahl contributed model ideas.

If you’re in the mood for a theme, now’s a great time to contribute.


Comments are closed.