How to Create a Gutenberg Block with Advanced Custom Fields (ACF)

Gutenberg is the new WordPress editor that allows you to create and edit pages and posts using blocks. Blocks are reusable pieces of content that can be combined to create complex layouts.

Advanced Custom Fields (ACF) is a popular WordPress plugin that allows you to add custom fields to your posts and pages. ACF can be used to collect and store all sorts of data, such as contact information, product details, and user preferences.

In this article, we will show you how to create a custom Gutenberg block with ACF. We will walk you through the steps of registering your block, creating your fields, and rendering your block.

Install the ACF plugin

To install the ACF plugin, go to Plugins > Add New in your WordPress dashboard. Search for “Advanced Custom Fields” and click Install Now. Once the plugin is installed, click Activate.

Here are the steps in detail:

1. Go to Plugins > Add New in your WordPress dashboard.
2. Search for “Advanced Custom Fields” and click Install Now.
3. Once the plugin is installed, click Activate.

Register Block

Create a cxc-all-block.php file and cxc-acf-block-callback.php include its to functions.php file(This file is located in your theme folder).

You can use below code to include file cxc-all-block.php and cxc-acf-block-callback.php.

Add this file to the folder like this :

• page-templates/block/cxc-all-block.php
• page-templates/block/cxc-acf-block-callback.php

include ‘page-templates/block/cxc-all-block.php’

<?php 

/**
 * Used Code :'cxc-all-block.php'.
 */

// add Home About Block

add_action( 'acf/init', 'cxc_home_about_init' );
function cxc_home_about_init() {

    // check function exists

    if( function_exists('acf_register_block') ) {

        // register a home-hero-block block
        acf_register_block(array(
            'name'              => 'home-hero-block',
            'title'             => __('Home Hero Block'),
            'description'       => __('A custom home hero block.'),
            'render_callback'   => 'my_home_hero_callback_func',
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'keywords'          => array( 'home-hero-block', 'quote' ),
        ));
    }
}

?>

include 'page-templates/block/cxc-acf-block-callback.php'

<?php  

/**
 * Used Code :'cxc-acf-block-callback.php'.
 */

// ACF Render Callback 
// Home Page Callback
function my_home_hero_callback_func( $block ) {
    if( file_exists( get_theme_file_path("/page-templates/block/home/home-hero-block.php") ) ) {
        include( get_theme_file_path("/page-templates/block/home/home-hero-block.php") );
    }  
}

?>

Create Field Group

To create a field group, go to ACF > Field Groups in your WordPress dashboard. Click Add New and give your field group a title. You can also add a description and set location rules to control where the field group will appear.

Once you have created your field group, you can add fields to it. To add a field, click the Add Field button and select the type of field you want to add. You can then customize the field settings.

Once you have added all the fields you need, click Save. Your field group will now be available in the WordPress editor.

Here are the steps in detail:

1. Go to ACF > Field Groups in your WordPress dashboard.
2. Click Add New and give your field group a title.
3. You can also add a description and set location rules to control where the field group will appear.
4. Click the Add Field button and select the type of field you want to add.
5. You can then customize the field settings.
6. Once you have added all the fields you need, click Save.

When I return to the Gutenberg editor and select to enter the portfolio item block after having the file available, I see the following:

For more details visit here.

Render Block

You must include a file with the same name and location as the one you specified when you registered your block for use in order for that to occur. This is /page-templates/block/home/home-hero-block.php in my instance. I put the following in there:

This is done by adding the following code to your functions.php file:

<?php

$home_hero_logo = get_field( 'home_hero_logo' );
$home_hero_main_text = get_field( 'home_hero_main_text' );
$home_hero_textarea = get_field( 'home_hero_textarea' );

echo '<div class="home-hero-item">';
if( !empty( $home_hero_logo ) )
	echo wp_get_attachment_image( $home_hero_logo, 'thumbnail', null, array( 'class' => 'home-hero-logo alignleft' ) );
if( !empty( $home_hero_main_text ) )
	echo '<h3 class="home-hero-title">' . $home_hero_main_text . '</h3>';
if( !empty( $home_hero_textarea ) )
	echo '<div class="home-hero-description">' . $home_hero_textarea . '</div>';
echo '</div>';

?>

In this article, we have shown you how to create a custom Gutenberg block with ACF. We hope that this tutorial has been helpful. If you have any questions, please feel free to leave a comment below.

Here are some of the key takeaways from this article:

• To create a custom Gutenberg block with ACF, you need to install the ACF Pro plugin.
• You need to register your block in your functions.php file.
• You need to create a field group in the ACF settings.
• You need to render your block in your functions.php file.
• You can provide styling for your custom block by adding CSS to your theme’s style.css file.

We hope that this article has given you a good starting point for creating your own custom Gutenberg blocks with ACF. With a little creativity, you can create custom blocks that will add new functionality and flexibility to your WordPress site.

Here are some additional resources that you may find helpful:

ACF Blocks documentation: https://www.advancedcustomfields.com/resources/blocks/

Gutenberg Block tutorial: https://www.advancedcustomfields.com/blog/acf-5-8-introducing-acf-blocks-for-gutenberg/

Thank you for reading!