Block Pattern Modal Explorer coming to WordPress 5.9 – WP Tavern

It has been a long year since Paal Joachim Romdahl offered an alternative block model experiment. In November 2020, he opened a ticket on the Gutenberg GitHub repository to explore an overlay-based approach to display, find, and insert models into the content canvas. At the end of last week, a pull request for the long-awaited feature landed in the Gutenberg plugin.

A year ago, templates were a new concept for the average WordPress user. WordPress 5.5 introduced them to the world, and we were only a month away from the next major release. I had hoped we could plug in the new overlay ASAP, but sometimes an idea needs time or the right people working on it to give it the push.

The first iteration of the Model Explorer will likely be a basic experience to build on in the future. Currently, users can search through modal or filter by category (includes models shown in the list).

Modal pattern explorer.

Ultimately, the explorer should offer more features. A previous mockup showed user favorites by logging into a account. This was found alongside the most recent model listings. The mockup also had a separate section for template part designs, such as header, footer, and sidebar. With the WordPress 5.9 feature freeze coming on November 9, these extras will likely have to wait for a future release.

To access the explorer overlay, users will need to click on the “Explore” button while viewing models in the inserter. It then displays a full screen overlay to browse through them.

Highlight a "To explore" button in the insert block for WordPress.  It is placed next to a selection drop-down field.
“Explore” button next to the drop-down list of model categories.

This kind of model sailing experience has already become a necessity. The narrow inserter did not hold up well to themes that many models offer, such as the 40+ that comes with Tove. The problem will only get exponentially worse as the template repository is opened up for more submissions and other themes inevitably add dozens and dozens of their own.

The experience is much more pleasant now. However, it still has a few wrinkles that need to be ironed out. Several models have their own scroll bars in Explorer. As Anne McCarthy noted in the post, it makes the experience “very janky.”

Modal block model explorer.  In the right section, two of the models have scroll bars in their previews.
Templates with scroll bars.

In my testing, the patterns butted up against the explorer sidebar on the left. Fixing this shouldn’t take a lot of work.

More than once I have also come across the dreaded “Aw, Snap! »Browser error message after viewing Explorer models. The error code: Insufficient memory. This happened while performing a fresh install with the Twenty Twenty-Two WordPress theme. I can only hope this won’t be a problem when WordPress 5.9 launches and goes live on production sites.

Finally, I want to see a faster method to access this modal model. I am leaning towards a dedicated button on the toolbar to pull the overlay. Right now, it takes three mouse clicks to open it. First, users need to click on the insert “+” button. Then they should switch to the Patterns tab before hitting the Explore button. It’s a lot of work for something that should be top class functionality.

A keyboard shortcut would also be a welcome access point. I could live with this trade-off if the dev team isn’t ready to paste another element to the top level of the UI yet.

Overall, I’m happy with this upcoming feature. I can even try my hand at building new ones. The ones I had tinkered 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 nicer 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.

Comments are closed.