Markup after InnerBlocks stripped out in Block Preview

• Twansparant

• August 27, 2021 at 8:38 am

Hi there,

I’ve got a strange problem in one of my ACF blocks;
With this markup in my blade view render_template:

<div class="{{ $block->classes }}">
	<header class="wp-block-product-carousel__header">
		<InnerBlocks
			allowedBlocks="{!! $allowed_blocks !!}"
			template="{!! $template !!}"
			templateLock="all"
		/>
		@if ($products)
			<nav class="wp-block-product-carousel__nav">
				<a class="swiper-button-prev"></a>
				<a class="swiper-button-next"></a>
			</nav>
		@endif
	</header>
	...rest of my markup
</div>

The <nav class="wp-block-product-carousel__nav"> is not present in my Gutenberg block preview, but it is in my frontend?

If I specifically add an InnerBlocks closing tag:

<InnerBlocks
	allowedBlocks="{!! $allowed_blocks !!}"
	template="{!! $template !!}"
	templateLock="all"
>
</InnerBlocks>

Then my frontend breaks, but the Gutenberg block preview does show my <nav class="wp-block-product-carousel__nav">?

This probably has something to do with how React parses the html?
I have jsx enabled for this block?

Of course I could do something like this:

@if ($block->preview)
	<InnerBlocks
		allowedBlocks="{!! $allowed_blocks !!}"
		template="{!! $template !!}"
		templateLock="all">
	</InnerBlocks>
@else
	<InnerBlocks
		allowedBlocks="{!! $allowed_blocks !!}"
		template="{!! $template !!}"
		templateLock="all"
	/>
@endif

But that just feels wrong 🙂

Anyone else bumped into this?
Thanks!

• sunelundby

• March 8, 2022 at 4:41 pm

6 months later and I just realized I have the exact same problem… Did you find a solution – other than the one you mention with the if/else? 🙂

• Juliancoates34

• July 27, 2022 at 2:49 am

I am using a php render template, and I have put

<div>
<?php
echo ‘<InnerBlocks template=”‘ . esc_attr( wp_json_encode( $template ) ) . ‘” templateLock=”all” />’;
?>
</div>
<div>
<?php
// Check rows exists.
if ( have_rows( ‘card’ ) ):
// Loop through rows.
while ( have_rows( ‘card’ ) ): the_row();
// Load sub field value.
if ( get_sub_field( ‘image’ ) ) {
$image = get_sub_field( ‘image’ );
$image_id = $image[ ‘id’ ];
$image_alt = $image[ ‘alt’ ];
} else {
$image_id = ‘152’;
$image_alt = ‘placeholder image’;
}
$text_background_colour = get_sub_field( ‘text_background_colour’ );
$title = get_sub_field( ‘title’ );
$sentence = get_sub_field( ‘sentence’ );
// Do something…
?>
<figure>
<?php
echo wp_get_attachment_image( $image_id, ‘full’, false, array(
‘data-sizes’ => ‘auto’,
‘alt’ => $image_alt
) );
?>
</figure>
<p><?php echo esc_html($text_background_colour); ?></p>
<p><?php echo esc_html($title); ?></p>
<p><?php echo esc_html($sentence); ?></p>
<?php
// End loop.
endwhile;
// No value.
else :
// Do something…
endif;
?>
</div>

I found that if I put my content that should appear after the inner blocks into a completely separate div, it does appear in preview, even without the </innerblocks> closing tag. However, if I put it in the same div as the inner blocks, it does not appear in the preview.