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

Question

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

This block contains unexpected or invalid content

我做了一些研究，我读到如果编辑和保存的内容不一致，可能会导致这种情况。不过，我一直找不到不一致的地方，我需要一些帮助。下面是注册块的代码，它确实按预期运行，但在第一次创建块后不允许我编辑。

感谢帮助！

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 })
        }

return ([
            <InspectorControls style={ { marginBottom: '40px' } }>
                <PanelBody title={ 'Headline Color' }>
                    <p><strong>Choose Title Color</strong></p>
                    <ColorPalette 
                        value={titleColor} 
                        onChange={onTitleColorChange} 
                    />
                </PanelBody>

                <PanelBody title={ 'Background Color' }>
                    <p><strong>Choose Background Color</strong></p>
                    <ColorPalette 
                        value={backgroundColor} 
                        onChange={onChangeBackgroundColor} 
                    />
                </PanelBody>
            </InspectorControls>,
            
            <div class="final-cta">
                <div style= { { backgroundColor:backgroundColor } } class="analysis">
                    <div class="custom-shape-divider-top-1606696223">
                        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
                            <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
                        </svg>
                    </div>
                    <RichText 
                        key="editable"
                        tagName="h2"
                        placeholder="H2 Title" 
                        value= { title }
                        onChange= { onChangeTitle }
                        style= { { color: titleColor } }
                    />
                </div>
                <span class="price-card-cta-container">
                    <RichText 
                        key="editable"
                        tagName="p"
                        placeholder="Paste Shortcode" 
                        value= { priceCard }
                        onChange= { onChangePriceCard }
                    />
                </span>
            </div>
               
        ]);
    },

save({ attributes }) {
        const {
            title,
            priceCard,
            titleColor,
            backgroundColor,
        } = attributes;

        return (
            <div class="final-cta">
                <div style= { { backgroundColor:backgroundColor } } class="analysis">
                    <div class="custom-shape-divider-top-1606696223">
                        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
                            <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
                        </svg>
                    </div>
                    <h2 style={ { color:titleColor } }>{title}</h2>
                </div>
                <span class="price-card-cta-container">
                    <RichText.Content tagName="p" value={priceCard} />
                </span>
            </div>
           
        );
    }
});

Answer 1

您的属性中缺少属性 priceCard，例如：

registerBlockType('myblog/call-to-action', {
    ...
    //Custom Attributes
    attributes: {
        ...
        priceCard: { // is missing
            ... // set type, default etc..
        }
    },
    ...
}

更新块中的属性 added/removed 然后当重新加载保存的 post 时，属性丢失导致了问题。

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

<RichText
    key="editable"
    tagName="p"
    placeholder="Paste Shortcode"
    value={priceCard}
    onChange={(value) => setAttributes({ priceCard: value })} // attribute: value
/>

这将使您的代码更易于 manage/troubleshoot。

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

Why is my Custom Gutenberg Block broken upon save?

javascript

wordpress

jsx

wordpress-gutenberg