Gutenberg Hub Launches Online Block Template Builder

Gutenberg Hub launched the first version of its block template builder last week. The template builder allows users to select from the team’s existing library of nearly 200 templates. It is essentially an online builder that allows users to craft a full page layout by mixing and matching various sections. They can then copy the resulting output at the click of a button and paste it into the editor on their sites.

“I intend to speed up the workflow for WordPress users to spin up beautiful Gutenberg pages, even full websites, faster,” said Munir Kamal, founder of Gutenberg Hub. “So all I am trying to do is headed in that direction.”

Kamal has also released a Chrome browser extension that allows end-users to add templates from the growing library of options.

“The idea is to help DIYers, freelancers, or anyone with creating new website pages faster,” he said. “I have many feature ideas to make this builder great, but I want to hear out the feedback and suggestions from the community about it.”

Currently, Kamal is calling this version of the builder a “prototype” because he wants to validate the idea with the community before moving forward with new features.

Using the Template Builder

Building a template or full page is simple. Users merely need to visit the template builder page. On the page, the builder has an “Add Section” button, which will slide the template library panel open. From that point, users can choose from an extensive list of templates that includes designs for hero sections, testimonials, sliders, and more.

Screenshot of Gutenberg Hub's template builder library.
Gutenberg Hub’s templates library.

The idea is to build a full page by combining multiple sections. Users will want to add new sections and organize them for their needs. Each section can be trashed, duplicated, or moved up/down using the available buttons.

Trying my hand at building a simple product page, I was able to pick and choose the sections I wanted to add in just a few minutes.

Screenshot of a custom combination of templates in Gutenberg Hub's template builder.
Custom combination of templates with the builder.

Once everything is in place, users can copy the full template code and paste it their block editor. From that point, they can edit it on their own site.

Sometimes, it may be necessary to copy additional CSS and insert it via the WordPress customizer or through a plugin like Blocks CSS. Some options also require users to install a plugin to use specific blocks.

This is the type of power I want in the hands of WordPress users. Plug-and-play template systems like this will push the platform into the future. However, such systems need to be integrated directly into WordPress. Copying and pasting from a third-party website is merely a stepping stone toward that future, catering to user needs in the here and now.

The Future of the Builder and More

Long term, Gutenberg Hub’s work may be a better fit into the upcoming pattern system. The team could release a plugin that would integrate seamlessly into the block editor. That way, end-users could build their templates without ever leaving the comfort of the post-editing screen, or at least avoid switching between browser tabs. However, patterns are still months away from inclusion in core WordPress. In the meantime, this feels like a solid stop-gap. Plus, the team can build a nice library and garner feedback and data from users on the most popular templates/patterns.

While Kamal wants to hear feedback before moving forward, he does have some big ideas of his own for the builder. “For example, this builder may let you create projects, and under projects, you may create multiple pages,” he said. “For each project, you may define custom branding (typography, color scheme, etc.), and all the templates from the library will adapt to that branding when you create pages under a specific project.”

The most important thing he wants to accomplish is to build tools that speed up workflows for everyone.

He will also open the template library to third-party developers and designers soon. There will be a public submission process. If enough people contribute, the library could balloon to an untold number of options that would be directly available as part of the builder.

“Besides the templates and builder, I am planning something around the Gutenberg Templates API,” said Kamal. He stresses that it is still in the planning phase. If the previous work that he has put out is any indication, this could be an interesting project. He is also working on a form builder plugin for the block editor, which is currently seeing regular updates.

10

10 responses to “Gutenberg Hub Launches Online Block Template Builder”

  1. Lenin Zapata says:

    It looks great the idea and the potential in the future, copying 2 instances of code is simple but maybe it would also be looking for a way to download the 2 files (text block and css) in a .zip file and upload it within the gutenberg editor This is how the blocks are assembled in a magical and automatic way.

    Report

    • Munir Kamal says:

      Hi,

      Thank you for the feedback.

      Just wondering why would you like to go through a long process by downloading zip and then extract it on your desktop then import it in WordPress via an importer plugin or built-in importer?

      Isn’t the Copy & Paste approach much simpler and fast?

      Report

      • Lenin Zapata says:

        It made me confused to copy and paste, I did not know where to paste it, but it is only an alternative.
        Where could I create new templates to help development?

        Report

        • Munir Kamal says:

          You paste it in Gutenberg editor simply. So rather than downloading the template & than import it in WordPress, you simply Copy & Paste in Gutenberg.

          I am going to add a submit button on the Library page where the WordPress community can share their section designs.

          I’ve put together a quick page already which you can try now. It also has an instructional video to guide you on how to prepare your template to submit.
          https://templates.gutenberghub.com/submit/

          Thanks

          Report

  2. Joseph Quinn says:

    This has huge potential. I would like to see it incorporated into the WordPress core so you don’t even have to leave the post editor which is what it sounds like might be coming in the future. The idea of adding projects that can automatically be styled to fit your site design will increase productivity. I’m excited about the prospect of these ideas coming to life in future WordPress releases

    Report

    • Yes, block patterns are happening in a version or two for core WordPress. What I would like to see from the Gutenberg Hub team is for them to take the template library and integrate it into the pattern system via a plugin.

      There’s a host of interesting things that could happen like this. They could potentially even attach it to an API on their site so that the patterns offered by the plugin stays updated. Maybe a paid service that stores project files through the API. Custom branding (colors, fonts, etc.).

      I think the work here has huge potential, particularly with such a large template design library at this point.

      Report

    • Munir Kamal says:

      Using our chrome browser extension (Link mentioned in the post) you already have the Templates Library accessible while you are working in the Gutenberg. Using that you don’t have to leave the editor, simply browse templates and copy-paste it where you want to insert the section. We have also integrated the Unsplash Stock Images API in the extension so when you insert a design you can quickly replace the images with the relevant stock images if you like.

      Here is a quick intro video of the extension.

      The Builder, on the other hand, is another use case where you need to spin Gutenberg pages quickly without even installing WordPress or anything.

      What do you think?

      @Justin – Those are some great suggestions, and yes I am definitely looking into patterns API and all the progress going on with the Gutenberg editor.

      Thanks

      Report

  3. Amit Biswas says:

    This is going to be awesome. I already have used Elementor page builder with similar templating features but Gutenberg in WordPress is special on this occasion. The future is very bright as per couple of important things in my mind right now – 1. Less dependency on third party plugins, 2. Lightweight and Search engine friendly.

    There is more which we can explore. Thanks…

    Report

  4. I like the idea of the content templates that you can copy and paste in the block editor. I tried it out by copying and pasting the HTML and was pleasantly surprised that the post looked exactly like the template.

    Things are really looking up for the block editor with such resources. Now I can hardly wait for block patterns to become part of the WordPress core.

    Report

  5. David Boozer says:

    So, I just set my eyes on it…WOW! That is actually really, really cool and I am already messing around with it. I have to say, using blocks and all the editing options today is just amazing!

    Report

Newsletter

Subscribe Via Email

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

%d bloggers like this: