Block validation failed

时间:2021-07-06 作者:David Dufour Morin

我为一位客户写了一个特定的区块。它工作得很好。我填写数据。我保存,当我在网站上查看时,它非常完美。但是,当我刷新编辑器时,我收到了这个错误。

非常感谢!

块。min.js?版本=9ed25ffa009c799f99a4340915b6dc6a:3块验证:的块验证失败perso-chacha/bloc-sous-forme-de-template ({名称:perso chacha/bloc sous forme de template,图标:{…},关键字:数组(0),属性:{…},providesContext:{…},…})。

内容生成人save 功能:

<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>
从帖子正文检索的内容:

<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>
这是我的救命稻草。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>
    );
};

2 个回复
最合适的回答,由SO网友:David Dufour Morin 整理而成

最后,问题很简单。当您有多个richtext,每个richtext具有不同的属性时。例如,一个richtext用于属性内容,另一个用于属性标语,它们都使用选择器=“”;“p”;,嗯,您必须添加一个类名以确保它们是不同的。如果没有,则内容的值将用于标语中,因为它们具有相同的选择器。

内容:{类型:\'string\',源:\'text\',选择器:\'p.content\'},标语:{类型:\'string\',源:\'text\',选择器:\'p.slagon\'},

SO网友:Phil

正如Tom指出的,如果没有块的实际代码(特别是save 功能)无法确切告诉您问题所在。也就是说,如果您比较save 函数和帖子正文中的内容,您将看到每个<p> 区域中的标记<div class="chacha-row">...</div>. 您可以从查看内容是如何生成/保存在save 作用

相关推荐