如何将属性传递给 InnerBlocks 模板中的子 Gutenberg 块？

Question

我正在尝试使用 InnerBlocks 构建一组自定义的列块，但在将属性传递给块模板时遇到了问题。首先，我使用 Create-Guten-Block 构建了一个新插件。然后我创建了两个块，一个用作行容器，另一个用于单独的列。

这是我创建主容器的简化版本（有两列硬编码用于测试）：

registerBlockType( 'wabe/multi-column-block', {
    title: __( 'Multi-Column' ),
    icon: 'columns',
    category: 'common',
    keywords: [
        __( 'columns' ),
        __( 'grid' ),
    ],
    attributes: {
        layout: {
            type: 'string',
        },
    },

    edit: () => {
        return (
            <div>
                { /* inspector controls for choosing a layout will go here */ }
                <InnerBlocks
                    template={ [
                        [ 'wabe/multi-column-column', { columnwidth: '6' }, [
                            [ 'core/paragraph', { content: 'Insert column content here.' } ],
                        ],
                        ],
                        [ 'wabe/multi-column-column', { columnwidth: '6' }, [
                            [ 'core/paragraph', { content: 'Insert column content here.' } ],
                        ],
                        ],
                    ] }
                />
            </div>
        );
    },

    save: () => {
        // This is a dynamic block
        return (
            <InnerBlocks.Content />
        );
    },
} );

...以及我如何创建单独的列块：

registerBlockType( 'wabe/multi-column-column', {
    title: __( 'Multi-Column Column' ),
    icon: 'columns',
    category: 'common',
    keywords: [
        __( 'columns' ),
        __( 'grid' ),
    ],
    attributes: {
        columnwidth: {
            type: 'string',
            default: '',
        },
    },
    edit: ( props ) => {
        return (
            <div>
                <p>Width: { props.attributes.columnwidth }</p>
                <InnerBlocks />
            </div>
        );
    },
    save: () => {
        return (
            <InnerBlocks.Content />
        );
    },
} );

我将有一个自定义 select 供用户选择列布局，并使用它来确定要包含多少列，并将“columnwidth”属性传递给每个列块。这将告诉每一列要使用什么 CSS class。

问题是无论我尝试什么，“columnwidth”属性都不会传递给列块。事实上，我无法让它传递任何东西，甚至是“className”。

我查看了核心 columns/column 块的代码，但看不出我做错了什么。在这个巨大的障碍之前，一切都很顺利。如有任何提示，我们将不胜感激。

Answer 1

您提供的块代码示例显示您正在正确设置 InnerBlocks。这个问题可能是一个简单的疏忽，您错过了导入 <InnerBlocks>.

所需的依赖项

一旦我添加了所需的导入，我就能够成功构建您的块代码：

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { InnerBlocks} from '@wordpress/block-editor';

结果如下：

代码编辑器显示您的属性正在传递和保存。

如果您仍然遇到问题，请在重新测试之前仔细检查您是否清除了浏览器缓存，并检查浏览器控制台以查看是否存在任何错误。

正如您提到的，您已经查看了 Columns/Column 的 Gutenberg 代码，一个提示是查看它们如何 variations 在您的 Inspector 控件中创建选项。希望这能让您回到创建区块的正轨。

如何将属性传递给 InnerBlocks 模板中的子 Gutenberg 块？

How to pass attributes to child Gutenberg blocks in InnerBlocks template?

wordpress

wordpress-gutenberg

gutenberg-blocks