Advanced Custom Fields: Registering Custom Gutenberg Blocks

acf-blocks.php

<?php
/**
* Plugin Name: Advanced Custom Fields: Gutenberg Blocks
* Plugin URI: https://www.n7studios.co.uk
* Version: 1.0.0
* Author: n7 Studios
* Author URI: https://www.n7studios.co.uk
* Description: Example code to register Advanced Custom Field Groups as Blocks.  Requires ACF 5.8+
*/

/**
 * ACF Blocks Class
 * 
 * @package   ACF_Field_Groups_As_Blocks
 * @author    Tim Carr
 * @version   1.0.0
 * @copyright WP Zinc
 */
class ACF_Field_Groups_As_Blocks {

    /**
     * Constructor
     *
     * @since   1.0.0
     */
    public function __construct() {

        add_filter( 'acf/settings/show_admin', '__return_false' );      // Disable the Custom Fields Menu Item in the WordPress Administration
        add_action( 'acf/init', array( $this, 'register_blocks' ), 1 ); // Register Blocks
        add_action( 'acf/init', array( $this, 'register_fields' ), 2 ); // Register Field Groups + Fields, assigning them to a registered Block

    }

    /**
     * Registers a Block Name in ACF.
     *
     * This subsequently allows Field Groups to be assigned to a Block, instead of to a Post Type.
     * Regardless of whether you programmatically register Field Groups or use the WordPress UI,
     * you *must* register blocks programmatically first.  This will then populate the Location
     * Rules dropdown when creating or editing a Field Group in ACF.
     *
     * @since   1.0.0
     */
    public function register_blocks() {

        // Bail if ACF isn't active
        if ( ! function_exists( 'acf_register_block' ) ) {
            return;
        }

        // Register blocks
        acf_register_block( array(
            'name'              => 'testimonial',
            'title'             => __( 'Testimonial', 'acf-blocks' ),
            'description'       => __( 'A custom testimonial block.', 'acf-blocks' ),
            'render_callback'   => array( $this, 'render_block' ), // Function in this class to handle rendering output of this block.
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'keywords'          => array( 'testimonial', 'quote' ),
        ) );

    }

    /**
     * Registers ACF Field Groups.
     *
     * You could do this in a non-programmatic way through Custom Fields > Field Groups
     * in the WordPress Admin screen, but we like to limit the fields available and
     * version control field groups.
     *
     * @since   1.0.0
     */
    public function register_fields() {

        // Bail if ACF isn't active
        if ( ! function_exists( 'acf_add_local_field_group' ) ) {
            return; 
        }

        // Register field groups
        acf_add_local_field_group( array(
            'key'       => 'group_testimonial',
            'title'     => 'Testimonial',
            'fields'    => array (
                array (
                    'key'           => 'field_testimonial_name',
                    'label'         => 'Name',
                    'name'          => 'name',
                    'type'          => 'text',
                ),
                array (
                    'key'           => 'field_testimonial_testimonial',
                    'label'         => 'Testimonial',
                    'name'          => 'testimonial',
                    'type'          => 'text',
                ),
            ),

            // Assign this Field Group to the Testimonial block that we registered in register_blocks()
            'location' => array(
                array(
                    array(
                        'param'     => 'block',
                        'operator'  => '==',
                        'value'     => 'acf/testimonial',
                    ),
                ),
            ),
        ) );

    }

    /**
     * Renders output for a block, by looking at several 'common' locations in your Theme
     * for a matching PHP template file.
     *
     * Called by defining the render_callback of acf_register_block() to call this function
     *
     * @since   1.0.0
     *
     * @param   array   $block  ACF Block
     */
    public function render_block( $block ) {

        // Define possible folder locations where your block might be stored
        $possible_template_locations = array(
            STYLESHEETPATH . '/template-parts/acf/blocks/',
            STYLESHEETPATH . '/template-parts/acf/block/',
            STYLESHEETPATH . '/template-parts/acf/',
            STYLESHEETPATH . '/template-parts/blocks/',
            STYLESHEETPATH . '/template-parts/block/',
            STYLESHEETPATH . '/template-parts/',
            STYLESHEETPATH . '/acf/blocks/',
            STYLESHEETPATH . '/acf/block/',
            STYLESHEETPATH . '/acf/',
            STYLESHEETPATH . '/blocks/',
            STYLESHEETPATH . '/block/',
            STYLESHEETPATH,
        );

        // Convert the block name to a more friendly name
        $name = str_replace( 'acf/', '', $block['name'] );

        // Attempt to find the file
        foreach ( $possible_template_locations as $possible_template_location ) {
            // Continue looping through the possible template locations if this file doesn't exist
            if ( ! file_exists( $possible_template_location . $name . '.php' ) ) {
                continue;
            }

            // Include the file and exit
            include( $possible_template_location . $name . '.php' );
            break;
        }
    
    }

}

// Finally, initialize the main plugin
$acf_blocks = new ACF_Field_Groups_As_Blocks;

testimonial.php

<?php
/**
 * Block Name: Testimonial
 *
 * This is the template that displays the testimonial block.
 *
 * It should be placed in a location matching the list of folders in the Plugin's
 * render_block() call - for example, your-active-theme/template-parts/blocks/testimonial.php
 */
?>
<blockquote id="testimonial-<?php echo $block['id']; ?>" class="testimonial<?php echo( $block['align'] ? ' align' . $block['align'] : '' ); ?>">
    <p><?php the_field( 'testimonial' ); ?></p>

    <cite><?php the_field( 'name' ); ?></cite>
</blockquote>