Posted on

The WordPress.org Pattern Creator Now Open to the Public

Screenshot of the WordPress pattern directory. Displays a hero area with title, search, and demo images. Patterns are in a 3x3 grid below.

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.

Showcase of a specific author's block patterns from the block-pattern directory. Displays three patterns in a grid.
Patterns by Anariel Design.

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:

Final about me cards pattern.

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:

Inside of the WordPress pattern creator. The content canvas shows three columns with about, contact, and follow sections.
Building with the new pattern creator.

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:

Welcome popup over the pattern editor on WordPress.org. It teaches what the creator is.
Welcome screen to the pattern creator.

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.

Posted on

WordPress.org to Launch Pattern Creator to Expand Pattern Directory

WordPress.org’s contributors are preparing to open the doors of the Pattern Directory to public submissions. Patterns’ transformative effect on page building in the block editor has made the feature important enough to earn its own directory in July 2021. For the past nine months, it has been limited to a small, curated selection of patterns from designers in the community.

Today, Alex Shiels unveiled the new Pattern Creator that will enable public pattern submissions.

“The Pattern Creator page will allow designers and content creators to build, edit, and submit their best block patterns to the directory,” Shiels said. “Approved patterns will be added to the directory, where they will be instantly available to the authors of millions of WordPress sites.”

The Pattern Creator loads an instance of the block editor where the Publish button has been swapped out for a Submit button. Using only WordPress core blocks, pattern designers are encouraged to create something unique that other people might want to use.

Pattern designers are not permitted to upload their own images but the media library is hooked up to Openverse for access to license-free images. After putting all the elements in place for the pattern, designers can select a category, add some keywords for search, and submit the pattern to the directory.

Shiels said the Pattern Creator is expected to officially launch next week but the Meta team is inviting designers and theme developers to help test the submission process now.

With the advent of FSE (full-site editing) in WordPress 5.9, Pattern Directory contributors anticipate pattern authors may soon be submitting more site building type patterns, such as headers, footers, and query blocks. This is also important now that themes have gained the ability to register patterns from directory with theme.json. Contributors are still working on a way to categorize and show “site building” block patterns.

While the Pattern Directory currently has a few simple, artful patterns, it is lacking in variety. Ideally, users would have multiple patterns to choose from when selecting among pricing tables, social cards, contact information, and other frequently used website building blocks. Opening the directory up to public submissions should significantly expand the collection of pre-made design options available to WordPress users in the editor.

Posted on

WordPress 5.8 Beta 1 Released: New Blocks, New Widgets Screen, and Pattern Directory on Deck

WordPress 5.8 beta 1 is ready for testing. This upcoming release makes major strides towards solidifying WordPress’ site building capabilities, along with improvements to features users have enjoyed since the launch of the block editor. It is one of the most feature-packed releases in recent history and as such requires all hands on deck for testing.

New blocks in 5.8 include Page List, Site Title, Logo, Tagline, Query Loop, and Duotone. I decided to take each one for a spin this weekend on a test site, putting myself in the shoes of someone trying these blocks for the first time.

I was surprised to learn that the template editor will be available to sites using any WordPress theme, since all the previous FSE testing rounds have called on testers to use the latest version of the TT1 Blocks Theme. It will be interesting to see how users respond to this and if it works well with older themes. Users can now create and edit custom templates for pages and posts using blocks.

The template editor includes the new List View panel that gives an overview of all the sections and blocks in the template.

Most of the new blocks in 5.8 are intended to work within the context of the template editor, but they also work in the post editor.

The Page List block magically populates a list of all the pages on a site as soon as it is inserted. Unfortunately, there isn’t a way to delete a single page from the list. If you try to delete a page the entire block disappears. This seems like a bug and is a frustrating experience in the context of the post editor. It may be more useful in terms of building navigation but this seems like a rough first pass.

The Query Loop block comes with some different designs for how the loop could be displayed. Once a basic layout is chosen for a starting point, users can further customize the blocks within the loop, including typography, color, length of excerpt, and more.

The Site Title, Tagline, and Logo blocks all seem to work as expected but I found previews to be unreliable for things like alignment and spacing. At this point in time, it seems like template editing will be better suited to users who are more adventurous and experimental when it comes to new features.

Duotone is a fun new core block that you can see in action below, demonstrated by WordPress documentation contributor Milana Cap. The block adds images effects that can be used in media blocks. Theme and plugin developers can also employ and customize the effects for their own particular use cases.

Hello New Widgets Screen!

WordPress users will be greeted with a new block-based widgets screen in 5.8. It allows you to use blocks in any widgetized area. It wasn’t until I saw how this works that I realized how rigid our old widgets system was. Whatever functionality you were trying to insert had to be readily available as a widget or shortcode. Now any block from the vast world of blocks can be added to widgetized areas.

