Support

Account

Home Forums Gutenberg Markup after InnerBlocks stripped out in Block Preview

Solving

Markup after InnerBlocks stripped out in Block Preview

  • 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!

  • 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? πŸ™‚

  • 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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.