如何在Innerblock中动态添加模板?

时间:2021-01-19 作者:Night Crawler

我正在尝试在InnerBlock中动态添加模板,为此,我尝试了以下代码:

const edit = props => {
    var { 
        className, 
        attributes,
        setAttributes,
        clientId
    } = props;
    var { templateList } = attributes;

    const ALLOWBLOCKS = [\'ss-gutenberg-block/accordion-child\'];
    
    setAttributes({ blockId: clientId });
   
    return (
        <Fragment>
            <div className={className}>
                <div className = { "accordionParentWrapper" }>
                    <InnerBlocks
                        template = { templateList }
                        allowedBlocks = { ALLOWBLOCKS }
                        templateLock = { "true" }
                    />
                    <span 
                        className = { "dashicons dashicons-plus editor-icons" }
                        onClick = {() => setAttributes({ templateList: [...templateList, [\'ss-gutenberg-block/accordion-child\'] ] })}
                    ></span>
                    <span 
                        className = { "dashicons dashicons-minus editor-icons" }
                        onClick = {() => setAttributes({ templateList: templateList.length ? templateList.splice(-1, 1) : templateList })}
                    ></span>
                </div>
            </div>
        </Fragment>
    );
}
templateList属性包括[[\'ss-gutenberg-block/accordion-child\']] 默认情况下。我想从Innerblock中动态添加或删除我的子块。这些按钮工作正常,可以在数组中添加和删除。但从视觉上看,不会添加或删除块。

1 个回复
SO网友:Tom J Nowell

That\'s not how templates work.

样板是初始块布局,是起点。

更改模板不会起任何作用,因为原始模板用于创建块,而这些块已经创建。想想看,如果它按照您的想法工作,那么从模板中添加或删除将删除所有内容,并且当帖子加载时,您的内容将被删除。

您所做的是尝试创建一个自定义的块附加器,因此您应该使用块附加器道具和API,而不是重新设计该功能。模板不适合您正在尝试的操作。

TLDR:如果您想要自定义块插入器/插入器,请使用自定义块插入器/插入器,不要试图使模板动态化,它们不是也不能动态化,模板不是这样工作的。