Question

我正在通过自定义插件在古腾堡创建自定义块。我的自定义块包含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）中找到了这一点：

“这将自动添加到save方法中，但不会在编辑时添加” [关于props.className]。这就是为什么我最初没有镜像这些类的原因。再次阅读它使我认识到，在“保存”函数上镜像className并不是解决问题的方法，而是在每个父项{}之后插入el( 'div',，即使您不这样做也是如此。什么都没有指定，是什么固定了功能。

因此，它的工作原理是这样，并且className自动添加到第一个el( 'div',：

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

感谢@niklas帮助我实现了这一目标。

Wordpress Gutenberg InnerBlock.Content未被保存或呈现

1 个答案: