acf gutenberg blocks

1add_action('acf/init', 'my_acf_init_block_types');
2function my_acf_init_block_types() {
3
4    // Check function exists.
5    if( function_exists('acf_register_block_type') ) {
6
7        // register a testimonial block.
8        acf_register_block_type(array(
9            'name'              => 'testimonial',
10            'title'             => __('Testimonial'),
11            'description'       => __('A custom testimonial block.'),
12            'render_template'   => 'template-parts/blocks/testimonial/testimonial.php',
13            'category'          => 'formatting',
14            'icon'              => 'admin-comments',
15            'keywords'          => array( 'testimonial', 'quote' ),
16        ));
17    }
18}

1<?php
2
3/**
4 * Testimonial Block Template.
5 *
6 * @param   array $block The block settings and attributes.
7 * @param   string $content The block inner HTML (empty).
8 * @param   bool $is_preview True during AJAX preview.
9 * @param   (int|string) $post_id The post ID this block is saved to.
10 */
11
12// Create id attribute allowing for custom "anchor" value.
13$id = 'testimonial-' . $block['id'];
14if( !empty($block['anchor']) ) {
15    $id = $block['anchor'];
16}
17
18// Create class attribute allowing for custom "className" and "align" values.
19$className = 'testimonial';
20if( !empty($block['className']) ) {
21    $className .= ' ' . $block['className'];
22}
23if( !empty($block['align']) ) {
24    $className .= ' align' . $block['align'];
25}
26
27// Load values and assign defaults.
28$text = get_field('testimonial') ?: 'Your testimonial here...';
29$author = get_field('author') ?: 'Author name';
30$role = get_field('role') ?: 'Author role';
31$image = get_field('image') ?: 295;
32$background_color = get_field('background_color');
33$text_color = get_field('text_color');
34
35?>
36<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
37    <blockquote class="testimonial-blockquote">
38        <span class="testimonial-text"><?php echo $text; ?></span>
39        <span class="testimonial-author"><?php echo $author; ?></span>
40        <span class="testimonial-role"><?php echo $role; ?></span>
41    </blockquote>
42    <div class="testimonial-image">
43        <?php echo wp_get_attachment_image( $image, 'full' ); ?>
44    </div>
45    <style type="text/css">
46        #<?php echo $id; ?> {
47            background: <?php echo $background_color; ?>;
48            color: <?php echo $text_color; ?>;
49        }
50    </style>
51</div>