Skip to content

PHP Articles

php | frameworks | cms | and all web things.

Menu
  • Home
  • Laravel
  • WordPress
  • Server
  • Database
  • Google
Menu
wpf

Custom Gutenberg Block In WordPress

Posted on February 3, 2021April 30, 2022 by admin
24 / 100
Powered by Rank Math SEO

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.

gutenberg wordpress

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.

gutenberg wordpress

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.

gutenberg wordpress
gutenberg wordpress

Happy Coding 😉

 

Share this:

  • Twitter
  • Facebook

Top Posts

  • Laravel Swagger Authenticate Users Via Bearer Token
  • How To Use wp_mail With WordPress
  • WordPress Custom Post Type Pagination
  • How To Use Darkaonline/l5-Swagger In Laravel

Recent Posts

  • Custom Gutenberg Block In WordPress
  • Laravel Swagger Authenticate Users Via Bearer Token
  • How To Use Darkaonline/l5-Swagger In Laravel
  • How To Fix You Already Have An Adsense Account
  • Laravel Passport Create Api For Your Application
  • Laravel Api Integration & Configuration

Archives

  • February 2021
  • July 2020
  • March 2020
  • February 2020
  • May 2019
  • January 2019
  • April 2018
  • March 2018
  • January 2018
  • December 2017

Categories

  • Ajax
  • Database
  • Google
  • Laravel
  • Server
  • WordPress
© 2022 PHP Articles | Powered by Minimalist Blog WordPress Theme