WordPress InnerBlocks Gutenberg 保存不正确

Question

我有一个非常简单的 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',
    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

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

已更新 save() wpptheme/faq-section：

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

WordPress InnerBlocks Gutenberg 保存不正确

WordPress InnerBlocks Gutenberg don't save correct

javascript

php

wordpress

reactjs

wordpress-gutenberg