Build Gutenberg Blocks Visually With Meta Box Builder

Last week, we introduced MB Blocks, a plugin that allows you to create Gutenberg blocks with just PHP. Today, we're happy to announce that you can now build Gutenberg blocks visually with Meta Box Builder. That means you don't have to write any single line of PHP code. Everything can be done with the Meta Box Builder UI.

Table of Contents hide

1. Quick Overview
2. Video Tutorial
3. Twig For Block Template
1. 3.1. PHP / WordPress Functions
4. Is MB Blocks Still Required?
5. Download Meta Box Builder Now

This version also introduces Twig - a popular template engine for PHP. Twig is bundled into the Meta Box Builder to let you write block templates easier and faster. See below for details.

Quick Overview

To create a block for Gutenberg, simply follow these steps:

Go to Meta Box → Field Groups and create a field group, which holds all fields for the block
In the Settings tab, set the field group show for Block
Then edit the block options
Finally, enter the block template code (if you choose to render the block with code)

Here is the screenshot of the block settings, where you can see all the settings as well as the block template code:

Build gutenberg blocks with Meta Box Builder

Video Tutorial

For a quick tutorial, please see this video:

Build Gutenberg Blocks Visually With Meta Box Builder

Watch this video on YouTube

Twig For Block Template

In this version, we decide to use Twig template engine to let you write block template code easier. Twig is a famous template engine for PHP, created by the Symfony's author (FYI, Symfony is one of the top popular PHP framework).

Using Twig allows developers to write block template in a beautiful, short, and flexible syntax. See the below syntax for an alert block (which is created in the video above):

{% if not message %}
    <p>Please enter a message</p>
{% else %}
    {% if not type %}
        {% set type = 'warning' %}
    {% endif %}

    <div class="alert alert--{{ type }}">
        {{ message }}
    </div>
{% endif %}

Twig helps us accessing the block fields' values easily via a custom variable {{ field_id }}. If the field has an array value (such as single_image), then you can access to an attribute via a short syntax like this {{ field_id.full_url }}.

Twig supports variables, controls, functions, and filters which allow you to write the template without PHP. See Twig documentation for details.

PHP / WordPress Functions

A question you might have is if I use Twig for block template code, can I access to a PHP or WordPress function?

The short answer is: Yes, of course!

You can access to any PHP / WordPress function via {{ mb.function() }} syntax, where function is the function name. For example, you can output the site title with this code:

{% set site_title = mb.get_bloginfo( 'name' ) %}
{{ site_title }}

That's pretty easy, isn't it?

Is MB Blocks Still Required?

If Meta Box Builder can build Gutenberg blocks, then is MB Blocks plugin still required?

Yes, MB Blocks is still required. It provides a solid foundation and API to create Gutenberg blocks with just PHP. Meta Box Builder provides UI for users to make the process easier (you can refer to this article to know how to use Meta Box Builder to create and configure custom fields). All the logic behind Meta Box Builder is handled by MB Blocks. So you still need it active to make Gutenberg blocks work!

Download Meta Box Builder Now

You can get the Meta Box Builder here. You also need to get the MB Blocks extension.

If you already have a developer or lifetime license, you can download them from your My Account page. It's also available in the Meta Box AIO plugin.

If you have any ideas or suggestions for using the plugin, please let us know in the comments!

P/s: We have Online Generator tool with a similar UI. But Meta Box Builder is more convenient and works better with other Meta Box extensions.