-1

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>
    );
};
9
  • 2
    Can you edit your question to include the code of your block? It is not possible to diagnose this without seeing the code. Does your block have child/inner blocks?
    – Tom J Nowell
    Jul 6, 2021 at 22:28
  • Done! You can see them in this question Jul 8, 2021 at 13:39
  • Your question needs to contain all the code, but you just posted it as the solution to your question. This isn't a discussion forum, these are comments for clarifying the question, and the box below is not for posting responses, it's for posting the solution to the question. People will think that you have found the answer and no longer need help. I've deleted the answers that were just responses so that it's clear your question hasn't got a solution yet. Use the Edit link under the list of tags to update your question instead
    – Tom J Nowell
    Jul 8, 2021 at 14:02
  • I've edited in your save component, and I'm alarmed to see you modifying the props object and using the current date and time, as well as the { ...props } on the main component returned. This guarantees that your block markup will never match unless the markup was validated at the exact moment the post was saved then never again. props should be considered immutable and unchangeable in any React component, you can call props that are function but you can never modify props, ever, under any circumstances.
    – Tom J Nowell
    Jul 8, 2021 at 14:21
  • I would also strongly recommend that you look into useBlockProps and useSelect
    – Tom J Nowell
    Jul 8, 2021 at 14:22

2 Answers 2

0

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.

0

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' },

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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