Block validation failed

I wrote a specific block for a customer. It is working well. I fill the data. I save and when I look on the website, it is quite perfect. But, when I refresh the editor, I am receiving this error.

Thank you so much!

blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3 Block validation: Block validation failed for perso-chacha/bloc-sous-forme-de-template ({name: “perso-chacha/bloc-sous-forme-de-template”, icon: {…}, keywords: Array(0), attributes: {…}, providesContext: {…}, …}).

Content generated by save function:

<section class="chacha-column valign-center chacha-bloc-sous-forme-de-template block_891836fd-a657-41da-ba9b-ab915bfc1308"><style>
        section.block_891836fd-a657-41da-ba9b-ab915bfc1308{
            --section_background_color: #163F47;
            --title-font-family: 'undefined';
            --title-font-color: #FFFFFF;
            --content_1-font-family: 'undefined';
            --content_1-font-color: #BFFFFF;
            --content_2-font-family: 'undefined';
            --content_2-font-color: #FFFFFF;
            --content_3-font-family: 'undefined';
            --content_3-font-color: #FFFFFF;
        }
    </style><div class="container"><h2 class="title">sdfsfsdfsdf</h2><div class="content_1"><p></p></div><div class="chacha-row"><div class="content_2"><p></p></div><div class="content_3"><p></p></div></div></div></section>

Content retrieved from post body:

<section class="chacha-column valign-center chacha-bloc-sous-forme-de-template block_891836fd-a657-41da-ba9b-ab915bfc1308"><style>
        section.block_891836fd-a657-41da-ba9b-ab915bfc1308{
            --section_background_color: #163F47;
            --title-font-family: 'undefined';
            --title-font-color: #FFFFFF;
            --content_1-font-family: 'undefined';
            --content_1-font-color: #BFFFFF;
            --content_2-font-family: 'undefined';
            --content_2-font-color: #FFFFFF;
            --content_3-font-family: 'undefined';
            --content_3-font-color: #FFFFFF;
        }
    </style><div class="container"><h2 class="title">sdfsfsdfsdf</h2><div class="content_1"><p>sdfsdfsdfsf</p><p>sdfsdfsdfsfd</p></div><div class="chacha-row"><div class="content_2"><p>sdfsdfsdfsf</p><p>sdfsdfsdf</p></div><div class="content_3"><p>sdfsdfsdfsf</p><p>sdfsdfsdfsdf</p></div></div></div></section>

This is my save.js

import { RichText } from '@wordpress/block-editor';

export default function Save( props ) {

    const notDefined = ( typeof props.className === 'undefined' || !props.className ) ? true : false

    const { title_font, subtitle_font, content_font, slogan_font, link_font, title_color, slogan_color } = props.attributes;

    const currentDate = new Date();
    props = Object.assign(props, {
        className: notDefined ? `chacha-column valign-center chacha-notre-approche block_${ currentDate.getTime() }` : `chacha-column valign-center chacha-notre-approche block_${ currentDate.getTime() } ${ props.className }`,
    });

    var css = `
        section.block_`+currentDate.getTime()+`{
            --title-font-family: '`+title_font+`';
            --title-font-color: `+title_color+`;
            --subtitle-font-family: '`+subtitle_font+`';
            --content-font-family: '`+content_font+`';
            --slogan-color: `+slogan_color+`;
            --slogan-font-family: '`+slogan_font+`';
            --link-font-family: '`+link_font+`';
        }
    `;

    return (
        <section {...props}>
            <style>{ css }</style>
            <div class="chacha-row wrap">
                <div class="chacha-cell">
                    <RichText.Content
                        tagName="h2"
                        className="title"
                        value={ props.attributes.title }
                    />
                </div>
                <div class="chacha-cell">
                    <RichText.Content
                        tagName="h3"
                        className="subtitle"
                        value={ props.attributes.subtitle }
                    />
                    <RichText.Content
                        tagName="p"
                        className="content"
                        value={ props.attributes.content }
                    />
                    <RichText.Content
                        tagName="p"
                        className="slogan"
                        value={ props.attributes.slogan }
                    />
                    {props.attributes.link_show && props.attributes.link_text &&
                    <a
                        href={ props.attributes.link_url }
                        className="chacha-row valign-center"
                    >
                        {props.attributes.link_icon_id && 
                        <img
                            src={ props.attributes.link_icon_url }
                            alt={ props.attributes.title }
                        />
                        }
                        <span>{ props.attributes.link_text }</span>
                    </a>
                    }
                </div>
            </div>
        </section>
    );
};

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

As Tom pointed out, without the actual code of the block (specifically the save function) it is impossible to tell you exactly what the issue is. That said, if you compare what was generated by the save function and what was in the post body, you’ll see that there is content missing in each of the <p> tags in the area of <div class="chacha-row">...</div>. You can start by looking at how that content is generate/saved in the save function.

Method 2

So, finally, the problem is quite simple. When you have more than one richtext with different attribute each. Ex. one richtext for attribute content and another one for attribute slogan, they all use the selector=”p”, well, you have to add a classname to be sure they are differente. If not, the value for content is going to be used in slogan because they have the same selector.

content: {
type: ‘string’,
source: ‘text’,
selector: ‘p.content’
},
slogan: {
type: ‘string’,
source: ‘text’,
selector: ‘p.slogan’
},

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0