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

Updated code

I added this to the block.json, which adds the toggle for default layout, but the innerblocks still don’t have full/wide alignment control. Not sure how to do that, but halfway there.

    "supports": {
    "__experimentalLayout": {
      "contentSize": "800px",
      "wideSize": "1000px",
            "inherit": true
    }
    },

Updated code from stokeman’s answer

block.json

{
    "apiVersion": 2,
    "name": "mbp/details",
    "version": "0.1.0",
    "title": "Details",
    "category": "design",
    "icon": "heart",
    "supports": {
        "align": ["full"],
        "__experimentalLayout": {
        "allowSwitching": false,
        "default": {
                "inherit": true
        }
}
    },
        "attributes": {
    "align": {
            "type": "string",
            "default": "full"
        }
    },
    "textdomain": "mobilebevpros",
    "editorScript": "file:../../../../build/details.js"
}

edit.js

import { __ } from "@wordpress/i18n";
import {
    useBlockProps,
    useSetting,
    InnerBlocks,
} from "@wordpress/block-editor";

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

2 Answers
2

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.

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *