This block has encountered an error and cannot be previewed.

• art2media.com

• November 10, 2022 at 5:30 am

Hi,

we build a new site for a client with ACF and Gutenberg. There is one block that throws an error and I don’t know what the hell is going on.

The console throws another error 2 times:

react-dom.min.js?ver=17.0.1:9 SyntaxError: Expected property name or '}' in JSON at position 2
    at JSON.parse (<anonymous>)
    at q (acf-pro-blocks.min.js?ver=6.0.2:1:23770)
    at Array.map (<anonymous>)
    at M (acf-pro-blocks.min.js?ver=6.0.2:1:22774)
    at acf-pro-blocks.min.js?ver=6.0.2:1:23009
    at Array.forEach (<anonymous>)
    at M (acf-pro-blocks.min.js?ver=6.0.2:1:22927)
    at acf-pro-blocks.min.js?ver=6.0.2:1:23009
    at Array.forEach (<anonymous>)
    at M (acf-pro-blocks.min.js?ver=6.0.2:1:22927)

I can add the block and configure it using the ACF fields, but after saving and reloading the page, the block throws this generic Gutenberg error (see title) and no ACF fields are loaded.

block.json (the same structure for every block):

{
    "name": "referenzen",
    "title": "Referenzen",
    "keywords": ["referenzen"],
    "style": {
        "handle": "referenzen-style",
        "dependencies": []
    },
    "icon": "admin-generic",
    "category": "_",
    "acf": {
        "mode": "preview",
        "renderTemplate": "render.php"
    },
    "align": "full",
    "supports": {
        "anchor": true
    }
}

render.php:

<?php
/**
 * Block Template.
 *
 * @param   array  $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool   $is_preview True during backend preview render.
 * @param   int    $post_id The post ID the block is rendering content against. This is either the post ID currently being displayed inside a query loop, or the post ID of the post hosting this block.
 * @param   array  $context The context provided to the block by the post or it's parent block.
 */

require_once( get_template_directory() . '/modules/h2/h2.php' );
require_once( get_template_directory() . '/modules/button/button.php' );

// Support custom "anchor" value.
$anchor = '';
if ( ! empty( $block['anchor'] ) ) {
    $anchor = 'id="' . esc_attr( $block['anchor'] ) . '"';
}

// Create class attribute allowing for custom "className" values.
$class_name = 'acf_block acf_referenzen';
if ( ! empty( $block['className'] ) ) {
    $class_name .= ' ' . $block['className'];
}

// Load values and assign defaults.
$subhead    = get_field( 'subhead' );
$headline   = get_field( 'headline' );
$text       = get_field( 'text' );
$referenzen = get_field( 'referenzen' ) ?: get_posts( array(
    'post_type' => 'referenzen',
    'numberposts' => -1
) );
$button = get_field( 'button' );

wp_enqueue_style( 'referenzen-style' );
wp_enqueue_script( 'alpine' );
?>

<section
    <?= $anchor ?>
    class="<?= esc_attr( $class_name ) ?>"
>
    <div class="container">
        <?= art_m_h2( $headline, $subhead ) ?>

        <div class="wysiwyg">
            <?= $text ?>
        </div>

        <?php if ( $referenzen ) : ?>
        <div class="referenzen">
            <?php foreach ( $referenzen as $item ) : ?>
            <a
                class="item"
                href="<?= get_the_permalink( $item ) ?>"
                x-data="{ show: false }"
                x-intersect:enter="show = true"
                :class="show ? 'show' : ''"
            >
                <div class="image">
                    <?= get_the_post_thumbnail( $item, 'full' ) ?>
                </div>

                <div class="content">
                    <div class="meta"><?= get_field( 'meta', $item ) ?></div>
                    <h3><?= get_the_title( $item ) ?></h3>
                </div>
            </a>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>

        <?= art_m_button( $button['link'], $button['text'] ) ?>
    </div>
</section>

The block in Gutenberg code view:

<!-- wp:acf/referenzen {"name":"acf/referenzen","data":{"subhead":"Some subhead","_subhead":"field_6351502671f65","headline":"Some headline","_headline":"field_6351502671fac","text":"Some text","_text":"field_6351539802287","referenzen":["121","127","128","129"],"_referenzen":"field_635150267200c","button_text":"Referenzen in meiner Nähe","_button_text":"field_63515026d5255","button_link":"#","_button_link":"field_63515026d5294","button":"","_button":"field_63515026720a8"},"mode":"preview"} /-->

Any suggestions?

• art2media.com

• November 22, 2022 at 5:09 am

For anyone having the same issue: Gutenberg doesn’t like the “x-data” HTML attribute used by Alpinejs.

Had to conditionally render it using $is_preview.