Gutenberg Block empty after reload of editor
-
10-04-2021 - |
Pregunta
Well, everythings fine with this. editor and frontend works. but when i come back to pages edit screen, the block is empty. i think there is an error with the attributes, but i can't find good documentation on this. can anybody help?
( 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
);
resulting div block in frontend:
<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>
Solución
I was able to make your block save and load on refresh by changing the edit
to so:
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,
} )
)
)
];
},
Notably, I removed the children array logic and placed props.attributes.link
in RichText
's value
instead of a third attribute on el()
Licenciado bajo: CC-BY-SA con atribución
No afiliado a wordpress.stackexchange