Justin Tadlock wrote a post about how users can disable it with the Classic Widgets plugin. Should you disable it? Not unless you are forced to because of using a theme that doesn’t support it very well. Using blocks in widget areas is going to give you much more flexibility for what you can insert. You can even continue to use the old style widgets via the Legacy Widget block. Users may need a little time to adapt to the new interface but it’s worth it to have access to the growing world of innovative blocks.

Pattern Directory Will Be Integrated with WordPress 5.8

The new Pattern Directory will launch on WordPress.org along with the 5.8 release. Justin Tadlock recently amplified the Design Team’s call for pattern contributions that would be available to users right away. Several have already been submitted via GitHub issues for the directory and the creativity here is energizing. In addition to introducing an exciting new avenue for designers to put their work out into the ecosystem, the Pattern Directory stands to become a valuable resource and inspiration to users who are designing their own websites.

A “How It Works” pattern submitted by Lax Mariappan

At launch the directory will only contain patterns that use core blocks but using blocks from WordPress.org may also be a possibility in the future.

“There have definitely been some discussion of allowing any blocks from the Block Directory to be used and that they would be auto-installed if someone inserted the pattern,” Shaun Andrews commented in response to a theme studio inquiring about submitting their own patterns that use free blocks. “I believe this is possible, and something we should do, but there simply hasn’t been any work done to enable it yet.

“We’re focused on getting the first iteration of the Pattern Directory launched, and then we plan to continue improving things.”

Pattern transformation is a new feature launching with the new directory, which allows users to convert a block or collection of blocks into different patterns. Patterns can also be recommended and selected during block setup, which should make product onboarding easier.

These are just a few features coming in WordPress 5.8 that need testing. Check out the 5.8 beta 1 release post for a more comprehensive list of all the improvements that are on deck. The official release is scheduled for July 20, 2021.

Posted on

Pattern Directory Targeted to Launch with WordPress 5.8

Last month WordPress contributors published the initial designs for the upcoming pattern directory, which will host community-submitted patterns that can be installed with one click from the block inserter in the editor. A live prototype of the work in progress is available at wordpress.org/patterns.

The previously planned masonry style, which accommodates variable thumbnail heights, has not been implemented yet. Clicking on the individual pattern reveals a live preview with a handy resizing bar for trying it out on different screen sizes. The copying and favoriting features are not yet fully working. I was able to copy and paste patterns into the editor, but the previews aren’t yet very accurate.

The project is clipping along and contributors are aiming to have the new directory ready to launch in tandem with the upcoming WordPress 5.8 release. Features planned for the first version include browsing and searching patterns, live preview of patterns, and the ability to copy the block code. Users signed into WordPress.org will be able to create and submit patterns to the directory using a set of curated images and media. They will go through a basic moderation process and patterns will be available for download directly through the block editor.

Once the directory is launched, contributors plan to add support for internationalization, forking and iterating on patterns, expand the available media for use in pattern creation, and add a pattern browsing UI to the editor.

WordPress 5.8 is expected to land in July 2021 with the new Query, Site Logo, and Navigation blocks, template-editing mode, and the block-based widgets screen and customizer integration. The availability of pre-made patterns will be a beneficial accompaniment to the first round of full-site editing features added to core in the next release, enhancing the basic page building experience.

Posted on

First Look at Initial Designs for WordPress’ Block Pattern Directory

WordPress contributors began discussing the possibility of a block pattern directory in October 2020, an idea that garnered enthusiastic support. The directory would offer a place to browse user-submitted patterns, as well as one-click installation of patterns from the block inserter inside the editor.

Interface designer Shaun Andrews published the initial designs for the pattern directory yesterday. Patterns will be displayed in a masonry-style grid that can be sorted by category, which works well for pattern thumbnails of varying heights. Users can search the directory and sort by featured, newest, and most popular.

Masonry grid

The idea is that a user will be able to copy a single pattern to their clipboard while visiting the directory and paste it directly into the block editor. Users will also be able to “favorite” patterns from the directory and access them inside the editor.

Copy pattern flow

One of the most exciting aspects of the plan is that anyone will be able to create and submit a pattern without having a lot of technical knowledge. Andrews shared a quick landing page mockup to explain what patterns are and how to submit one. Prospective pattern authors would be able to create a pattern on WordPress.org using a hosted instance of the block editor with a few tweaks specific to describing and categorizing the pattern.

Users who submit patterns will have a new “My Patterns” screen listing all of their patterns, ones they have favorited, information about how many people have favorited their submitted patterns, and status updates for patterns still in review.

“This is a big opportunity for designers to contribute to the overall WordPress ecosystem without having to know how to code a plugin or a theme,” Andrews said. It opens up a new avenue of design contribution that would not have been possible with the same scale of distribution in the days of the previous editor.

There are still many unanswered questions, such as how “featured” patterns would be chosen, how drafts work, if the patterns can only include core blocks, how users will browse and manage favorite patterns in the editor, who approves the patterns, how pattern authors can edit existing patterns, and more. If you want to help out on the project, check out the Pattern Directory repository on GitHub. The work is broken down into smaller projects in the issues.