WordPress Gutenberg and ACF - add a custom hero panel block

wp-acf-gutenberg.php

<?php
/** 
 * Register ACF Gutenberg Block
 */
add_action('acf/init', 'gutenberg_hero_panel_block');
function gutenberg_hero_panel_block()
{
	
	// check function exists
	if (function_exists('acf_register_block')) {
		
		// register a testimonial block
		acf_register_block(array(
			'name' => 'hero_panel',
			'title' => __('Hero Panel'),
			'description' => __('Displays a text container on a full-width image background.'),
			'render_callback' => 'gutenberg_hero_panel_callback',
			'category' => 'lightseek-blocks', // Note: replace with one of the standard block categories if no custom category specified.
			'icon' => 'align-left', // https://developer.wordpress.org/resource/dashicons
			'keywords' => array('lightseek', 'iseek', 'custom'),
		));
	}
}

function gutenberg_hero_panel_callback($block)
{
	$bg = get_field('hero-background');
	$content = get_field('hero-content');
	$align_right = get_field('align_container');
	$title = $content['title'];
	$text = $content['content'];
	$btn_url = $content['button']['link']['url'];
	$btn_label = $content['button']['label'];
	?>
		<section class="container-hero cover align<?php echo $block['align'] ?> <?php echo $block['className'] ?>" style="<?php echo $bg ? "background-image: url(" . $bg['sizes']['large'] . ")" : "" ?>">
			<div class="container-hero-wrapper container">
				<div class="hero-inner" <?php echo $align_right ? 'style="margin-left: auto;"' : '' ?> >
					<?php
						echo $title ? '<h1>' . $title . '</h1>' : '';
						echo $text ? '<div class="text-container">' . $text . '</div>' : '';
						echo $btn_url && $btn_label ? '<div class="wp-block-button alignright"><a class="wp-block-button__link" href="'.$btn_url.'">' . $btn_label . '</a></div>' : '';
					?>
				</div>
			</div>
    </section>
  <?php
}