如何从innerBlocks中排除父块?

web*_*san 3 wordpress wordpress-gutenberg gutenberg-blocks create-guten-block

我想Section在 WordPress Gutenberg 中创建一个块。我创建了一个部分块并使用古腾堡<InnerBlocks>组件作为内部/子块。它工作正常,但Section块本身显示为其内部块列表。我想Section从其内部块中排除该块。<InnerBlocks>组件有一个属性allowedBlocks来指定允许作为内部块的块。但这对我没有帮助,因为我只想禁止Section来自内部块的块。我如何才能仅禁止来自 的单个特定块<InnerBlocks>

我需要一个像这样的选项,disallowedBlocks以便我可以从innerBlocks列表中排除块,例如

<InnerBlocks disallowedBlocks={['leo-block/section']} />

完整代码

;(function(wp) {
    const {registerBlockType} = wp.blocks;
    const {InnerBlocks} = wp.editor;
    const {__} = wp.i18n;

    registerBlockType('leo-block/section', {
        title: __('Section'),
        icon: 'grid-view',
        category: 'vr-blocks',
        descrition: __('Section block for manage content section'),
        attributes: {
            content: {
                default: 'Hello World'
            },
            spacing: {
                default: {
                    paddingTop: '70px',
                    paddingBottom: '70px',
                    marginTop: '0',
                    marginBottom: '0'
                }
            }
        },

        edit: ({attributes, setAttributes, className, isSelected}) => {
            return (
                <section className = {className} style={attributes.spacing}>
                    <div className="container">
                        <InnerBlocks/> 
                        {/* TODO: Not allow "leo-block/section" */}
                    </div>
                </section>
            )
        },

        save: ({attributes, className}) => {
            return (
                <section className = {className} style={attributes.spacing}>
                    <div className="container">
                        <InnerBlocks.Content/>
                    </div>
                </section>
            )
        }
    })
})(window.wp)
Run Code Online (Sandbox Code Playgroud)

输出截图

输出截图

小智 5

使用以下代码片段,它会给您一个允许的块列表,除了您的leo-block/section. 如果您愿意,您可以添加更多例外。你知道如何处理它

const ALLOWED_BLOCKS = wp.blocks.getBlockTypes().map(block => block.name).filter(blockName => blockName !== 'leo-block/section');
Run Code Online (Sandbox Code Playgroud)

  • @kanlukasz `const ALLOWED_BLOCKS = wp.blocks.getBlockTypes().map(block =&gt; block.name).filter( blockName =&gt; array('leo-block/section','第二块', '第三块' ).indexOf(blockName) !== -1 ); ` (2认同)