Site icon Hip-Hop Website Design and Development

How do you use __experimentalLayout to give innerblocks alignment control and default layout?

As referenced in this issue ( https://github.com/WordPress/gutenberg/issues/33374) I want my custom block’s innerblocks to have the default layout and alignment controls Like the layout toggle for the Group block, but baked in.

It was answered, but I can’t figure out the code:

you can do it by providing a layout to inner blocks, that said, the feature is still experimental at the moment, you should be able to pass __experimentalLayout ={ { contentSize: ‘800px’, wideSize: ‘1000px’ } } to your inner blocks, you can also pass __experimentalLayout ={ { inherit: true } } to your inner blocks as well to inherit whatever layout is defined.

My code

export default function Edit() {
    return (
        <div {...useBlockProps()}>
            <InnerBlocks />
        </div>
    );
}

This doesn’t work

export default function Edit() {
    return (
        <div {...useBlockProps()}>
            <InnerBlocks __experimentalLayout ={ { inherit: true } } />
        </div>
    );
}

Does it go in supports in block.json?

What I’m trying to do

This issue explains the custom block I’m trying to make. Very simple! But I need innerblocks to have alignment control and you lose that on innerblocks when you use theme.json. https://github.com/WordPress/gutenberg/issues/36465