Support

Account

Register Login

Home › Forums › Backend Issues (wp-admin) › Using block.json, ACF field change = "This block has encountered an error" etc

Solving

Using block.json, ACF field change = "This block has encountered an error" etc

  • WP 6.1.1
    ACF Pro 6.0.5
    PHP 7.4.30

    I have recently updated my blocks to json markup, they are working correctly EXCEPT when I change an ACF field value that changes the visuals/content of a block. E.g. Colour selector as an ACF field which changes the background colour of the block. These break in the backend with “This block has encountered an error and cannot be previewed.” Displays correctly on frontend and when the backend is refreshed.

    I have tested with renderTemplate instead of renderCallback and this didn’t fix the issue. Also backtracked to registering in PHP and worked this had no issue.

    Any advice to fix this would be much appreciated.

    Block.json

    {
"name": "acf/section",
"title": "Section",
"description": "Section to contain other elements.",
"category": "layout",
"icon": "table-row-before",
"supports": {
"align": false,
"anchor": true
},
"acf": {
"mode": "preview",
"renderCallback": "render_block_section_acf"
}
}

    Register.php (required_once these for functions used around the theme but not for registering)

    <?php 
/** * Add block to the allowed list */ 
add_filter( 'allowed_block_types', 'allow_block_section', 20, 2 ); 
function allow_block_section( $allowed_blocks, $post ) { 
$allowed_blocks[] = 'acf/section'; return $allowed_blocks; 
} 

/** * Render the ACF block */ 
function render_block_section_acf( $block, $content = '', $is_preview = false, $post_id = 0 ) { 
$data = []; $data['attributes'] = []; $data['color'] = get_field( 'background_colour' ); $data['content'] = '';

echo render_block_section( $data );
}

/**
* Returns the formatted block markup
*/
function render_block_section( $data ) {
$blockname = 'wp-block-section';
$data['attributes']['class'][] = $blockname;
$data['color'] = $data['color'] ?: 'white';

// Add classes
$attributes = '';
$data['attributes']['class'][] = sprintf( 'has-%1$s-background-color', $data['color'] );
$attributes = render_attributes( $data['attributes'], $blockname );

// Output all the things
return sprintf('<section%1$s><div class="wrap">%3$s</div></section>',
$attributes,
$blockname,
$data['content']
);
}

  • I also get a console error:

    TypeError: t.get(…).dispatchEvent is not a function
    react_devtools_backend.js:4012

  • If not using inner blocks, try setting JSX as false in the json file:

    "supports": {
        "jsx": false,
    }

  • Unfortunately that block will have innerblocks. I accidentally remove it from the original code but the below will be in the render_block_section_acf() function

    $data['content'] = '<InnerBlocks />';

    Surprised I am the only one encountering this issue

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

You must be logged in to reply to this topic.