Justin Tadlock
The WordPress pattern directory finally opened its gates to the entire community today. Anyone with a WordPress.org account can log in, go to the pattern creator, and start designing.
For some of us, this has felt like an unbearably long wait. In reality, it took the development team less than a year since the directory launch to put this together. It was no small feat to make it work and put in all the guardrails for such a system in that amount of time.
Some community members have already got a head start. Ana Segota of Anariel Design announced via Twitter that three of her patterns had already landed. “More coming soon,” she said.
The pattern directory has the potential to be an onramp for creators who want to contribute to the WordPress project but do not know where to start. The barrier to entry is one of the lowest in the community. There is no requirement to write code or understand all the intricacies of theme design. It is nowhere near as complex as plugin development. It is simply a visual builder that allows sharing art with the world.
I have no idea where this thing is going. I hope to see 1,000s of patterns in the directory a year from now.
I played a small role in building two of the initial patterns from last year. I was excited about the potential for the directory and happy to contribute in any way. However, I was not entirely satisfied with the process because I did not have the creative freedom I wanted.
For example, my vision for an “about me” columns pattern had morphed into something entirely different:
By the time it was added to the directory, there was hardly any of myself in it. The first designs that launched were tightly curated, and that was OK. It was more about getting production-ready patterns out to users at the time, and I knew that WordPress.org would eventually open it up.
Today, I started work anew, rebuilding my original “about me” pattern. I have made some alterations because we now have new spacing controls. And the built-in, Openverse-powered search did not seem to locate some of my early images, despite being available via the Openverse site. Nevertheless, it is a work in progress:
Users can save draft patterns, too. So, if you want to try your hand at designing one but are unsure if you can finish it in one sitting or do not have a fully-fleshed-out idea, there is no need to worry about losing work. You can save it and pull it up later from your patterns page.
The pattern creator runs Twenty Twenty-One under the hood. The classic theme has a few quirks, CSS that often overrules the core WordPress styles. I would rather have seen Twenty Twenty-Two because it sticks much more closely to the global styles standard. At least people who want to try designing off-site will be able to test with a similar setup.
Patterns should, ideally, be theme-agnostic. However, in practice, the theme that showcases those patterns — Twenty Twenty-One in this case — can make or break a design. Creators should not design specifically for it, but they should at least check its output.
Using the pattern creator is straightforward. It is merely an instance of the block editor with some modifications specific to the directory. It also provides a quick welcome screen:
Overall, my experience with it went reasonably well for a Day 1 launch. Most of the hiccups that I encountered were with the image search. It timed out on occasion, and filtering images was not a perfect experience. Despite being powered by Openverse, it does not offer the same filtering tools.
I hope that the pattern creator will eventually tie into the WordPress photo directory. The built-in search is a neat tool, but you sometimes have to wade through dozens or hundreds of outdated images to find something worth using. The photo directory feels fresh and modern. Plus, we should be prioritizing the work of those contributing to WordPress.
There are still many open tickets for the pattern directory, and it will undoubtedly evolve based on feedback and usage. However, this is a solid launch of the pattern creator. Well done to all the folks who made this happen.
Hello Justin, I think that’s a good thing.
Like this, the repertoire of templates will grow exponentially quite quickly.
After experimenting a lot with block patterns, I came to the conclusion that these should go the same path as shortcodes- in companion plugins for specific themes or theme developers.
These patterns go into the same container as page/post content, which often have styling geared towards readability, not specifically design.
So a H2 heading in a design element can/may look different from a H2 in a post content.
There’s only so much you can do with just rearranging blocks without any theme-specific CSS.
I created a plugin called Better Block Patterns, in which I tried to create a set of patterns that would look custom enough, but work with any theme.
It’s a big task to handle, especially when the HTML and CSS markup of core blocks keeps changing.
Having said all this, I think custom block patterns is one of the most exciting features and tools of modern-day WordPress.
Super cool! I have had zero time to check this out for myself, but I will be doing that soon. Thinking about redesigning Radio Station PRO without a page builder and just using patterns and blocks in a base theme. Not sure when I’ll get to it, but it’s coming soon!
I am really excited to see this pattern library in action.Page builders like divi and elementor makes the pages slow and Gutenberg and block editor is the way to go.This pattern library would be really helpful for people who are building websites in pure Gutenberg.Keep going.
off-topic: how can i create a gallery with tag filter without using a plugin? like in the pattern discover page you can filter hero/footer etc
The “tag filter” part is just one of the various taxonomy-related blocks. You can use either the Categories or Tag Cloud blocks. Alternatively, you can add a Navigation block and directly control the links you want to display.
Your email address will not be published.
document.getElementById( “ak_js_1” ).setAttribute( “value”, ( new Date() ).getTime() );
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
WordPress Tavern is a website about all things WordPress. We cover news and events, write plugin and theme reviews, and talk about key issues within the WordPress ecosystem…
© All Rights Reserved. Powered by WordPress, hosted by Pressable
