Open Invitation To Contribute to the WordPress Block Pattern Directory

The upcoming block pattern directory is launching alongside WordPress 5.8 in July. The goal is to make several high-quality designs available for users right off the bat. However, the official submission process will not open until the directory launches. In this chicken-and-egg scenario, the Design team is asking for early contributors to submit their pattern candidates via GitHub.

“The project needs a collection of high-quality, diverse, community-designed patterns to populate it with during development,” wrote Kjell Reigstad in the announcement post. “These patterns will set the tone for quality in the repository and will make the directory useful for folks upon its launch.”

Alongside Reigstad, Beatriz Fialho and Mel Choyce-Dwan have already added several block patterns. They are available through the Gutenberg plugin now.

A sampling of six block patterns currently available.
Several of the current block patterns.

The trio has also submitted the majority of the 18 current potential patterns. While they have produced solid work thus far, the directory needs a more diverse set of designs from the community to launch with a bang.

Creating a pattern requires no coding skills. It is possible directly via the block editor. Just design, copy, and submit. The team already has a GitHub template in place for submitting patterns. Be sure to use CC0 (public domain) images if they are a part of your creation.

A block pattern in the WordPress editor, showing the "more options" dropdown with the "copy" button highlighted.
Copying a pattern from the WordPress editor.

I have somewhere between 40 and 50 patterns lying around. You could say that I have been doing a bit of dabbling in the art of block-pattern design in my free time. Many of these patterns rely on custom block styles, so they are not suitable for the directory. However, I have several that are general enough for submission.

As always, I try to pay it forward when possible. Therefore, I cleaned a couple of patterns today using the Twenty Twenty-One theme and submitted them for inclusion.

The first was a three-column section of “about me” or “connect with me” boxes. This has been one of my favorites to play around with.

Three boxes with about, contact, and follow sections.
About me boxes.

It is not on par with my original design, but I like how it turned out. If you have read any of my past posts on blocks and patterns, I will sound like a broken record. However, I must say it for those who did not hear the message the first 100 times. The main limiting factor for block patterns is the lack of spacing options on almost all blocks.

Blocks like Group and Column have padding controls, which are a nice feature. However, vertical margin options are must-haves for the directory to be as successful with its goals as it intends to be.

A prime example is in my first pattern. My original mockup closes the gap between the heading and subheading. In my submission, I tightened the space by setting the line height, but I needed an option for zeroing out the vertical margin.

If you compare it to the original idea built with some features not yet available, you can see how much improved the overall layout’s spacing is.

About me boxes with tighter spacing between text.
Original about me boxes with tighter margin control.

I ran into the same issue with my second pattern, Team Social Cards, between the Image and Separator blocks. The gap there has more to do with Twenty Twenty-One’s inconsistent spacing.

I may revisit the giraffe photo, but it is growing on me. It is fun. Plus, end-users are meant to actually replace it.

I will probably submit one or two more during this early phase, and I will definitely contribute more once the pattern directory is officially open. For now, I want to see our talented design community giving a little something back to the WordPress project. This is such an easy way to contribute that has no coding requirement — just a little time.


5 responses to “Open Invitation To Contribute to the WordPress Block Pattern Directory”

  1. That is great incentive. I would contribute but am still getting accustomed to using Gutenberg on my client sites. I’m a late adopter and recently discovered with a pattern I had used that there doesn’t appear to be any ‘mobile’ css included in block patterns. Is that the future or will there be a way to include that in the wp-admin?

    • Patterns are just groups of blocks, and core blocks in this case. So, the responsiveness is either handled by core/Gutenberg or the stylesheet of whatever theme the user has installed. The responsive handling could vary wildly between different themes. It really just depends.

      But, you really can’t attach CSS to a pattern, only to the blocks themselves.

      I would recommend building patterns when using Twenty Twenty-One, which gives everyone a common starting point. There are some definite limitations on that in comparison to building along with a custom theme.

  2. “Many of these patterns rely on custom block styles, so they are not suitable for the directory. However, I have several that are general enough for submission.”
    . . .

    I am very much in the same boat, and like you, I want to pay things forward when/where I can. That said, I am quite interested in cleaning up some of the patterns I have already designed and submit them for review.

  3. I’m in the same boat as Justin and Brian, having created patterns that mostly rely on our custom Blocks Bundle.

    However, I’m in the process of adding core block patterns to our collection of free themes in directory. And I would love to submit those to the community when they’re ready, which should be soon. Having played with patterns a lot recently, I’m really excited to see this directory. I think patterns and FSE are finally going to transform WordPress into the website builder we’ve always hoped for.

    Thanks for sharing Justin!


Subscribe Via Email

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

%d bloggers like this: