How to display Gutenberg nested blocks individually without container div wrapper

Other Questions Wordpress
1

I’m working on a WordPress block that needs to show each nested block as a separate slide in a carousel. The issue is that when I use inner blocks, they are automatically enclosed in an extra div element. I want each block to function as its own slide without any wrapper.

Here’s an example of my current implementation:

import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
import Carousel from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

export default function BlockEdit() {
    const mainProps = useBlockProps({ className: `brand-showcase` });
    const nestedProps = useInnerBlocksProps();

    const carouselConfig = {
        slidesToShow: 3,
    };

    return (
        <div {...mainProps}>
            <Carousel {...carouselConfig}>
                { nestedProps.children }
            </Carousel>
        </div>
    );
}

The nested blocks are being wrapped, and I need them to be rendered separately for the carousel to function correctly. Any suggestions on how to retrieve individual blocks?

2

I hit this exact problem building a testimonial slider block last year. The issue is useInnerBlocksProps().children returns a wrapper component instead of individual block elements that carousel libraries need. What worked for me was using getBlockOrder and getBlock selectors to manually iterate through the blocks: javascript import { useSelect } from '@wordpress/data'; import { BlockListBlock } from '@wordpress/block-editor'; const { blockOrder } = useSelect((select) => { const { getBlockOrder } = select('core/block-editor'); return { blockOrder: getBlockOrder(clientId) }; }, [clientId]); return ( <div {...mainProps}> <Carousel {...carouselConfig}> {blockOrder.map((blockId) => ( <BlockListBlock key={blockId} clientId={blockId} /> ))} </Carousel> </div> ); } This gives you direct control over each block’s rendering without automatic wrapper divs. The carousel sees each BlockListBlock as a proper slide element. Just remember to handle the clientId prop properly in your block registration.

3

The wrapper div shows up because useInnerBlocksProps includes container elements by default. Here’s how to get around it - access the block data directly through the block editor store and render each block yourself.

Use useSelect from @wordpress/data to grab the inner blocks without the wrapper:

import { useSelect } from '@wordpress/data';
import { BlockList } from '@wordpress/block-editor';

const innerBlocks = useSelect((select) => {
  return select('core/block-editor').getBlocks(clientId);
}, [clientId]);

return (
  <div {...mainProps}>
    <Carousel {...carouselConfig}>
      {innerBlocks.map((block) => (
        <div key={block.clientId}>
          <BlockList blocks={[block]} />
        </div>
      ))}
    </Carousel>
  </div>
);

This way you control exactly how each block renders inside your carousel. Just make sure to pass the parent block’s clientId as a prop so it can find its children.

4

u can also use renderAppender={false} with useInnerBlocksProps to avoid extra wrappers. Then just map over the blocks with wp.data.select('core/block-editor').getBlocks(clientId) and drop them straight into your carousel slides. I did this for a gallery block and it worked great.