重新加载编辑后Gutenberg块为空

时间:2018-08-09 作者:Gooze

嗯,这一切都很好。编辑器和前端工作。但当我回到页面编辑屏幕时,该块是空的。我认为属性有错误,但我找不到关于这方面的好文档。有人能帮忙吗?

( function( blocks, editor, components, element, api ) {
    var el = element.createElement;
    var source = blocks.source;
    var InspectorControls = editor.InspectorControls;
    var RichText = editor.RichText;

    blocks.registerBlockType( \'efna-blocks/pdflinks\', {
        title: \'PDF-Links\',
        icon: \'media-default\',
        category: \'common\',
            attributes: {
                link: {
                    source: \'children\',
                    selector: \'div\'
                }
        },

        edit: function(props) {
                    var children = [];

                    function setHtml(element) {
                        props.setAttributes({link: element});
                    }

                    children.push(
                        el( \'div\', null,
                            el( RichText, {
                                multiline: null,
                                formattingControls: [\'link\'],
                                onChange: setHtml,
                                tagName: \'div\'
                            }, props.attributes.link )
                        )
                    );

                    return [
                        el( \'div\', { className : props.className }, children )
                    ];
        },

            save: function( props ) {
                return el( \'div\', { className : props.className },
                    el( RichText.Content, { className: \'pdf-link\', value: props.attributes.link } )
                );
            }

        }
    );
})(
    window.wp.blocks,
    window.wp.editor,
    window.wp.components,
    window.wp.element,
    window.wp.api
);
前端生成的div块:

<div class="wp-block-efna-blocks-pdflinks">
 <a href="http://test.pdf">Das Dokument – technsiche Details</a><br>
 <a href="http://test.pdf">Das Dokument – technsiche Details</a><br>
 <a href="http://test.pdf">Das Dokument – technsiche Details</a><br>
 <br>
</div>

1 个回复
最合适的回答,由SO网友:David Sword 整理而成

我可以通过更改edit 为此:

edit: function(props) {
    return [
        el(
            \'div\',
            { className : props.className },
            el( \'div\', null,
                el( RichText, {
                    multiline: null,
                    formattingControls: [\'link\'],
                    onChange: function (element) {
                        props.setAttributes({link: element});
                    },
                    tagName: \'div\',
                    value: props.attributes.link,
                } )
            )
        )
    ];
},
值得注意的是,我删除了子数组逻辑,并将props.attributes.link 在里面RichText\'svalue 而不是上的第三个属性el()

结束

相关推荐