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.wpponents,
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..
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.wpponents,
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..
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.