How to Create Custom Gutenberg Blocks Using ACF Pro

Overview

Creating custom Gutenberg blocks using ACF can significantly enhance your WordPress site’s functionality and design. One of the easiest and most flexible ways to achieve this is by using Advanced Custom Fields (ACF). In this post, we’ll walk you through the steps to create a custom Gutenberg block with ACF Pro. Let’s get started!

Prerequisites

Before you begin, ensure you have the following:

• A WordPress site (preferably with the latest version)
• ACF Pro plugin (required for block creation)
• Basic knowledge of PHP and WordPress development

Step 1: Install and Activate ACF Pro

1. Purchase and download the ACF Pro plugin from the ACF website.
2. Install the plugin by navigating to Plugins > Add New in your WordPress dashboard.
3. Upload the ACF Pro zip file and activate the plugin.

Step 2: Create a New Field Group

1. Go to Custom Fields > Field Groups.
2. Click on Add New.
3. Give your field group a title (e.g., “Custom Block Fields”).
4. Add fields you want to include in your block (e.g., text, image, etc.).
   • Field Label: Enter a name for the field.
   • Field Name: This will be generated automatically.
   • Field Type: Choose the type of field you need.
5. In the Location section, set the rules to show this field group on the desired block (we’ll specify this later).
6. Click Publish to save your field group.

Step 3: Register Your Custom Block

Next, you need to register your ACF custom blocks. This is done in your theme’s functions.php file by using acf_register_block_type:

function my_acf_block_init() {
    // Check if function exists
    if( function_exists('acf_register_block_type') ) {
        acf_register_block_type(array(
            'name'              => 'custom_block',
            'title'             => __('Custom Block'),
            'description'       => __('A custom block created with ACF.'),
            'render_template'   => 'template-parts/blocks/custom-block.php',
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'keywords'          => array('custom', 'block'),
        ));
    }
}
add_action('acf/init', 'my_acf_block_init');

This function allows you to create a Gutenberg block with ACF and customize its settings. The block will be registered in the Custom Gutenberg blocks ACF category and will use a custom template for rendering.

Step 4: Create the Block Template File

1. Create a new folder named template-parts in your theme directory.
2. Inside template-parts, create another folder named blocks.
3. In the blocks folder, create a file called custom-block.php.

Add the following code to custom-block.php:

<?php
// Get ACF fields
$title = get_field('title');
$content = get_field('content');
?>

<div class="custom-block">
    <h2><?php echo esc_html($title); ?></h2>
    <div><?php echo wp_kses_post($content); ?></div>
</div>

This template will output the fields that you defined earlier in your ACF field group. You’ve now created a custom ACF block that can be inserted into any post or page.

Step 5: Test Your Custom Block

1. Go to Pages > Add New in your WordPress dashboard.
2. Click on the “+” button to add a new block.
3. Search for “Custom Block” and insert it into the page.
4. Fill in the fields you created earlier and publish the page.

Step 6: Style Your Block

Add some CSS to style your block. Create a style.css file in your theme and enqueue it in your functions.php:

function my_block_styles() {
    wp_enqueue_style('my-blocks', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'my_block_styles');

Add styles in style.css:

.custom-block {
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

Conclusion

Using ACF to create custom Gutenberg blocks is a powerful and flexible way to extend the functionality of your WordPress site. By following these steps and using the acf_register_block_type function, you can create custom ACF blocks that are easy to manage and customize. Whether you’re building content-rich pages or designing unique layouts, ACF custom blocks provide a robust solution for developers looking to enhance the WordPress editor.

FAQ