Support

Account

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

Helping

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

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

You must be logged in to reply to this topic.