It has been a long year since Paal Joachim Romdahl’s proposed an alternative block pattern experience. In November 2020, he opened a ticket on the Gutenberg GitHub repository to explore an overlay-based approach to viewing, searching, and inserting patterns into the content canvas. Late last week, a pull request for the long-awaited feature landed in the Gutenberg plugin.
A year ago, patterns were a new concept for the average WordPress user. WordPress 5.5 introduced them to the world, and we were only a month out from the next major release. I had hoped we could plug the new overlay in as soon as possible, but sometimes an idea needs time or the right people working on it to give it that necessary push.
The first iteration of the pattern explorer will likely be a baseline experience that can be built upon in the future. Currently, users can search via the modal or filter by category (includes featured patterns in the list).
In the long term, the explorer should offer more features. An earlier mockup of it showed user favorites by connecting with a WordPress.org account. This sat alongside featured and newest-pattern lists. The mockup also had a separate section for template part patterns, such as header, footer, and sidebar. With the WordPress 5.9 feature freeze coming on November 9, those extras will likely need to wait until a future release.
To access the explorer overlay, users will need to click the “Explore” button when viewing patterns in the inserter. It then pops up a full-screen overlay for navigating them.
This type of pattern navigation experience has already become a necessity. The narrow inserter has not held up well against themes that ship a lot of patterns, such as the 40+ bundled with Tove. The problem will only grow exponentially worse as the pattern directory is opened to more submissions and other themes inevitably add dozens upon dozens of their own.
The experience is much nicer now. However, it still has a few wrinkles that need to be ironed out. Several patterns have scrollbars of their own within the explorer. As Anne McCarthy noted in the ticket, it makes the “experience very janky.”
In my tests, the patterns butted against the explorer sidebar on the left. Fixing this should not take much work.
More than once, I also ran into the dreaded “Aw, Snap!” browser error message after viewing the explorer’s patterns. The error code: out of memory. This happened when running a clean install alongside the Twenty Twenty-Two WordPress theme. I can only hope it is a non-issue when WordPress 5.9 rolls around and is live on production sites.
Eventually, I want to see a quicker method for accessing this pattern modal. I am leaning toward a dedicated button in the toolbar for pulling up the overlay. Right now, it takes three mouse clicks to open it. First, users must click the “+” inserter button. Then, they must switch to the Patterns tab before hitting the Explore button. That is a lot of work for something that should be a first-class feature.
A keyboard shortcut would also be a welcome access point. I could live with that compromise if the development team is not yet ready to stick another item at the top level of the UI.
Overall, I am happy with this upcoming feature. I may even try my hand at building some new ones. Those I had been tinkering with in my custom theme had become so unwieldy that testing them was a headache. This will open things up and should make it a lot more enjoyable to use.
Gutenberg plugin users should see this land in version 11.9 later this week. It is also currently available in the trunk branch of WordPress.