WordPress By

The Gutenberg plugin repository currently has an open ticket calling for community-contributed Query block patterns. These would launch alongside Full Site Editing’s inclusion in WordPress, which could be as soon as version 5.8 — no hard decision has been made on that yet. Some may not end up bundled directly in WordPress but could be included in the upcoming pattern directory.

Gutenberg 10.2 introduced a new feature called “scoped patterns.” This system allows developers to build block patterns within a specific context instead of always being available from the inserter. Specifically, the Gutenberg development team created a handful of patterns for the Query block. When inserting the block, users can choose between each of these patterns as a starting point for outputting their posts.

Initial Query block state when the user first inserts into a post with pattern options.
Pattern selections for the Query block in its initial state.

The patterns are far too generic and do not come close to replicating the array of design options in the real world. While the end goal is to not cover every scenario imaginable, WordPress should ultimately give users a little more flexibility as a jumping-off point.

“Those were always meant to be temporary to start with,” wrote Kjell Reigstad, a core WordPress contributor and Design Director at Automattic, in the GitHub ticket. “Let’s take another look at these, both to replace the current ones for now, but also so that we eventually have a nice set of WordPress community-designed query block patterns to add to the Pattern Directory at launch.”

Theme authors will be able to release their own scoped patterns for the Query block too. However, with block-based themes being few and far between at this phase of the project, WordPress needs to set the stage.

This is one of the reasons I was so vocal pre-WordPress 5.5 about the early pattern designs, and it is why I was happy to see them overhauled before the launch. Many users need that bit of inspiration, that push to try out alternate layouts instead of building them on their own. They need options beyond the typical stacked blog posts layouts.

A few well-designed Query patterns do that.

I decided to try my hand at building what I think would be a fun Query pattern to use:

Two blog posts stacked upon each other. Each has a custom background image that spans the page.
Query block pattern with full-width background image.

I built this using core blocks instead of the Query block with the Eksell theme installed. Side note: let me just reiterate my earlier review of Eksell. It is such a well-rounded design that anyone can create all sorts of custom patterns. It makes for an easy-to-use testbed for exploring design concepts.

The idea was based on a pattern that Mel Choyce-Dwan shared in the ticket:

Two blog posts stacked upon each other. Each has a custom background image that spans the page with centered text.
Query block pattern with background image and centered text.

I do not think it is currently possible to build this Query pattern idea with the site editor. Unless I am mistaken, there is no way to use the post featured image as a background or within 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 some time for the tooling to catch up, but we are approaching the point where designers can build more complex things. That is another reason theme authors should be involved with this discussion. It needs input and ideas from themers who are out there dealing with users in real-world settings. The Gutenberg team cannot know everything it needs to build without this vital community source.

Choyce-Dwan shared several other patterns in the ticket that are worth exploring. Along with Reigstad, Beatriz Fialho and Paal Joachim Romdahl have contributed pattern ideas.

If you fancy yourself a theme designer, now is as good a time as any to contribute.