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

by

You’re pretty close. Specifying layout details in block.json should nest inside a "default" property. Doing so will have the Layout panel display accordingly but there’s more to it than that.

If you want the default layout for the block, there is no need to add contentSize or wideSize. Here is the layout config I’d recommend (within the block json supports property):

        "__experimentalLayout": {
            "allowSwitching": false,
            "default": {
                "inherit": true
            }
        }

That will make the Layout panel in the block’s sidebar/inspector simplified to only show the inherit toggle (on by default) and not the size inputs.

Even though the block.json specifies that layout should inherit by default, the default needs to be manually retrieved and passed to InnerBlocks in the edit component:

import {
    useBlockProps, // already in use from example
    useSetting     // new bit
} from '@wordpress/block-editor';

export default function Edit() {
    const defaultLayout = useSetting( 'layout' ) || {};
    return (
        <div {...useBlockProps()}>
            <InnerBlocks __experimentalLayout={ defaultLayout } />
        </div>
    );
}

Besides that the block must be registered on the server but I take it that’s already being done.

I’m not sure I wouldn’t look for alternative solutions since the experimental nature of the API means it will need some care to not break in future updates to the site.

Leave a Comment