为什么我的自定义古腾堡块在保存时会损坏？

Question

这是我第一次创建自定义古腾堡块。我已经能够成功生成几个块。但是，当我创建帖子并使用该块时，它可以工作，但是当我退出并返回帖子时，我收到此错误：

该块包含意外或无效内容

我做了一些研究，发现如果编辑和保存的内容不一致，可能会导致这种情况。我一直无法找到不一致的地方，但我可以使用一些帮助。下面是注册块的代码，该块确实按预期执行，但在第一次创建块后不允许我进行编辑。

感谢帮助！

const { registerBlockType } = wp.blocks;

const { 

    RichText, 

    InspectorControls, 

    ColorPalette,

    MediaUpload,

    RawHTML

} = wp.editor;

const { PanelBody, IconButton } = wp.components;

registerBlockType('myblog/call-to-action', {

    title: 'Call To Action',

    description: 'Block to generate a call to action',

    icon: 'align-full-width',

    category: 'widgets',

    //Custom Attributes

    attributes: {

        title: {

            type: 'string',

            source: 'html',

            selector: 'h2'

        },

        titleColor: {

            type: 'string',

            default: 'white'

        },

        backgroundColor: {

            type: 'string',

            default: 'blue'

        },

        body: {

            type: 'string',

            source: 'html',

            selector: 'p'

        }

    },

   //Built-in Functions

    edit({attributes, setAttributes}) {

        const{

            title,

            priceCard,

            titleColor,

            backgroundColor,

        } = attributes;

        //Custom Functions

        

        function onChangeTitle(newTitle) {

            setAttributes( { title: newTitle } );

        }

        function onChangePriceCard(newCard) {

            setAttributes( { priceCard: newCard } );

        }

        function onTitleColorChange(newColor){

            setAttributes( { titleColor: newColor } );

        }

        function onChangeBackgroundColor(newBackground) {

            setAttributes( { backgroundColor: newBackground })

        }

Answer 1

priceCard您的属性中缺少该属性，例如：registerBlockType('myblog/call-to-action', {&nbsp; &nbsp; ...&nbsp; &nbsp; //Custom Attributes&nbsp; &nbsp; attributes: {&nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; priceCard: { // is missing&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ... // set type, default etc..&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; ...}在更新的块中添加/删除了该属性，然后重新加载保存的帖子时，该属性丢失，从而导致问题。此外，在进行简单的属性更新时，可以删除代码中的自定义函数部分，以便setAttributes()直接使用，例如：<RichText&nbsp; &nbsp; key="editable"&nbsp; &nbsp; tagName="p"&nbsp; &nbsp; placeholder="Paste Shortcode"&nbsp; &nbsp; value={priceCard}&nbsp; &nbsp; onChange={(value) => setAttributes({ priceCard: value })} // attribute: value/>这将使您的代码更易于管理/故障排除。