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.

This version also introduces Twig – a popular template engine for PHP. Twig is bundled into the Meta Box Builder to let you write block template 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 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

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 }}
{% 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 for 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. 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 idea or suggestion using the plugin, please let us know in the comments!

Create Gutenberg Blocks with MB Blocks

Leave a Reply

Your email address will not be published. Required fields are marked *