Introducing MB Blocks - Creating Gutenberg Blocks Now Made Easy

We're happy to announce that our latest extension for Meta Box - MB Blocks is now available for download. This extension allows you to create custom Gutenberg block with only PHP. There's no need to learn React, Webpack or Babel. Everything is straight-forward and very easy for Meta Box users.

Table of Contents hide

1. Why MB Blocks?
2. Example
3. Video Tutorial
4. How To Download The New Extension?

Why MB Blocks?

You might already know that creating a custom Gutenberg block is not very easy, especially for WordPress developers who have spent many years learning and mastering PHP. Because a Gutenberg block requires you to learn React - a new JavaScript framework, and some tools go with it such as Webpack and Babel. That might take a month to know how to do things properly with JavaScript and that's still a nightmare for many developers.

With MB Blocks, you're now able to create custom Gutenberg blocks with only PHP. You don't need to learn a new thing, even new syntax. MB Blocks utilize all the syntax and settings from Meta Box to simplify the process. If you're already a Meta Box user, creating a new Gutenberg block won't take longer than 10 minutes.

Example

The sample code below gives you an idea how to create a Gutenberg block with MB Blocks:

<?php
// Register a hero content block for Gutenberg.
add_filter( 'rwmb_meta_boxes', function( $meta_boxes ) {
    $meta_boxes[] = [
        'title' => 'Hero Area',
        'id'    => 'hero-area',
        'type'  => 'block', // Important.

        'icon'  => 'awards', // Or you can set a custom SVG if you don't like Dashicons
        'category' => 'layout',
        'context' => 'side', // The block settings will be available on the right sidebar.
        'supports' => [
            'align' => ['wide', 'full'],
        ],

        'render_template' => get_template_directory() . '/blocks/hero/template.php', // The PHP template that renders the block.
        'enqueue_style'   => get_template_directory_uri() . '/blocks/hero/style.css', // CSS file for the block.

        // Now register the block fields.
        'fields' => [
            [
                'type' => 'single_image',
                'id'   => 'image',
                'name' => 'Image',
            ],
            [
                'type' => 'text',
                'id'   => 'title',
                'name' => 'Title',
            ],
            [
                'type' => 'text',
                'id'   => 'subtitle',
                'name' => 'Subtitle',
            ],
            [
                'type' => 'textarea',
                'id'   => 'content',
                'name' => 'Content',
            ],
            [
                'type' => 'single_image',
                'id'   => 'signature',
                'name' => 'Signature',
            ],
            [
                'type' => 'text',
                'id'   => 'button_text',
                'name' => 'Button Text',
            ],
            [
                'type' => 'text',
                'id'   => 'button_url',
                'name' => 'Button URL',
            ],
            [
                'type' => 'color',
                'id'   => 'background_color',
                'name' => 'Background Color',
            ],
        ],
    ];
    return $meta_boxes;
} );

And how this block appears in the block editor: