The creation of custom blocks in Gutenberg has become a common practice among WordPress developers and site owners looking to exert greater control over the presentation of their content. While it’s possible to build Gutenberg blocks from scratch, there’s an alternative that has proven significantly more convenient and powerful: using Advanced Custom Fields (ACF) to generate custom blocks.

Why should you consider ACF as your primary ally in crafting Gutenberg blocks? The answer lies in the numerous advantages this combination brings to the table. In this article, we’ll show the reasons why ACF has become an indispensable tool for anyone looking to streamline and expedite the development process of custom Gutenberg blocks. From intuitive user interface solutions to simplified data management, ACF proves to be an ideal partner to help you create Gutenberg blocks that stand out in terms of functionality and versatility.

Step 1: Setting Up the Class

To start, we’ll create a PHP class that encapsulates the functionality of our custom block. This class will handle block registration, rendering, and field management. Here’s the basic structure:

class GithubItemBlock {
    public function __construct() {
        add_action('acf/init', array($this, 'registerBlock'));
        add_action('acf/include_fields', array($this, 'addFields'));
    }
}

In this class, we use the constructor __construct() to set up our actions for registering the block and adding custom fields.

Step 2: Registering the Gutenberg Block

The registerBlock function registers our custom Gutenberg block. It specifies block details such as name, title, description, rendering callback, category, icon, and keywords. Here’s how it’s done:

public function registerBlock() {
    if (function_exists('acf_register_block')) {
        acf_register_block(array(
            'name'              => 'github-item',
            'title'             => __('GitHub Item'),
            'description'       => __('A custom block for GitHub items.'),
            'render_callback'   => array($this, 'renderCallback'),
            'category'          => 'layout',
            'icon'              => 'excerpt-view',
            'keywords'          => array('github'),
        ));
    }
}

As an alternative to the render_callback, you can define a render_template for your Gutenberg block. Using a template can further simplify the management of your block’s HTML markup and make your code cleaner and more organized.

Step 3: Rendering the Block

The renderCallback function defines how our Gutenberg block should be displayed on the frontend. It retrieves data from the ACF field and generates the block’s HTML structure. Here’s the code:

public function renderCallback($block) {
    $repository_url = get_field('repository_url', $block['id']) ?: '';
    $class = 'wp-github-repository-' . $block['id'];

    echo '<div class="wp-github-repository ' . $class . '">' . $repository_url . '</div> ';
}

Step 4: Adding Custom Fields

In the addFields function, we define the custom fields for our block using ACF. These fields will be displayed in the block’s settings in the Gutenberg editor. Here’s how to do it:

public function addFields() {
    if (function_exists('acf_add_local_field_group')) {
        acf_add_local_field_group(array(
            'key' => 'group_64fc74a48fabe',
            'title' => 'GitHub Item Block',
            'fields' => array(
                array(
                    'key' => 'field_64fc74a43d180',
                    'label' => 'Repository URL',
                    'name' => 'repository_url',
                    'aria-label' => '',
                    'type' => 'url',
                    'instructions' => '',
                    'required' => 0,
                    'conditional_logic' => 0,
                    'wrapper' => array(
                        'width' => '',
                        'class' => '',
                        'id' => '',
                    ),
                    'default_value' => '',
                    'placeholder' => '',
                ),
            ),
            'location' => array(
                array(
                    array(
                        'param' => 'block',
                        'operator' => '==',
                        'value' => 'acf/github-item',
                    ),
                ),
            ),
            'menu_order' => 0,
            'position' => 'normal',
            'style' => 'default',
            'label_placement' => 'top',
            'instruction_placement' => 'label',
            'hide_on_screen' => '',
            'active' => true,
            'description' => '',
            'show_in_rest' => 0,
        ));
    }
}

In this comprehensive guide, we’ve walked you through the process of creating a custom Gutenberg block using Advanced Custom Fields (ACF). By encapsulating the block’s functionality within a class, we’ve made the code more organized and maintainable. You now have a better understanding of how to register custom blocks, render them, and add custom fields to enhance your WordPress site’s capabilities. Experiment with different block designs and functionalities to meet your specific content needs. Happy block building!

Category: WordPress

Creating Gutenberg Blocks with ACF: A Step-by-Step Guide

My local development environment and how I update in production

HeadstartWP â€“ Create a custom Gutenberg block

Let’s suggest a translation fix for a WordPress plugin

My thoughts on CSS