Last week I challenged myself to take one pattern, from one theme, and morph it multiple times — only using the design controls block editor. It’s kind of like CSS Zen Garden, but without CSS — just out-of-the-box WordPress block design tooling. 

One theme. One pattern. Seven ways. No additional blocks, nor custom CSS between scenes — just designing in the good ol’ WordPress block editor.

Every font family/size, color, border, radius, image, video, and spacing value were are all added in-editor.

I like this. This is the future of WordPress.

It’s not about blocks, or block themes, or even patterns for that matter. It’s about how each of these components come together as a site publishing and design tool. 

And here’s what I came up with:

This exploration showcases what’s possible today, but also what areas of the experience need polishing. In particular, I found the typography design controls a bit inconsistent and heavy-handed — I’ll be sharing an issue on the Gutenberg project with my findings.

Overall though, color me impressed. And with phase two of the Gutenberg project well underway, tightening up the design and customization areas of the editor is certainly top of mind. 

I challenge you to give this a try, even using just the Twenty Twenty-Three theme. Design a section of a page, then morph it a couple of times using only the design tooling within the editor. 

I’d love to see what you’ve made — share it with me on Twitter.