Gutenberg Hub Launches an Online Page Builder App Using WordPress Patterns

I have been raving about the power of patterns for what feels like forever at this point. And, just when I start wondering what this feature will look like next, someone surprises me with a new idea. Often that person is Munir Kamal.

He mentioned that he would share a “little” page-generation app that ties into the WordPress patterns library earlier this week. Today, he publicly announced that it was live on Gutenberg Hub.

The app is still at a concept stage, but the current online version works well. Essentially, it is an interface that allows users to piece together patterns to build entire pages. Unlike the block editor itself, users cannot directly edit the content. Instead, they can mix and match patterns, copy the block code, and paste it into the editor on their WordPress install.

When first visiting the Builder sub-site on Gutenberg Hub, users will see an empty canvas with a list of core pattern categories in the left sidebar panel. Inserting a new pattern into the page is as simple as selecting a category, searching for a preferred design, and clicking on it:

Website with a content canvas and WordPress block pattern in it.  On the side is a list of pattern categories with an inspector open, displaying multiple pattern options.
Inserting a pattern into the Builder app.

Users do not need to stop after inserting a single pattern. The idea behind this project is to build an entire webpage from multiple patterns. Then, grab the resulting block code via the “Copy Code” button and paste it into the editor in WordPress. It is a convenient way to play around and try out new ideas.

By default, the patterns are presented for a desktop view. However, users can check how the design responds to tablet and mobile devices.

The Builder pulls all of its current patterns directly from the WordPress Pattern Directory. The API is public and allows others to build applications on top of it.

While Kamal made no indication that he would showcase patterns from outside the official directory, it is probably not out of the question. The Builder UI has a section labeled “Core” in the sidebar. I am merely speculating, but I assume he plans to extend this in the future.

A menu button sits in the top right corner of the Builder interface. This opens the Navigator interface. It allows visitors to customize the page layout:

Builder app with a left sidebar showing a list of WordPress block pattern categories, the center a content canvas, and the right a navigator of inserted patterns.
Navigator panel on the right.

There are options for moving entire patterns up or down, trashing them, or duplicating them. Based on my experience thus far, this was an easier way to make adjustments than when attempting to select large groups of blocks in the WordPress editor.

The only feature I would request is a “back” button. It is easy enough to open the navigator and trash an inserted pattern, but it would be quicker to undo that action via a dedicated button in the toolbar area.

Gutenberg Hub’s Builder does not allow visitors to customize the content of the patterns. Its purpose leans more toward layout creation. The customization happens when users paste it all back into their own WordPress editor.

Perhaps my favorite feature of the app is that users can share their creations with others. The Builder creates a custom URL for each variation and makes it easy to share over social media:

Builder app with an overlay for sharing both a direct link and selecting among multiple social networks.
Popover after clicking share button.

The concept of sharing is almost built into WordPress’s block system. Because everything is built upon a well-rounded set of standards, the tools that others build on top of it make it easy to continue paying it forward.

While this project is still in the concept stage, I am eager to see where Kamal takes it in the future. He also shared a short YouTube clip of the Builder in action.


9 responses to “Gutenberg Hub Launches an Online Page Builder App Using WordPress Patterns”

  1. Hey Justin,

    Thank you so much for sharing about this app. This is very much a concept app right now, but I am taking feedback and suggestions to make it more useful in the future.

    I also think the official patterns library needs to have more organized collections. For example, there is no ‘Footer’ category for patterns, and I have noticed some ‘Footer’ patterns listed under the ‘Header’ category. Similarly, there are many common missing content section categories, making it difficult for users to find the correct pattern. The more organized the patterns library becomes, this app automagically improves further.

    Thanks again for sharing 🙌

  2. Playing with this as we speak. Love the concept, however, did find that the images do not load into the media folder. (They are a remote call instead). That confused me for a few minutes until I figured it out. Got pagespeeds by Google from 56% on mobile up to 100%!

    It’s a simple matter to replace them with your own. Also, some of those images in the patterns are huge!

    What a wonderful tool. Very, very quick to throw something basic together from a design perspective. Thanks! You make so many great contributions to the community.

    • Munir didn’t create the patterns. They are automatically pulled from the official WordPress pattern directory, so he can’t match up the patterns to look a certain way in the app.

      I think some of them look quite nice, though. Definitely search around. You might find something that appeals to you.

    • Currently, the biggest difference is that it’s easy to move entire patterns around the layout, which is something not available in WordPress. You can also share your designed pages via a URL on the site with others.

      Knowing Munir’s history, I’m sure he will continue experimenting with other ideas around it. It also seems to be designed in a way where he might add other patterns (those not in WP).


Subscribe Via Email

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