ACF 6 Block JSON data in template fails to load

• rhand

• January 9, 2023 at 8:56 am

I have an ACF 6 block using block.json and block. php and template.php. I have been trying to load json via $template into the render template like I would normally do the old ACF block way. Now I use block.json as a base, load with

register_block_type( get_stylesheet_directory() . '/blocks/plans-table/block.json' );

and try to load template data this way into render.php:

/**
 * Plans Table Block
 */

// $data is what we're going to expose to our render template
// $data = array(
// 	'example_field' => get_field( 'example_field' ),
//     'another_field' => get_field( 'another_field' )
// );

// Dynamic block ID
$block_id = 'plans-table-block-' . $block['id'];

// Check if a custom ID is set in the block editor
if( !empty($block['anchor']) ) {
    $block_id = $block['anchor'];
}

// Block classes
$class_name = 'plans-table-block';
if( !empty($block['class_name']) ) {
    $class_name .= ' ' . $block['class_name'];
}

$template = [
	[
		'core/columns',
		[
			'isStackedOnMobile' => true,
			'verticalAlignment' => true
		],
		[
			[
				'core/column',
				[
					'width' => '40%'
				],
				[
					[
						'core/image',
						[
							'url' => get_stylesheet_directory_uri() . '/blocks/plans-tablet/placeholder-img.png'
						]
					],
				]
			],
			[
				'core/column',
				[
					'width' => '60%',
				],
				[
					[
						'core/heading',
						[
							'level'       => 2,
							'placeholder' => 'Show a pricing plan',
							'content'     => 'Show a pricing plan',
						]
					],
					[
						'core/paragraph',
						[
							'classNames' => 'ff-causten',
							'content'    => 'Use this form to list a relevant drug discovery conference, drug discovery webinar, or drug discovery event, or to feature an event on the homepage or in our e-mail newsletter',
						]
					],
					[
						'core/button',
						[
							'text'  => 'Show a pricing plan',
							'url'   => '#',
							'align' => 'left'
						]
					]
				]
			],
		]
	]
];
/** 
 * Pass the block data into the template part
 */ 
get_template_part(
	'blocks/plans-table-block/template',
	null,
	array(
		'block'      => $block,
		'is_preview' => $is_preview,
		'post_id'    => $post_id,

		// 'data'       => $data,
        'class_name' => $class_name,
        'block_id'   => $block_id,
		'template'	=> $template
		
	)
);

and template.php has this

/**
 * Block Name: Plans Table Block
 *
 * Description: Plans Table for pricing display
 * 
 */

// The block attributes
$block = $args['block'];

// The block data
$data = $args['data'];

// The block ID
$block_id = $args['block_id'];

// The block class names
$class_name = $args['class_name'];

// The block template data
$template = $args['template'];

?>
<!-- Our front-end template -->
<div id="<?php echo $block_id; ?>" class="<?php echo $class_name; ?>">
    <InnerBlocks template="<?php echo esc_attr( wp_json_encode( $template ) ); ?>" templateLock="all"/>
</div>

and block.json is this

{
    "name": "plans-table-block",
    "title": "Plans Table Block",
    "description": "Displays Plans on any page.",
    "category": "theme",
    "apiVersion": 2,
    "acf": {
        "mode": "preview",
        "renderTemplate": "blocks/plans-table/block.php"
    },
    "supports": {
        "anchor": true,
        "mode": false,
        "jsx": true
    }
}

But I am getting this error:

Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at BlockPreview.setHtml (_acf-blocks.js:1084:10)
    at Object.<anonymous> (_acf-blocks.js:1384:10)
    at fire (jquery.js?ver=3.6.1:3500:31)
    at Object.fireWith [as resolveWith] (jquery.js?ver=3.6.1:3630:7)
    at deferred.<computed> (jquery.js?ver=3.6.1:3968:36)
    at Object.<anonymous> (_acf-blocks.js:452:28)
    at fire (jquery.js?ver=3.6.1:3500:31)
    at Object.fireWith [as resolveWith] (jquery.js?ver=3.6.1:3630:7)
    at done (jquery.js?ver=3.6.1:9822:14)
    at XMLHttpRequest.<anonymous> (jquery.js?ver=3.6.1:10083:9)
    at XMLHttpRequest.a (gutenberg.js?ver=9.0.338:2:18707)

Which seems to refer to

// If we've got an object (as an array) use the first ref.
if ( state.jsx[ 0 ] ) {
	state.ref = state.jsx[ 0 ].ref;
} else {
	state.ref = state.jsx.ref;
}

Seems to be JSON or JS related. Any ideas why?