指定两个块之间的确切父子关系

我构建了两个块来显示功能卡列表。

块1：功能卡（容器元素）

(function (blocks, element, blockEditor) {
    var el = element.createElement;
    var InnerBlocks = blockEditor.InnerBlocks;

    blocks.registerBlockType(\'feature-cards\', {
        title: \'Feature Cards\',
        icon: \'universal-access-alt\',
        category: \'layout\',
        example: {},
        edit: function (props) {
            return el(\'div\', { className: \'feature-cards\' },
                    el(InnerBlocks)
            );
        },
        save: function (props) {
            return el(\'div\', { className: \'feature-cards\' },
                    el(InnerBlocks.Content)
            );
        },
    });
})(window.wp.blocks, window.wp.element, window.wp.blockEditor);

块2：功能卡（具有可编辑内容的卡本身）

(function (blocks, editor, element, blockEditor) {
    var el = element.createElement;
    var RichText = editor.RichText;
    var InnerBlocks = blockEditor.InnerBlocks;

    blocks.registerBlockType(\'feature-card\', {
        parent: [\'feature-cards\'],
        title: \'Feature Card\',
        icon: \'universal-access-alt\',
        category: \'layout\',
        example: {},
        attributes: {
            content: {
                type: \'array\',
                source: \'children\',
                selector: \'h3\',
            },
        },
        edit: function (props) {
            var content = props.attributes.content;
            function onChangeContent( newContent ) {
                props.setAttributes( { content: newContent } );
            }
            
            return el(\'div\', { className: \'feature-card\' },
                        el(\'div\', { className: \'feature-card__icon\' }, el(InnerBlocks)),
                        el( RichText, {
                            tagName: \'h3\',
                            className: \'feature-card__title\',
                            onChange: onChangeContent,
                            value: content,
                        } )
                );
        },
        save: function (props) {
            return el(\'div\', { className: \'feature-card\' },
                        el(\'div\', { className: \'feature-card__icon\' }, el(InnerBlocks.Content)),
                        el( RichText.Content, {
                            tagName: \'h3\',
                            className: \'feature-card__title\',
                            value: props.attributes.content,
                        } )
                );
        },
    });
})(window.wp.blocks, window.wp.editor, window.wp.element, window.wp.blockEditor);

如您所见，我已指定feature-cards 是feature-card 这样卡块只能在父块内部使用。

然而，有几个问题我不确定如何最好地解决：

首先，我想使它成为唯一可以添加为feature-cards 是子块。我如何执行此操作？因为父块显示了一个带有卡片期望的网格（所以其他块在这里不起作用）。

第二，如上所述，父块显示网格。。。但在编辑器中，WordPress似乎添加了一些包装器元素，如：

这会导致在编辑器内查看块时网格中断，因为它将网格CSS应用于包装器。。。是否有任何方法可以正确显示？

编辑：我一直在查看WordPress核心中包含的社交图标块，看看它们是如何绕过这个问题的，似乎它们没有在编辑器端为该块应用CSS，因为它们使用flexbox来对齐它们，但这只在前端看到。

相关推荐