Custom ACF block only outputs commented JSON to the DOM

I was facing this same issue, in my case the issue causing me this problem was silly, as usual.

For those facing a similar issue, check your acf_register_block_type function:

acf_register_block_type( array(
    'name'          => 'theme-block-jobbz',
    'title'         => __( 'Title', 'client' ),
    'enqueue_style' =>  'template-parts/blocks/block_jobBz/block.css',
    'render_template'   => 'template-parts/blocks/block_jobBz/block.php',
    'category'      => 'Category',
    'icon'          => 'html',
    'mode'          => 'preview',
    'keywords'      => array('keyword'),
));

Pay attention to your render_template path, try to make it relative as it appears in the snippet above. Instead of having something like this: 'render_template' => get_template_directory_uri() . '/template-parts/blocks/block_jobBz/block.php',

Alternatively, you can achieve something similar using 'render_callback' => 'render_test',, and declare a function somewhere else:

        function render_test() { ?>
           <div></div>
        <?php }

Keep in mind you can use your usual ACF functions within and the stylesheet will also be applied.

In your page template or elsewhere, the_content() should easily output your the content of your page, including all the blocks. Besides, you can also try the following:

$blocks = parse_blocks( $post->post_content );
foreach( $blocks as $block ) {
    echo render_block( $block );
}

If your are using render_template, also double-check your php file:

<?php

/**
 * Random Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */


?>

<div>Content</div>

I am not sure it is entirely addressing your issue, but may be helpful to someone else facing this in the future.

Related Posts: