Wordpress Gutenberg InnerBlock.Content 未保存或呈现

Question

我正在通过自定义插件在 Gutenberg 中创建一个自定义块。我的自定义块包含 InnerBlocks。编辑功能似乎工作正常，因为我可以将块添加到页面，并按预期在块内放置新的块元素。当我重新加载页面时出现问题。在我更新页面并重新加载编辑器后，所有 InnerBlock 元素都消失了。它们没有被保存，也没有在前端呈现。除非我疯了，否则我的保存功能构建不正确。任何帮助都会很棒。我精通 Wordpress 和 JS，但不熟悉 React 和 Gutenberg。感谢您的帮助！

( function( blocks, element, editor ) {

    const el = element.createElement;
    const { registerBlockType } = blocks;
    const InnerBlocks = editor.InnerBlocks;

    registerBlockType( 'dab/nest', { 
        title: 'Disruptive Nest',
        icon: 'layout',
        category: 'disruptive-blocks', 
        keywords: [ 'base', 'build', 'custom' ], 

        edit: function( props ) {
            return (
                el( 'div', {className: props.className + ' dab-full'},
                    el( 'div', {className: 'dab-content'},
                        el( InnerBlocks )
                    )
                )
            );
        },

        save: function( props ) {
            return (
                el( 'div',
                    el( 'div',
                        el( InnerBlocks.Content, null )
                    )
                )
            );
        },
    });
})( window.wp.blocks, 
    window.wp.element, 
    window.wp.blockEditor
);

Answer 1

我在块编辑器手册 ([https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#classname) 中找到了这个：

"This is automatically added in the save method, but not on edit" [关于 props.className 的话题。这就是为什么我最初没有镜像类的原因。再次阅读它让我意识到在 "save" 函数上镜像 classNames 并不能解决它，只是在每个父 el( 'div', 之后添加 {}，即使您没有指定任何内容，就是修复该功能的原因。

所以，它是这样工作的，类名自动添加到第一个el( 'div',:

save: function( props ) {
    return (
       el( 'div', {},
           el( 'div', {},
               el( InnerBlocks.Content )
            )
       )
    );
},

谢谢@niklas 帮助我实现这一点。

Wordpress Gutenberg InnerBlock.Content 未保存或呈现

Wordpress Gutenberg InnerBlock.Content is not being saved or rendered

javascript

wordpress

reactjs

wordpress-gutenberg

gutenberg-blocks