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.

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 a new JavaScript framework – React, 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:

Creating Gutenberg blocks with MB Blocks
Block settings and block live preview in the block editor

The full code for the block is available in the Meta Box Library on Github. For documentation, please see this page.

Video Tutorial

See the video below to know how to create a Gutenberg block with the new extension:

How To Download The New Extension?

The new extension is available for purchasing.

If you have a developer or lifetime bundle, please login to your account and download it. It’s also available in the Meta Box AIO plugin as well.

To understand more about the extension, how it works and its benefits, please visit:

Leave a Reply