WordPress InnerBlocks Gutenberg 不正确保存

Question

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

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',
    icon: 'star-filled',
    parent: [ 'wpptheme/faq-section' ],
    category: 'wpptheme',

    edit() {
        return ([
            <div class="wpptheme-custom">
                <h4>Block</h4>
            </div>
        ]);
    },
    save() {
        return (
            <h3>Test</h3>
        );
    }
});

Answer 1

在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>
    );
}
...