I created several custom ACF blocks and all but one are working properly. This one in particular only outputs commented out JSON to the DOM.

Here's what it's displaying (with a few string values removed to keep the client anonymous).

<!-- wp:acf/button {
    "id": "block_60dba85ef281c",
    "name": "acf\/button",
    "data": {
        "button_background": "purple",
        "_button_background": "field_6061da93a6d15",
        "button_text": "",
        "_button_text": "field_606227d36073e",
        "button_link_target": {
            "title": "",
            "url": "https:\/\/\/",
            "target": ""
        },
        "_button_link_target": "field_6061dc177bf40",
        "open_in_new_tab": "0",
        "_open_in_new_tab": "field_6061dc7d1fa44",
        "block_background": "purple",
        "_block_background": "field_606a59f7086ae",
        "button_alignment": "center",
        "_button_alignment": "field_606a5a8a98021"
    },
    "align": "",
    "mode": "preview"
} /-->

I registered this block in register_acf_block_types() the same way I registered all the other blocks and verified the template file exists and doesn't have any errors. It just displays a simple styled anchor tag.

One thing I noticed is the "mode": "preview" line at the end. But this block has been published.

I'd appreciate any insight on this. Not quite sure where to look at this point.

I created several custom ACF blocks and all but one are working properly. This one in particular only outputs commented out JSON to the DOM.

Here's what it's displaying (with a few string values removed to keep the client anonymous).

<!-- wp:acf/button {
    "id": "block_60dba85ef281c",
    "name": "acf\/button",
    "data": {
        "button_background": "purple",
        "_button_background": "field_6061da93a6d15",
        "button_text": "",
        "_button_text": "field_606227d36073e",
        "button_link_target": {
            "title": "",
            "url": "https:\/\/\/",
            "target": ""
        },
        "_button_link_target": "field_6061dc177bf40",
        "open_in_new_tab": "0",
        "_open_in_new_tab": "field_6061dc7d1fa44",
        "block_background": "purple",
        "_block_background": "field_606a59f7086ae",
        "button_alignment": "center",
        "_button_alignment": "field_606a5a8a98021"
    },
    "align": "",
    "mode": "preview"
} /-->

I registered this block in register_acf_block_types() the same way I registered all the other blocks and verified the template file exists and doesn't have any errors. It just displays a simple styled anchor tag.

One thing I noticed is the "mode": "preview" line at the end. But this block has been published.

I'd appreciate any insight on this. Not quite sure where to look at this point.

• advanced-custom-fields
• block-editor

• How are you outputting the content that contains this block? Are you using the_content()? – Jacob Peattie Commented Jul 23, 2021 at 4:26
• @JacobPeattie all of the content is being output with a few calls to get_field( ). – gp22 Commented Jul 23, 2021 at 16:23
• Did you solve the issue? – Vladimir Commented Feb 11, 2022 at 16:42

1 Answer 1

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.