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?
