Gutenberg Blocks

How to Create Custom Gutenberg Blocks in WordPress (Easiest Way)

Hey! Do you want to create a custom Gutenberg block? There are so many difficult ways to create custom Gutenberg blocks. We will show the easiest way to Create Custom Gutenberg Blocks in WordPress.

Gutenberg is the most important part of WordPress theme development in peasant time. If you want to resize your single post then you need a custom Gutenberg block. Because the Classic editor is no longer to be used, it is now time for the Gutenberg editor.

What is Gutenberg:

Gutenberg arrived as part of WordPress 5.0, which was released on November 27, 2018. It’s a brand new editor for the WordPress platform.

It allows you to just drag and drop files anywhere on the screen and it will automatically create a block for you. You need to drop just your content then it will create a block automatically.  

In my point of view, It’s best for creating a post. But It’s poor for Page Builder. Too many features have still under development. We can hope, In the future, Gutenberg will be gained great popularity. 

Plugin for Gutenberg block:

You already find this article, which means, you already know about this. So, we are going to our main subject. Over the internet, We got so many articles about creating the Gutenberg block. But they explain how to create a Gutenberg block without plugins. We will show you some simple procedures.

Many custom field frameworks offer to us their premium extension for creating Gutenberg blocks. But we choose two of them.

ACF Blocks: This is one of the popular custom field frameworks. It’s easy to use. But If you want to use ACF Blocks. You need to be a premium member. Also, Need to buy a full framework. If you are already using their free version for another purpose. You can continue using it.

MB Blocks: Another choice for WordPress developers. Metabox is a custom field framework. Whatever you will need, complete with it. It is way easy for WordPress developers. No need for much coding knowledge.

Many developers face the problem of choosing a custom field framework. It’s difficult for beginners. Just think about it,  You don’t have time to build your own custom field framework. It is also a difficult task and time-consuming. 

We have another option to use a pre-made custom field framework. But, If you are a full beginner you want it for learning purposes. So, I will recommend buying Metabox premium extension MB-Block. If you have the ability. Therefore, if you don’t want to buy something for that then wait for my explanation article.

Create Custom Gutenberg Blocks in WordPress with MB Blocks:

We will use the Metabox framework for creating Gutenberg Block. 

At first, we need to install two plugins for that. 

One: Metabox (It’s a free plugin)

Two: MB Blocks (It’s premium)

Assuming we’re creating a hero area block (like the screenshot above). Open your theme’s functions.php file (or your plugin’s PHP file) and add the following code:

add_filter( 'rwmb_meta_boxes', function( $meta_boxes ) {
    $meta_boxes[] = [
        'title'           => 'Hero Content',
        'id'              => 'hero-content',
        'description'     => 'A custom hero content block',

        'type'            => 'block',
        'icon'            => 'awards',
        'category'        => 'layout',
        'context'         => 'side',
        'render_callback' => 'my_hero_callback',
        'enqueue_style'   => get_template_directory_uri() . '/blocks/hero/style.css',
        'supports' => [
            'align' => ['wide', 'full'],
        ],

        // 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;
} );

Then place a callback function.

 <?php
function my_hero_callback( $attributes, $is_preview = false, $post_id = null ) {
    // Fields data.
    if ( empty( $attributes['data'] ) ) {
        return;
    }

    // Unique HTML ID if available.
    $id = 'hero-' . ( $attributes['id'] ?? '' );
    if ( ! empty( $attributes['anchor'] ) ) {
        $id = $attributes['anchor'];
    }

    // Custom CSS class name.
    $class = 'hero ' . ( $attributes['className'] ?? '' );
    if ( ! empty( $attributes['align'] ) ) {
        $class .= " align{$attributes['align']}";
    }
    ?>
    <div id="<?= $id ?>" class="<?= $class ?>" style="background-color: <?= mb_get_block_field( 'background_color' ) ?>">
        <?php $image = mb_get_block_field( 'image' ); ?>
        <img class="hero__image" src="<?= $image['full_url'] ?>">

        <div class="hero__body">
            <h2><?php mb_the_block_field( 'title' ) ?></h2>
            <h3><?php mb_the_block_field( 'subtitle' ) ?></h3>
            <div class="hero__line"></div>
            <div class="hero__content"><?php mb_the_block_field( 'content' ) ?></div>

            <?php $signature = mb_get_block_field( 'signature' ); ?>
            <img class="hero__signature" src="<?= $signature['full_url'] ?>">

            <?php if ( mb_get_block_field( 'button_url' ) ) : ?>
                <p><a class="hero__button" href="<?php mb_the_block_field( 'button_url' ) ?>"><?php mb_the_block_field( 'button_text' ) ?></a></p>
            <?php endif ?>
        </div>
    </div>
    <?php
}

If you place the codes on your function.php file then you already see a Block named “Hero Content”. I am not responsible for this code you can see full details Documentation.

Conclusion:

Gutenberg is growing nicely. Every developer and webmaster should have knowledge about this. For creating a post you need to use it must.

My effort in this article shows a too easy a way to create Block. I have tried to introduce to you some good plugins for that. I hope that you will get benefit from it.

See More:

How to Create Social Share Button in WordPress without Plugin

2 comments

  1. Wonderful work! This is the kind of information that are supposed to be shared across the web. Shame on Google for now not positioning this submit upper! Come on over and seek advice from my web site . Thank you =)

  2. Im pretty pleased to discover this great site. I need to to thank you for ones time due to this wonderful read!! I definitely liked every bit of it and i also have you book marked to see new things in your website.

Leave a Reply

Your email address will not be published.