如本期（https://github.com/WordPress/gutenberg/issues/33374) 我希望自定义块的内部块具有默认的布局和对齐控件，如组块的布局切换，但已烘焙。

回答了，但我想不出代码：

您可以通过向内部块提供布局来实现这一点，也就是说，该功能目前仍处于实验阶段，您应该能够将{experimentalLayout={{{contentSize:\'800px\'，wideSize:\'1000px\'}}}传递给您的内部块，您还可以将{experimentalLayout={{inherit:true}}传递给您的内部块，以及继承定义的任何布局。

我的代码

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

这行不通

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

它是否在块中的支架中。json？

这个问题解释了我试图创建的自定义块。非常简单！但我需要innerblocks具有对齐控制，当您使用主题时，innerblocks上的对齐控制就会丢失。json。https://github.com/WordPress/gutenberg/issues/36465

更新了代码，我将其添加到块中。json，它为默认布局添加了切换，但innerblocks仍然没有完全/宽对齐控制。不知道该怎么做，但已经完成了一半。

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

根据stokeman的回答更新了代码。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"
}

编辑。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>
    );
}

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

wp.blocks.registerBlockVariation( \'core/group\', { name:\'dat-section\', title: \'Dat Section\', isActive: (blockAttributes, vAttributes) => blockAttributes.className .includes(vAttributes.className), attributes: { className: \'dat-section\', layout: { inherit: true, }, style:{ spacing:{ padding: { top: \'25px\', bottom:\'55px\' } } } }, } );

小码农CODE

如何使用__ExamentalLayout为内部块提供对齐控制和默认布局？

我的代码

这个问题解释了我试图创建的自定义块。非常简单！但我需要innerblocks具有对齐控制，当您使用主题时，innerblocks上的对齐控制就会丢失。json。https://github.com/WordPress/gutenberg/issues/36465

相关推荐