0

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.

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

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.