Creating Gutenberg Blocks with ACF.


IMPORTANT: ACF plugin has to be installed and activated for this approach.

We are going to review a recent example for StateCollege. The block name would be PIC - Featured Agencies. For the new block we create a new folder under the theme in the blocks folder

Inside this block we are going to have php, css and js files if needed, also an acf-json folder in which later we are going to store the export of the custom field related to this block.

Once we have the structure ready, the first step is to register the block, to do this we define a new class to avoid duplicating functions names.
The code below will show a callback function completely working but this is not necessary at this step, since is what we are going to be developing here.

The class basic structure contains the following functions:
  • __construct: in this function we register the block and load the acf fields if stored in here, otherwise lines 11 and 12 must be commented out.
  • register_acf_block: in this function we define the registration of the block, so we have the callback function (what is going to be shown in the frontend) and we also specify if there is a css and js file associated with this block. Check lines 31 and 32, in this case there is only a css file.
  • acf_render_callback: here we have what is going to be seen in the front-end.
  • block_cta_acf_json_save_point: defines the saving point of the json acf filed definition
  • block_cta_acf_json_load_point: defines the load point of the json acf filed definition



class apartments_related_content
{
    private $block_name = 'apartments-related-content';
    private $block_title = 'Apartments Related Content';

    function __construct()
    {
        add_action('acf/init', array($this, 'register_acf_block'));
        add_filter('acf/settings/save_json', array($this, 'block_cta_acf_json_save_point'), 2);
        add_filter('acf/settings/load_json', array($this, 'block_cta_acf_json_load_point'), 31); 
    }

    function register_acf_block()
    {

        // check function exists
        if (function_exists('acf_register_block')) {

            // register a cards block
            acf_register_block(array(
                'name'                  => 'pic-' . $this->block_name,
                'title'                 => __('PIC - ' . $this->block_title),
                'description'           => __($this->block_title),
                'render_callback'       => array($this, 'acf_render_callback'),
                'category'              => 'common',
                'icon'                  => 'screenoptions',
                'keywords'              => array('unit', 'pricing'),
                'enqueue_assets'        => function () {
            wp_enqueue_style('block-css-' . $this->block_name, get_stylesheet_directory_uri() . '/blocks/' . $this->block_name . '/styles.css');
                    //wp_enqueue_script('block-js'. $this->block_name , get_stylesheet_directory_uri() . 'blocks/' .$this->block_name. '/block-'.$this->block_name.'.js', [], '1.0.0');

                },
                'supports'          => array(
                    'align' => true,
                    'mode' => false,
                    'jsx' => true
                ),
            ));
        }
    }

    function acf_render_callback($block)
    {
?>
        <!-- <div class="dark-blue-bg apartments-bussines-direcotry-bg" style="background-color: var(--blue-hover) !important;"> -->
        <div class="container">
            <h2>Related Content</h2>
            <div class="apartment-scl">
                <?php
                $post_ids = get_field('state_college_living_related_posts');
                foreach ($post_ids as $post_id) {
                    $post_image = get_the_post_thumbnail_url($post_id);
                    $post_title = get_the_title($post_id);
                    $post_excerpt = get_the_excerpt($post_id);
                    $post_link = get_the_permalink($post_id);
                ?>
                    <div class="apartment-scl-posts">
                        <img src="<?php echo $post_image ?>" alt="<?php echo $post_title ?>">
                        <div class="apartment-scl-posts-content">
                            <h4><?php echo $post_title; ?></h4>
                            <p><?php echo $post_excerpt; ?></p>
                            <a href="<?php echo $post_link ?>" style="color: var(--wp--preset--color--vivid-cyan-blue:) !important;">Read More</a>
                        </div>
                    </div>

                <?php
                }
                ?>
            </div>
        </div>
        <!-- </div> -->
<?php
    }

    // Load ACF fields
    function block_cta_acf_json_save_point($path)
    {

        $acf_block_name = "Block - " . $this->block_title;

        if ($_POST['acf_field_group']['title'] == $acf_block_name) {

            $path = get_stylesheet_directory_uri() . 'blocks/' . $this->block_name . '/acf-json';
        }

        return $path;
    }

    function block_cta_acf_json_load_point($paths)
    {

        unset($paths[0]);
        $paths[] =  get_template_directory() . 'blocks/' . $this->block_name . '/acf-json';

        return $paths;
    }
}

$apartments_related_content = new apartments_related_content();



The second step now is to associate a custom field to this block to do that we access the admin dashboard and into the ACF menu item.
After creating a group field you can associate it with the block in the settings panel as shown below.


Finally you would be able to add this block to a post - page, edit the custom field, and visualize the results in the front-end.