Gutenberg:如果重新加载了编辑器或编辑了帖子,则块验证失败。保存函数中的data.getBlock();为空

时间:2020-04-16 作者:Marc

我使用相同的函数向我的block和post中添加一些HTML。在我编辑帖子或重新加载编辑器之前,一切都正常:块验证:“simpletoc/toc”的块验证失败。

Content generated by `save` function:

<p class="wp-block-simpletoc-toc"><h2 class="simpletoc-title">Table of Contents</h2><ul class="simpletoc"></ul></p>

Content retrieved from post body:

<p class="wp-block-simpletoc-toc"><h2 class="simpletoc-title">Table of Contents</h2><ul class="simpletoc"><li><a href="#sdfsfsdf">sdfsfsdf</a></li><li><a href="#sdfsdfsdfsdfdsf">sdfsdfsdfsdfdsf</a></li></ul></p>
所以我试着调试这个。似乎在重新加载时,save函数不允许我检索任何块。常量块=数据。getBlocks();在保存功能中为空。为什么会发生这种情况?这一切似乎都很容易,最终似乎奏效了。。。。

 registerBlockType( \'simpletoc/toc\', {
        title: __( \'SimpleTOC\', \'simpletoc\' ),
        icon: listulicon,
        category: \'layout\',
        edit: function ( props ) {
            return buildTOC( props );
        },
        save: function ( props ) {
            return buildTOC( props );
        },
    } );

function buildTOC(props){

    const data = wp.data.select( \'core/block-editor\' );
    const blocks = data.getBlocks();
    const headings = blocks.map( ( item, index ) => {
        if ( item.name === \'core/heading\' ) {
            var slug = \'\';
            var hashslug = \'\';
            var blockId = ( item.clientId );

            slug = item.attributes.content;
            hashslug = \'#\' + slug;

            return <li><a href={hashslug}>{item.attributes.content}</a></li>;
        }
    } );

    return <p className={ props.className }>
            <h2 class="simpletoc-title">{ __( \'Table of Contents\', \'simpletoc\' ) }</h2>
            <ul class="simpletoc">
                    {headings}
            </ul>
            </p>;
}

1 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

简单地说,您的块行为不正常。

给定一组参数,块应始终提供相同的结果。编辑器将此用作检查,如果结果不匹配,则说明有问题,blocks实现存在错误。

在块的情况下,这是因为在生成标记时,每次都从零开始提取数据。因此,如果我通过a、B和C,我可能得到D,或者可能得到E,因为save 函数依赖于外部API调用,不再安全包含。您没有使用道具/属性来生成输出,而是使用了其他一些东西。这太糟糕了!

因此,当您确定TOC应该是什么时,请将其存储在属性中。您需要声明该属性存在,并使用它提供的setter。

这给我们带来了一个新问题:

function buildTOC(props){

    const data = wp.data.select( \'core/block-editor\' );
    const blocks = data.getBlocks();
    const headings = blocks.map( ( item, index ) => {
        if ( item.name === \'core/heading\' ) {
            var slug = \'\';
            var hashslug = \'\';
            var blockId = ( item.clientId );

            slug = item.attributes.content;
            hashslug = \'#\' + slug;

            return <li><a href={hashslug}>{item.attributes.content}</a></li>;
        }
    } );

确定文档中的标题的功能与构建最终组件的功能相同。该函数做得太多,没有使用依赖项注入,因此,没有分离关注点。这需要重构为2个功能,我还建议用类似的组件替换您的功能:

        edit: function ( props ) {
            const headings = find_headings( props );
            props.setAttributes( { headings: headings } );
            return <toc {...props} />;
        },
        save: function ( props ) {
            return <Toc  {...props} />;
        },
哪里<Toc> 是这样的:


function Toc( props ) {
    return ....
}

相关推荐