Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Advanced Custom Fields: Registering Custom Gutenberg Blocks
<?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;
<?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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.