嗯,这一切都很好。编辑器和前端工作。但当我回到页面编辑屏幕时,该块是空的。我认为属性有错误,但我找不到关于这方面的好文档。有人能帮忙吗?
( 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>
最合适的回答,由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
\'s
value
而不是上的第三个属性
el()