Design Gutenberg WordPress Work

A quick guide for building a WordPress block pattern

As we progress on building a directory for WordPress block patterns, I thought it would be helpful to put together a guide for building patterns. Here’s a first sketch at this guide, which I think can probably live at

What do you think — does this help, and does it cover the basics? What else should this document contain?

Design WordPress Work

Canvas Width

I’m working on designs for the brand new Patterns section for This new section of the site will allow anyone to create and submit patterns — a collection of WordPress blocks — that can be shared and used by any WordPress site.

One aspect of build a great pattern is understanding how your design adapts to various widths. And I don’t just mean device widths, like a tablet or phone — but also container widths. In the world of the block editor, you can place patterns within wide pages or narrow columns, and your pattern must adapt accordingly.

Here’s how a Width tool could work when designing and building a pattern…