joelkrause
11/18/2018 - 12:44 AM

## This is how you initialise and build a ACF Gutenberg block! ### General steps: 1. In your theme directory, create a new folder template-

This is how you initialise and build a ACF Gutenberg block!

General steps:

  1. In your theme directory, create a new folder template-parts, inside of that, create another folder called acf, then inside that, blocks
  2. Add an include_once in yo
acf.php
content_copyfile_download
<?php
add_action('acf/init', 'my_acf_init');
function my_acf_init() {
	if( function_exists('acf_register_block') ) {
		acf_register_block(array(
			'name'				=> 'codeblock',
			'title'				=> __('Code Block'),
			'description'		=> __('Custom code block.'),
			'render_callback'	=> 'my_acf_block_render_callback', // see callback below
			'category'			=> 'formatting',
			'icon'				=> 'admin-comments',
			'keywords'			=> array( 'codeblock', 'quote' ),
		));
	}
}
function my_acf_block_render_callback( $block ) {
	$slug = str_replace('acf/', '', $block['name']);
	if( file_exists(STYLESHEETPATH . "/template-parts/acf/blocks/block-{$slug}.php") ) {
		include( STYLESHEETPATH . "/template-parts/acf/blocks/block-{$slug}.php" );
	}
}
?>
block-codeblock.php
content_copyfile_download
<?php
/**
 * Block Name: Code Block
 *
 * This is the template that displays the testimonial block.
 */
$id = 'testimonial-' . $block['id'];
$language = get_field('language');
$code = get_field('code');
// create align class ("alignwide") from block setting ("wide")
$align_class = $block['align'] ? 'align' . $block['align'] : '';
?>
<div id="<?php echo $id; ?>" class="<?php echo $id;?> <?php echo $align_class; ?>">
    <?php echo $language;?>
    <?php echo $code;?>
</div>
functions.php
content_copyfile_download
<?php
include_once( get_template_directory() . '/template-parts/acf/acf.php' );
?>