Как исключить родительский блок из innerBlocks?

Я хочу сделать Section блок в WordPress Gutenberg. Я создал блок раздела и использовал компонент Gutenberg <InnerBlocks> в качестве внутренних / дочерних блоков. Он работает нормально, но сам блок Section отображается как его список внутренних блоков. Я хочу исключить блок Section из его внутренних блоков. Компонент <InnerBlocks> имеет свойство allowedBlocks для определения блоков, которые можно использовать как внутренние блоки. Но мне это не помогает, потому что я хочу запретить только Section блоков из внутренних блоков. Как я могу запретить только один конкретный блок из <InnerBlocks>?

Мне нужна опция типа disallowedBlocks, чтобы я мог исключить блок из списка внутренних блоков, например

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

Снимок экрана вывода

Выходной снимок экрана




Ответы (1)


Используйте следующий фрагмент, он предоставит вам список разрешенных блоков, кроме вашего leo-block/section. А если хотите, можете добавить больше исключений. И ты знаешь, что с этим делать ????

const ALLOWED_BLOCKS = wp.blocks.getBlockTypes().map(block => block.name).filter(blockName => blockName !== 'leo-block/section');
person obiPlabon    schedule 03.11.2019
comment
Спасибо. Это сработало. Мне все еще интересно, есть ли простой способ? - person webHasan; 03.11.2019
comment
AFAIK, его нет. Но вы можете внести disallowedBlocks - person obiPlabon; 03.11.2019
comment
Умное решение. Не могли бы вы расширить свой пример, включив в него возможность исключения более чем одного блока? - person kanlukasz; 28.10.2020
comment
@kanlukasz const ALLOWED_BLOCKS = wp.blocks.getBlockTypes().map(block => block.name).filter( blockName => array('leo-block/section','second-block', 'thired-block').indexOf(blockName) !== -1 ); - person webHasan; 31.10.2020
comment
Это великолепно! Спасибо - person Matt Mintun; 05.03.2021