Wordpress Gutenberg block - wordpress

Question

I have a problem with a custom block which send me an error when I reload the edition page.
I don't understand what the problem is. In regards of the error, actual and expected are the same.
Here the error :
Block validation: Block validation failed for namespace/nottomiss ({object}).
Expected:
<div class="wp-block-utopiales-nottomiss"><p>label test</p><p>label test</p></div>
Actual:
<div class="wp-block-utopiales-nottomiss"><p>label test</p><p>title test</p></div>
Here my code :
const { registerBlockType } = wp.blocks;
const { __ } = wp.i18n;
const { PanelBody, TextControl } = wp.components;
const { BlockControls, InspectorControls, RichText } = wp.editor;
const { createElement, Fragment } = wp.element
registerBlockType( 'namespace/nottomiss', {
title: __( 'Nottomiss' ),
description: __('My description'),
icon: 'star-filled',
category: 'widgets',
supports: { align: true, alignWide: true },
attributes: {
label: {
type: 'string',
source: 'html',
selector: 'p',
},
title: {
type: 'string',
source: 'html',
selector: 'p',
},
},
edit: function( props ) {
const { label, title } = props.attributes;
function onChangeLabel( newLabel ) {
props.setAttributes( { label: newLabel } );
}
function onChangeTitle( newTitle ) {
props.setAttributes( { title: newTitle } );
}
return (
<Fragment>
<BlockControls>
</BlockControls>
<InspectorControls>
<PanelBody title={ __( 'List' ) }>
</PanelBody>
</InspectorControls>
<RichText
identifier="label"
tagName="p"
placeholder=""
value={ label }
onChange={ onChangeLabel }
/>
<RichText
identifier="title"
tagName="p"
placeholder=""
value={ title }
onChange={ onChangeTitle }
/>
</Fragment>
);
},
save: function( props ) {
const { label, title } = props.attributes;
return (
<div>
<RichText.Content
tagName="p"
value={ label }
/>
<RichText.Content
tagName="p"
value={ title }
/>
</div>
);
},
} );
Thanks in advance for your answer,

Answer 1

The selectors are how the editor pulls the data from the saved html, and currently your selectors aren't targeting the content. You could change your selectors to something like this:
attributes: {
label: {
type: 'string',
source: 'html',
selector: '.label'
},
title: {
type: 'string',
source: 'html',
selector: '.title'
}
}
And you could change your save function to this:
save: function(props) {
const { label, title } = props.attributes
return (
<div>
<div className="label">
<RichText.Content
value={ label }
/>
</div>
<div className="title">
<RichText.Content
value={ title }
/>
</div>
</div>
)
}