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

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

    ...

    //Custom Attributes

    attributes: {

        ...

        priceCard: { // is missing

            ... // set type, default etc..

        }

    },

    ...

}

在更新的块中添加/删除了该属性，然后重新加载保存的帖子时，该属性丢失，从而导致问题。

此外，在进行简单的属性更新时，可以删除代码中的自定义函数部分，以便setAttributes()直接使用，例如：

<RichText

    key="editable"

    tagName="p"

    placeholder="Paste Shortcode"

    value={priceCard}

    onChange={(value) => setAttributes({ priceCard: value })} // attribute: value

/>

这将使您的代码更易于管理/故障排除。