Custom Gutenberg Block In WordPress

24 / 100

Creating your own custom Gutenberg block in your WordPress theme is so super easy and with Gutenberg, you can speed up your theme development by separating HTML into a piece of blocks. To make content dynamic you can install the Advanced Custom Fields plugin which gives you the power to create the dynamic fields and easily retrieve its values in the block. So let’s create our first Gutenberg block in the WordPress theme and follow the simple steps.

Before we create any new block first we have to register our block category, and based on that category our all blocks will be listed under our category so the user can easily find all custom blocks. To register the block category, navigate to your active theme and place the below code in your function.php.

1. REGISTER BLOCK CATEGORY:

/**
 * Register Block Category.
 *
 * @param [type] $categories
 * @return void
 */
function custom_block_category($categories) {
    return array_merge(
        $categories,
        array(
            array(
                'slug' => 'custom-block',
                'title' => __('Custom Block', 'Custom Block'),
            ),
        )
    );
}
add_filter('block_categories', 'custom_block_category', 10, 2);

After registering our block category called custom-block in function.php, now let’s create a card block and place again below code in your function.php.

2. REGISTER BLOCK:

/**
 * Register Acf Block Types.
 *
 * @return void
 */
function register_acf_block_types() {

    // Register custom block here
    acf_register_block_type(array(
        'name'              => 'card',
        'title'             => 'Card',
        'description'       => '',
        'render_template'   => 'blocks/card.php',
        'category'          => 'custom-block',
        'icon'              => 'format-gallery',
        'keywords'          => array('bootstrap card'),
        'mode'           => 'edit',
        'enqueue_assets'    => function() {
            //
        }
    ));

}
// Check If Function Exists And Hook Into Setup.
if (function_exists('acf_register_block_type')) {
    add_action('acf/init', 'register_acf_block_types');
}

Once you register block in your function.php file you have to create a card.php in blocks folder in your active theme and create all custom blocks file inside the blocks directory.

3. CREATE FIELD GROUP:

Now let’s create a new field group with any name you want in ACF and add bellow fields:

Image as Image
Content as Text Area

Once you add the above fields you have to choose your block from the rules and publish the field group.

2. Place HTML CODE FOR CARD:

Now open your card.php file from the card’s directory and insert the below code.

<div class="card">
    <img src="<?php echo get_field('image'); ?>" class="card-img-top" alt="Card image cap">
    <div class="card-body">
        <p class="card-text"><?php echo get_field('content'); ?></p>
    </div>
</div>

As you can see that I am retrieving values from the ACF fields so now go to any post and add your first custom Gutenberg block.

Happy Coding 😉

Share this: