Tech twist

Home » News » Gutenberg Hub Launches an Online Page Builder App Using WordPress Patterns

Gutenberg Hub Launches an Online Page Builder App Using WordPress Patterns

For what seems like an eternity, I’ve been preaching about the power of patterns. And then, just when I think I’ve figured out what this feature would look like next, someone comes up with a fresh idea. Munir Kamal is often the person.

He said earlier this week that he will offer a “small” page-generation software that integrates with the WordPress patterns library. He made the announcement that it was live on Gutenberg Hub today.

Although the app is still in its early stages of development, the existing online version is functional. It’s essentially an interface that lets users link together patterns to create full pages. Users cannot alter the material directly, unlike the block editor. They can instead mix and match patterns, copy the block code, and put it into their WordPress editor.

Users will see an empty canvas with a list of key pattern categories in the left sidebar panel when they first visit the Builder sub-site on Gutenberg Hub. Selecting a category, looking for a favourite design, and clicking on it is all it takes to add a new pattern to the page:

Inserting a pattern into the Builder app.

Users are not required to stop once a single pattern has been inserted. The goal of this project is to create a whole webpage out of different patterns. Then, using the “Copy Code” option, copy the generated block code and paste it into the WordPress editor. It’s a convenient approach to experiment with new concepts.

The patterns are displayed for a desktop view by default. Users may, however, see how the design works on tablet and mobile devices.

All of the Builder’s current patterns are sourced from the WordPress Pattern Directory. The API is open to the public, allowing others to create applications using it.

While Kamal hasn’t said whether he’ll show off patterns that aren’t in the official directory, it’s not out of the question. In the sidebar of the Builder UI, there is a section titled “Core.” I’m only guessing, but I believe he intends to expand this in the future.

The Builder interface has a menu button in the top right corner. This brings up the Navigator window. It allows visitors to change the layout of the page:

Navigator panel on the right.

Moving complete patterns up or down, destroying them, or duplicating them are all alternatives. Based on my previous experience, this was a more convenient approach to make changes than trying to choose huge groups of blocks in the WordPress editor.

The only thing I’d want to see is a “back” button. It’s simple enough to open the navigator and delete an inputted pattern, but an undo option in the toolbar area would be more convenient.

Visitors to the Gutenberg Hub’s Builder are unable to change the content of the patterns. Its primary goal is to help you create layouts. Users customise it by pasting it all back into their own WordPress editor.

Users may share their works with others, which is perhaps my favourite aspect of the programme. For each option, the Builder generates a unique URL that is easy to share on social media:

Popover after clicking share button.

The concept of sharing is almost integrated into the block scheme of WordPress. Because everything is based on a well-rounded set of standards, it’s simple to keep paying it forward with the tools that others create on top of it.

I’m excited to see where Kamal takes this project in the future, even though it’s still in the concept stage. He also posted a short video of the Builder in action on YouTube.

Leave a Comment

Your email address will not be published.