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>
);
}