ACF block JSON included in DOM, but block isn't being rendered on the front end

• Matt

• January 22, 2022 at 6:11 pm

Pretty much as the title says. I’m just trying to get an example testimonial block working, which it does on the back end – everything there loads / is being rendered correctly. However on the front end the block is not being rendered, but the commented out JSON for the block & the values I’ve added is being included in the DOM.

I’m adding the block using the acf_register_block_type function, and using render_callback (specifying a template instead of the callback also resulted in the same with the block not being rendered on the front end).

        add_action('acf/init', function() {

            if(function_exists('acf_register_block_type')) {
                acf_register_block_type(array(
                    'name'              => 'testimonial',
                    'title'             => __('Testimonial'),
                    'description'       => __('A custom testimonial block.'),
                    'mode'              => 'auto',
                    'category'          => 'formatting',
                    'icon'              => 'admin-comments',
                    'keywords'          => array( 'testimonial', 'quote' ),
                    'render_callback'   => function($block, $content = '', $is_preview = false, $post_id = 0) {
                        // Create id attribute allowing for custom "anchor" value.
                        $id = 'testimonial-' . $block['id'];
                        if( !empty($block['anchor']) ) {
                            $id = $block['anchor'];
                        }

                        // Create class attribute allowing for custom "className" and "align" values.
                        $className = 'testimonial';
                        if( !empty($block['className']) ) {
                            $className .= ' ' . $block['className'];
                        }
                        if( !empty($block['align']) ) {
                            $className .= ' align' . $block['align'];
                        }

                        // Load values and assign defaults.
                        $text = get_field('testimonial') ?: 'Your testimonial here...';
                        $author = get_field('author') ?: 'Author name';
                        $role = get_field('role') ?: 'Author role';
                        $image = get_field('image') ?: 295;
                        $background_color = get_field('background_color');
                        $text_color = get_field('text_color');

                        ?>
                        <div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
                            <blockquote class="testimonial-blockquote">
                                <span class="testimonial-text"><?php echo $text; ?></span>
                                <span class="testimonial-author"><?php echo $author; ?></span>
                                <span class="testimonial-role"><?php echo $role; ?></span>
                            </blockquote>
                            <div class="testimonial-image">
                                <?php echo wp_get_attachment_image( $image, 'full' ); ?>
                            </div>
                            <style type="text/css">
                                #<?php echo $id; ?> {
                                    background: <?php echo $background_color; ?>;
                                    color: <?php echo $text_color; ?>;
                                }
                            </style>
                        </div>
                        <?php
                    }
                ));
            }

        });

• rtvenge

• February 25, 2022 at 5:57 pm

I ran into this issue too, and I had to remove and re-add the block in the editor for it to render. Not sure what I had going on but I was changing up quite a bit of php after I initially created the block, so maybe that had something to do with it.

Hopefully this helps someone else with the same issue.

• perrelet

• July 26, 2023 at 6:48 am

@Matt

Experiencing exactly the same issue on our end. Did you find a solve?