Cancel

Justin Tadlock

Block Pattern Modal Explorer Coming to WordPress 5.9

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).

Block pattern explorer as viewed from a popup overlay. It features a left sidebar of categories and a right section with two columns of various block patterns.
Pattern explorer modal.

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.

Highlighting an "Explore" button in the block inserter for WordPress. It sets next to a select dropdown field.
“Explore” button next to the pattern category dropdown.

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.”

Block pattern explorer modal. In the right section, two of the patterns have scrollbars in their previews.
Patterns with scrollbars.

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.

Category: , ,
Tags:
6

6 responses to “Block Pattern Modal Explorer Coming to WordPress 5.9”

  1. As long as the devs communicate clearly how to turn it off. I mean hide and disable the entire feature.

    When patterns were first introduced my problem was not the interface but that it offered my clients a way to totally wreck their websites with a few clicks. Within seconds an office junior could grab disparate design patterns from a global library and turn a site into a patchwork quilt.

    It took a lot of searching to find out how to deactivate the pattern library, and the little spamvertising link for “blocks you might like”.

    Please consider those websites which have a supplied set of elements and do not want 15,000,000 random unrelated design patterns on tap. Please indicate clearly the current methods to turn off the firehose.

    Currently I have:

    remove_theme_support( 'core-block-patterns' );

remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_editor_block_directory_assets' );

remove_action( 'enqueue_block_editor_assets', 'gutenberg_enqueue_block_editor_assets_block_directory' );

    But who knows if these are going to remain current, and enough to protect shipped sites?

    Create forum topic from comment

  2. I’m an outspoken “convert” to Gutenberg as of this year…which is saying quite a bit, since I was one of its harshest critics for many years.

    But I am personally quite confused as to why there is so much energy being put into “random” design patterns and blocks versus a similar effort being put into “fundamentals”…ie: things that are universally necessary and beneficial for most page layouts and sales pages, etc.

    Wouldn’t more people benefit if there were wireframe type designs available in large quantity, making it simpler to get a result on a page with one click versus having to go to third-party plugins (ie: Kadence or Qubely) for this?

    Hoping we can also see some movement towards a canvas theme for core instead of an annual “design” theme… since it seems that no one benefits from those in a world where WP is trying to get everyone using the block editor’s design capability.

    Create forum topic from comment

    • … the block editor’s design capability.

      This capability will often be used exactly once in a lifetime of a website, at creation time.

      Adding some bi-yearly news post with one title and three paragraphs of text or editing some opening hours in a footer widget or exchanging a restaurant menu image or PDF file with a new version but for SEO the same path-/filename (almost impossible in WP) are the features for most real world scenarios.

      Create forum topic from comment

      • I think you and I agree… the “one” time someone needs convenient access to useful generic block patterns (wireframe) vs. some esoteric patterns is when a site is created. Otherwise, as I suggest, one has to go out and get plugins to offer the same ;-)

        I don’t see the purpose of having a pattern library of “random” patterns that are not generic and purposeful to end-uses (ie: sales pages or media or calls to action), but rather are very esoteric design oriented as thusfar demonstrated?

        Create forum topic from comment

  3. I was doing a bit of research earlier and discovered the filter “should_load_remote_block_patterns”. This allows you to disable all block patterns that are fetched from the WordPress patterns directory. You can then register your own client-specific patterns as you wish.

    That said, your overall point is well taken. While there is value to the new pattern explorer to many segments of the WordPress community, it also can be a hindrance as well. With any new feature, there also needs to be a way to turn it off.

    Create forum topic from comment

You may also like

Newsletter

Subscribe Via Email

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