Support

Account

Home Forums Front-end Issues ACF block JSON included in DOM, but block isn't being rendered on the front end

Helping

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

  • 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.

    Front end screenshot

    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
                        }
                    ));
                }
    
            });
    
  • 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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.