gutenberg attributes

Question

hi and thanks for stopping by.

i try myself in developing reusable gutenberg blocks and i come pretty far but i do have some lacks of understanding, how..

so i want to create one block with 2 textfields. this works fine i can edit and save them, but when i reload the editor, it throws an error aka block validation failed, expected is different from actual.

(function (blocks, editor, components, i18n, element) {
    const
        {registerBlockType} = blocks,
        {Fragment} = element,
        {RichText} = editor;

    registerBlockType('wu/text-image-block', {
        title: i18n.__('whatever'),
        description: i18n.__('yada yada'),
        icon: 'businessman',
        category: 'common',
        attributes: {
            main_text: {
                type: 'array',
                source: 'children',
                selector: 'p'
            },
            more_text: {
                type: 'array',
                source: 'children',
                selector: 'p'
            },
        },

        edit({attributes, className, setAttributes}) {
            const { main_text, more_text } = attributes;

            return (
                <Fragment>
                    <div>
                        <div className='wu-ti-text'>
                            <RichText
                                key='editable'
                                tagName='p'
                                placeholder={ i18n.__('Write some text...') }
                                keepPlaceholderOnFocus={ true }
                                value={ main_text }
                                onChange={ function ( new_text ) {
                                    setAttributes({
                                        main_text: new_text
                                    })
                                } }
                            />
                            <RichText
                                key='editable'
                                tagName='p'
                                placeholder={ i18n.__('Optional text...') }
                                keepPlaceholderOnFocus={ true }
                                value={ more_text }
                                onChange={ function ( new_more_text ) {
                                    setAttributes({
                                        more_text: new_more_text
                                    })
                                } }
                            />
                        </div>
                    </div>
                </Fragment>
            );
        },

        save({ attributes }) {
            const { main_text, more_text } = attributes;

            return (
                <Fragment>
                    <div>
                        <div className='wu-ti-text'>
                            <RichText.Content
                                tagName="p"
                                value={ main_text }
                            />
                            <RichText.Content
                                tagName="p"
                                value={ more_text }
                            />
                        </div>
                    </div>
                </Fragment>
            );
        }
    })

})(
    window.wp.blocks,
    window.wp.editor,
    window.wp.components,
    window.wp.i18n,
    window.wp.element
);

the outcome is fine, but when i reload, the block expects to find the same content from richtext1 inside richtext2, and of course i don't want that, i want 1 in 1 and 2 in 2, saving works, re-editing doesn't. and it is somewhere in the depth of the attributes, i'm not passing the correct source? selector? what?? what is that anyways, i don't get it..

Answer 1

From the docs:

If a selector is specified, the source behavior will be run against the corresponding element(s) contained within the block.

You are telling your block to look at the same Element for the value of both your attributes.(The first p tag)

Change the second selector to something like

p:last-of-type

or give your p tags an id.