ACF Pro 5.8.0-beta1 Custom Block

acf_580beta1_block.php

<?php

/** 
 * STEP 1: add code below to functions.php
 *
 * STEP 2: after adding this code you can add the fields to a block called My Custom Block.
 *         It will be available to select in the ACF Plugin AFTER this code has been added.
 *
 *         Add these fields to the Fieldgroup for this block:
 *
 * 					avatar (image), set to image-array
 *      		testimonial (text)
 *         	author (text)
 *          background_color (colorpicker)
 *          text_color (text_color)
 *
 * STEP 3: After saving the Fieldgroup you can add the Gutenberg block to a page or post layout
 *
 */
 


add_action( 'acf/init' , 'add_my_custom_acf_block' , 10, 1 );

/**
 * Callback to add my own custom acf block
 */
function add_my_custom_acf_block () {

		// If acf_register_block doesn't exist we have an older version of acf pro installed. Return/exit.
		if( !function_exists('acf_register_block') ) return;

		// register a testimonial block
		acf_register_block(array(
			'name'				=> 'my-block-slug',
			'title'				=> 'My Custom Block',
			'description'		=> 'This is my first block',
			'render_callback'	=> 'callback_for_my_custom_acf_block',
			'category'			=> 'formatting',
			'icon'				=> 'editor-table',
			'keywords'			=> array( 'custom' , 'testimonial' ),
		));

}

/**
 * acf block has fields called:
 * 					avatar (image), set to image-array
 *      			testimonial (text)
 *         			author (text)
 *            		background_color (colorpicker)
 *              	text_color (text_color)
 *
 * @param  [type] $block [description]
 * @return [type]        [description]
 */
function callback_for_my_custom_acf_block( $block ) {

// get image field (array)
$avatar = get_field('avatar');

// create id attribute for specific styling
$id = 'testimonial-' . $block['id'];

// create align class ("alignwide") from block setting ("wide")
$align_class = $block['align'] ? 'align' . $block['align'] : '';

?>
<blockquote id="<?php echo $id; ?>" class="testimonial <?php echo $align_class; ?>">
    <p><?php the_field('testimonial'); ?></p>
    <cite>
    	<img src="<?php echo $avatar['url']; ?>" alt="<?php echo $avatar['alt']; ?>" />
    	<span><?php the_field('author'); ?></span>
    </cite>
</blockquote>
<style type="text/css">
	#<?php echo $id; ?> {
		background: <?php the_field('background_color'); ?>;
		color: <?php the_field('text_color'); ?>;
	}
</style>
<?php
}