成功保存后，如何在加载后修复此 Wordpress 自定义古腾堡块问题？

如何解决成功保存后，如何在加载后修复此 Wordpress 自定义古腾堡块问题？

正如标题所述，我正在自学如何为 wordpress 开发创建自定义古腾堡块，我编写了以下代码。保存时它可以正常工作，但是当您重新加载保存的页面时，您会收到控制台错误并显示

此块包含意外或无效的内容。

当您单击“解决”时，它会显示以下内容：

//  Import CSS.
import './editor.scss';
import './style.scss';

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { RichText } = wp.blockEditor
const { withColors } = wp.blockEditor
const { PanelColorSettings} = wp.blockEditor;
const { InspectorControls } = wp.blockEditor;
const { PanelBody } = wp.components;


registerBlockType( 'cgb/block-my-block',{

    title: __( 'my-block - CGB Block' ),icon: 'shield',category: 'common',keywords: [
        __( 'my-block — CGB Block' ),__( 'CGB Example' ),__( 'create-guten-block' ),],attributes: {
        align: {
            type: 'string',default: 'full',},link_text: {
            selector: 'a',source: 'children',link_url: {
                selector: 'a',source: 'attribute',attribute: 'href',txtColor: {
            type: 'string'
        },bgcolor: {
            type: 'string'
        },supports: {
        align:true,//align: ['wide','full'],// limit only to these
    },getEditWrapperProps() {
        return {
            'data-align': 'full',};
    },edit: ( props ) => {

        let link_text = props.attributes.link_text 
        let link_url = props.attributes.link_url 
        let txtColor = props.attributes.txtColor
        let bgColor = props.attributes.bgColor

        function onChangeContentURL ( content ) {
            props.setAttributes({link_url: content})
        }

        function onChangeContentName ( content ) {
                props.setAttributes({link_text: content})
        }    
        
        function onChangeBGColor ( content ) {
            props.setAttributes({bgColor: content})
        }  

        function onChangeColor ( content ) {
            props.setAttributes({txtColor: content})
        }    

        return (
            
            
            <div className={ props.className } style={{ backgroundColor:bgColor,color: txtColor }}>


            <InspectorControls key= { 'inspector' } >
                    <PanelBody>

                    <PanelColorSettings 
                        title={ __('Title Color','tar') }
                        colorSettings= { [ 
                            {
                            value: txtColor,onChange: (colorValue) => onChangeColor ( colorValue ),label: __('Color','tar'),] }
                    />

                    <PanelColorSettings 
                        title={ __('Background Color','tar') }
                        colorSettings= { [ 
                            {
                            value: bgColor,onChange: (colorValue) => onChangeBGColor ( colorValue ),] }
                    />

                </PanelBody>
            </InspectorControls>


                <p>Sample Link Block</p>
                <label>Name:</label>
                <RichText
                        className={props.className} // Automatic class: gutenberg-blocks-sample-block-editable
                        onChange={onChangeContentName} // onChange event callback
                        value={link_text} // Binding
                        placeholder="Name of the link"
                />
                <label>URL:</label>
                <RichText
                        format="string"             // Default is 'element'. Wouldn't work for a tag attribute
                        className={props.className} // Automatic class: gutenberg-blocks-sample-block-editable
                        onChange={onChangeContentURL} // onChange event callback
                        value={link_url} // Binding
                        placeholder="URL of the link"
                />   
                <p>— Hello from the backend.!!</p>

            </div>
        );
    },/**
     * The save function defines the way in which the different attributes should be combined
     * into the final markup,which is then serialized by Gutenberg into post_content.
     *
     * The "save" property must be specified and must be a valid function.
     *
     * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
     *
     * @param {Object} props Props.
     * @returns {Mixed} JSX Frontend HTML.
     */
    save: ( props ) => {
        let txtColor = props.attributes.txtColor
        let bgColor = props.attributes.bgColor

        return (
            <div className={ props.className } style={{ backgroundColor:bgColor,color:txtColor }} >
                <p>— Hello from the frontend.</p>
                <a href={props.attributes.link_url}>{props.attributes.link_text}</a>
                </div>
        );
    },} );

控制台错误看起来像 POST 和 SAVE 数据不同导致错误。

消息是：

Block validation: Block validation Failed for `cgb/block-my-block` ({name: "cgb/block-my-block",icon: {…},attributes: {…},keywords: Array(3),save: ƒ, …}).

Content generated by `save` function:

<div class="wp-block-cgb-block-my-block alignfull" style="color:#000000"><p>— Hello from the frontend.</p><a></a></div>

Content retrieved from post body:

<div class="wp-block-cgb-block-my-block alignfull" style="background-color:#cd2653;color:#000000"><p>— Hello from the frontend.</p><a></a></div>

所以在我看来问题出在根元素上的 Save 函数样式标签上。

<div className={ props.className } style={{ backgroundColor:bgColor,color:txtColor }} >

我删除了一种样式，只留下另一种样式，并且它有效。把另一个放回去，它坏了。我是否错误地包含了这种多种样式？如果是这样，添加多个保存在根元素上的样式的约定是什么？我也是新手，正在从教程中学习并阅读 Gutenburg github 文档。如果我做错了一些基本的事情，请告诉我。

解决方法

块验证问题是由一个小错误引起的，其中您的属性 __round()__（区分大小写）在 edit() 和 save() 中被称为 bgcolor。

您的代码表明您在创建自己的自定义 Gutenberg 块方面走在正确的道路上，因此我想分享一个建议，将 array destructuring 与 bgColor 一起使用，使您的代码更易于阅读和维护。您也可以删除仅调用 props 的自定义 onChange 函数，转而直接调用 setAttributes，这会减少您需要编写的代码量并减少拼写错误的可能性。

例如：

setAttributes()