InnerBlocks — what am I missing?

• StudioAl

• July 1, 2021 at 10:46 am

I’m trying to use the new <InnerBlocks /> feature for the first time, and I cannot get the InnerBlock to display on either the front or backend. I’m actually not even sure if the concept is what I’m after, as I’ve haven’t seen a single screenshot of the resulting editor after an InnerBlock is added. So first, this is what I’m trying to accomplish: An ACF block where one “field” or “section” is a Gutenberg block, but it also has regular ACF fields. That’s how this work, right?

So here’s my register function:

acf_register_block(array(
	'name' => 'pageheader2',
	'title' => __('Page Header 2'),
	'description' => __('Graphic page header with innblocks and links'),
	'render_callback' => 'briarpatch_acf_block_render_callback',
	'category' => 'header',
	'icon' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M18.5 10.5H10v8h8a.5.5 0 00.5-.5v-7.5zm-10 0h-3V18a.5.5 0 00.5.5h2.5v-8zM6 4h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2z"></path></svg>',
	'mode' => 'auto',
	'keywords' => array('header'),
	'suports' => [
		'align' => false,
		'anchor' => true,
		'customClassName' => true,
		'jsx' => true,
	]
));

Here’s a simplified version of my template partial:

<?php
$template = array(
	array('core/heading', array(
		'level' => 1,
		'content' => 'Its time to love local.',
	))
);
$id = 'pageheader-' . $block['id'];
?>
<div id="<?php print $id; ?>" class="block bp-block-pageheader <?php the_field('colorway'); ?>">
	<InnerBlocks template="<?php echo esc_attr(wp_json_encode($template)); ?>"></InnerBlocks>
	<?php //a bunch of additional standard html and ACF field code here ?>
</div>

What I get is a block that displays the standard ACF fields perfectly (both in editor and preview mode, and in the front end), but there is no place to add the inner block, and the inner block template content also does not show. I’ve simplified it down to just an “<InnerBlocks>” element with no attributes, in case those were an issue, and still no results.

Also of note: All tutorials I’ve found use <InnerBlocks /> as a self-closing tag, but when I use it that way, it wraps everything else after it in the block code inside the InnerBlocks element. If I write it instead as <InnerBlocks></InnerBlocks>, it closes correctly.

The editor, in preview mode, outputs this code, but does not display the template content:
<innerblocks template="[[&quot;core\/heading&quot;,{&quot;level&quot;:1,&quot;content&quot;:&quot;Its time to love local.&quot;}]]"></innerblocks>

The editor, in edit mode, shows no sign of InnerBlocks in the output.
The front end also shows no sign of it. The <InnerBlocks /> element is absent entirely from the code.

Screen-Shot-....png

Screen-Shot-....png

• StudioAl

• July 15, 2021 at 9:12 pm

Everything was fine — except I had a missing ‘p’ in ‘supports’. 🙄