Support

Account

Home Forums Gutenberg Markup after InnerBlocks stripped out in Block Preview

Unread

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!

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.