WordPress.com Drops Over 100 Block Patterns, Carving a Path the Design Community Should Follow

Automattic released over 100 block patterns to its users on WordPress.com last week. Patterns are a set of blocks that users can insert into their posts or pages for predefined yet customizable sections of content. Most of WordPress.com’s new patterns are general enough in design to cover a range of uses. However, the choices also cover some niches like restaurants.

“The WordPress Editor is a powerful tool that can help bring your design ideas to life but one of the best parts is, you don’t have to start from scratch,” wrote Ian Stewart, the WordPress.com Design Team Lead, in the announcement. “Building sophisticated designs can be as easy as picking Patterns from our growing library, and snapping them together to create beautiful-looking posts and pages.”

Aside from the work that Gutenberg Hub has done with its template library, this is one of the largest dumps of block patterns from anyone in the WordPress community at once. The big question right now is whether the larger WordPress community will see them in some form.

“No immediate plans to bring those out to the larger community outside of WordPress.com just yet,” said Stewart in a quick chat. “I expect us to contribute in some fashion to the potential block pattern directory but no immediate plans there yet either.”

Admittedly, I was a little disappointed in the response. I bought into the idea of block patterns from day one and have been patiently awaiting an explosion of layouts from the development community. As a former theme business owner, I see the dozens of problems that patterns would have solved for me five, six, or seven years ago. And, this is a feature that could win over some holdouts who are waiting for the block editor to mature enough to build more advanced layouts.

Quotation block pattern in the WordPress.com editor.
Grouping Quote, Spacer, and Columns creates custom Quote pattern.

“The team’s current focus is on making great-looking WordPress.com patterns and contributing back to the Gutenberg Project when we see potential for improvement with the tools for creating them,” said Stewart. “I think, like you, we’re pretty excited about the potential for Patterns and improved design controls in the Block Editor. So we’re plugging away at that right now. There’s a lot of exciting designs that can be made today and even more that we’ll be able to make in the future.”

Not now is not a no, however. Automattic has a gluttony of talented designers. If a block pattern directory emerges from recent discussions (it’s still an early idea), I have little doubt that individuals from the company would submit patterns. Users of the WordPress software will also see new patterns in themes that the design team releases publicly, such as those within Seedlet.

YouTube embed block pattern in the editor on WordPress.com.
Heading, Paragraph, Spacer, and YouTube blocks create this pattern.

The great thing about patterns is that they are easy to recreate. Even if the WordPress.com design team decides to keep them in-house for the foreseeable future, they can offer inspiration to theme authors who are looking to dive into this feature. Most of the patterns use only the core WordPress blocks. However, some of the contact-related patterns use the Form block, which is available via the Jetpack plugin.

Other patterns make use of the Layout Grid block, which is in the official plugin directory. This is one area that the block editor still lags a bit behind in, so it is necessary to use a plugin to make some of the more complex pattern designs work. However, there is an open discussion on a grid system for core. Tavern readers seemed to be receptive to the idea earlier this year too.

Nested Layout Grid blocks to create an advanced layout.
Grids within grids — nesting for a complex layout.

The design team put together an extensive array of call-to-action patterns. With over 20 to choose from in this category alone, just about any site owner who wants to sell a product, service, or content should be able to find something that suits them.

Call-to-action block pattern built for shops.
Call to Action block pattern for shops.

For now, those using WordPress.com can fully enjoy one of the better parts of the block editor. As for theme authors who are building for the open-source WordPress platform, remember that great artists steal.

9

9 responses to “WordPress.com Drops Over 100 Block Patterns, Carving a Path the Design Community Should Follow”

  1. I like the idea of block patterns but I think 100 block patterns are too overwhelming. Less is sometimes more. The same with Gutenberg blocks in the plugin library. Way too much to make a serious choice. Who has the time to browse and keep up with this flood of patterns and blocks?

    • @Max
      “…but I think 100 block patterns are too overwhelming.”

      IMHO there cannot be enough well-designe) patterns, they just have to use categories (hero, testimonials, call-to-action etc.) and a nice user interface where previews of all patterns belonging to a selected category are shown.
      They just have to give up that single narrow column where you have to scroll through every single one of these patterns. That’s not very practical and could be easily changed to a UI where you can preview many patterns of a selected category at a glance – like it is handled by some page builders.
      That way it wouldn’t be overwhelming at all. :)

      @Justin Tadlock
      Love your blog posts on the development of the Gutenberg editor with all its facets. After having decided recently to go with the GBE, WP Tavern has become a much appreciated go-to place for Gutenberg related news.

  2. I would like to see block patterns come to the WordPress core. Right now there are a couple but this coupled with fse would make using the block editor easier and there would be less reliance on page builders like elementor. This could take years to get to that point but I like the direction this is going. Initially, I did not like the block editor, but I have adopted it now in combination with elementor for building out my theme.

  3. Minor not, but can we use “releases” instead of “drops”? From the headline, I thought things had been removed, so I was confused at first. It’s minor, but having new things released is good, dropping them generally not so much.

  4. I don’t have this blocks on my WP 5.5.3

    Hello, I run 5.5.3 in french it’s the 13 of november, and I can’t see any new blocks patterns in my editor. I have the ten or so usual blocks patterns
    Is there something to to to get them ?

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.