There is currently a lot of excitement surrounding the block patterns that debuted in WordPress 5.5. A block pattern—pattern for short—is a predefined block layout; a collection of blocks or, occasionally, even a single block can make up a pattern. Think of it as a pre-made, artful chunk of a web page that you can insert into your own pages and posts then fill with your content. Users have access to a growing number of beautifully designed patterns right in their editor, and they can combine and tweak them to create a stunning page or post. Patterns also encourage the use of individual blocks because they allow blocks to be seen in context, within a design that makes them shine.
Patterns appeal to the eyes, and people can add them quickly to their sites—but they are more than readymade designs. If optimized, patterns can also inspire users. To that end, rather than using Lorem Ipsum or placeholder images, which can make patterns seem too abstract or distant from users, why not put crafted content in patterns? That way, we can help people see pattern designs as intentional and flexible at the same time.
The patterns available now are just the beginning. When we have full site editing in place, we’ll be able to provide users with patterns for headers, footers, sidebars, and so on. It will be possible to build all the parts of a site from blocks and patterns. I think that’s pretty exciting and hope you do too!
Anything we can make with blocks in the editor can be a pattern, so it’s easy to jump in and start making them. However, I’d suggest starting out by creating designs in Figma, Sketch, or whatever tool you prefer, at least for now. That way, you won’t be constrained by what you can do right now in the editor. Instead, create an ideal design, try building it in the editor, and figure out what’s missing in Gutenberg to make your vision possible. Share and discuss in the Gutenberg development hub. This will make Gutenberg better for many people! We have lots of work to do on the design tool in Gutenberg in order to allow both users and designers to create diverse visual expressions on the web.
I touched earlier on the possible distance between patterns and the user. It’s interesting to think about the “space” that emerges between abstraction and concretization of pattern design. If a pattern is too abstract, most users won’t be able to imagine their content in it. On the other side of the spectrum, if a pattern is designed for a very specific context and presented that way, it may limit its potential to a singular association. Our design director, Ian Stewart, shared with me Scott McCloud’s The Big Triangle from Understanding Comics.
It’s a triangular heuristic map for analyzing a comic artist’s intent and a viewer’s interpretation. McCloud refers to this triangle as a map of possibilities where the vertices represent, respectively, reality, meaning, and “the picture plane” (pure abstraction). I find this useful when I’m designing patterns. Being intentional is, as our design lead, Pablo Honey, nicely put it, the DNA that should be shared across all the patterns that we make. I really like that, and I think it’s very important. In conveying intent, the image and text in a pattern play a big role. Yes, in the end, the user will replace them according to the needs of their website, but a well-crafted intent can help “sell” the pattern at a subconscious level. Whether they know it or not, a user will respond to the work and thought you put into it.
Patterns have just started its history, but needless to say, it’s highly anticipated by many. Gutenberg allows patterns—the artful chunks of a web page—to be just Gutenberg content that users can easily tinker with in the editor without being locked into themes, widgets, shortcodes, and so on. Users are superpowered by Gutenberg, and our block patterns inspire them to become great pattern crafters themselves.
Automattic Design 