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>
  • Note that currently the best place for these kinds of questions is actually the Gutenberg github issues, the number of people who can help there is significantly higher than here or anywhere else – Tom J Nowell Aug 9 at 14:48
  • but why? maybe we should bring more of the knowledge here. github is for development, not for support... – Gooze Aug 12 at 18:39
  • If you ask on github and post the answer here that works too, but Gutenberg knowledge hasn't had a chance to spread out yet, and the project is in flux. There's no guarantee that the knowledge exists here yet, it's all very new. For now though, the github issue tracker is superior – Tom J Nowell Aug 12 at 20:09
up vote 0 down vote accepted

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()

  • works very well for me, thanks... would be really nice to have a good documentation for that. – Gooze Aug 12 at 18:38
  • I figured it out using the RichText docs which is also available in the Gutenberg Handbook – David Sword Aug 13 at 17:36

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.