WordPress InnerBlocks Gutenberg 不正确保存

如何解决WordPress InnerBlocks Gutenberg 不正确保存

我有一个非常简单的 InnerBlock。当我打开一个页面时，我可以毫无问题地创建嵌套块。我可以保存并查看页面，一切正常。但是，当我再次尝试编辑页面时，我收到块验证失败错误：

Content generated by `save` function:

<div class="container my-4 my-md-5" class="wp-block-wpptheme-faq-section"><div class="row"><div class="col-12"><div class="accordion" id="faq"><div></div></div></div></div></div>

Content retrieved from post body:

<div class="container my-4 my-md-5" class="wp-block-wpptheme-faq-section"><div class="row"><div class="col-12"><div class="accordion" id="faq"><div>

为什么块没有正确保存？

const ALLOWED_BLOCKS = ['wpptheme/faq-block'];

registerBlockType('wpptheme/faq-section',{
    //built-in attributes
    title: 'FAQ Abschnitt',icon: 'star-filled',category: 'wpptheme',edit() {
        return ([
            <div class="wpptheme-custom">
                <h3>Häufig gestelle Fragen</h3>
                <div>
                    <InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />
                </div>
            </div>
        ]);
    },save() {

        return (
            <div class="container my-4 my-md-5">
                <div class="row">
                    <div class="col-12">
                        <div class="accordion" id="faq">
                            <div>
                                <InnerBlocks.Content />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});


registerBlockType('wpptheme/faq-block',{
    //built-in attributes
    title: 'FAQ Block',parent: [ 'wpptheme/faq-section' ],edit() {
        return ([
            <div class="wpptheme-custom">
                <h4>Block</h4>
            </div>
        ]);
    },save() {
        return (
            <h3>Test</h3>
        );
    }
});

解决方法

如何在 save() 的 wpptheme/faq-section 中应用类的问题。 React should be passed in with "className" property 中的 CSS 类，与普通 HTML 不同。

更新了 wpptheme/faq-section 的 save()：

...
    save() {

        return (
            <div className="container my-4 my-md-5">
                <div className="row">
                    <div className="col-12">
                        <div className="accordion" id="faq">
                            <div>
                                <InnerBlocks.Content />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    );
}
...