Introduction to ACF Gutenberg Blocks

ACF Gutenberg implementation for beginners.

This article assumes that you are somewhat familiar with Gutenberg blocks and Advanced Custom Fields.

Using Gutenberg blocks, editing a WordPress site has become the new way to go.
These blocks gives bloggers the ultimate tool to create with ease of use any piece of content

Here is what the default Gutenberg tool selector looks like.

And now, with ACF, you can now add your custom made blocks that serves a specific purpose.

Supercharging your Gutenberg blocks with ACF.

Here are the primary steps for you to add new custom fields to your Gutenberg toolset.

Register your new ACF block
Create your ACF field group
Build the block output of how it will appear

1. Register your new ACF block

Basic code sample to register the acf block.

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

    // Check function exists.
    if( function_exists('acf_register_block_type') ) {

        // register a testimonial block.
        acf_register_block_type(array(
            'name'              => 'testimonial',
            'title'             => __('Testimonial'),
            'description'       => __('A custom testimonial block.'),
            'render_template'   => 'template-parts/blocks/testimonial/testimonial.php',
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'keywords'          => array( 'testimonial', 'quote' ),
        ));
    }
}

2. Create your ACF field group

Add every ACF elements you which to be available in your custom block.

3. Build the block output of how it will appear

For this step, make sure to create a file with the same name defined in step 1.

template-parts/blocks/testimonial/testimonial.php

<?php

/**
 * Testimonial Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

// Create id attribute allowing for custom "anchor" value.
$id = 'testimonial-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'testimonial';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}

// Load values and assign defaults.
$text = get_field('testimonial') ?: 'Your testimonial here...';
$author = get_field('author') ?: 'Author name';
$role = get_field('role') ?: 'Author role';
$image = get_field('image') ?: 295;
$background_color = get_field('background_color');
$text_color = get_field('text_color');

?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
    <blockquote class="testimonial-blockquote">
        <span class="testimonial-text"><?php echo $text; ?></span>
        <span class="testimonial-author"><?php echo $author; ?></span>
        <span class="testimonial-role"><?php echo $role; ?></span>
    </blockquote>
    <div class="testimonial-image">
        <?php echo wp_get_attachment_image( $image, 'full' ); ?>
    </div>
    <style type="text/css">
        #<?php echo $id; ?> {
            background: <?php echo $background_color; ?>;
            color: <?php echo $text_color; ?>;
        }
    </style>
</div>

Fun facts

The posts of this blog uses ACF Gutenberg blocks.
Gutenberg (/ˈɡuːtənbɜːrɡ/; c. 1400 – February 3, 1468) was a German goldsmith, inventor, printer, and publisher who introduced printing to Europe with the printing press. And WordPress serves as a modern press system for present writers.