自定义古腾堡块，刷新页面后验证失败

问题描述

我用一些文字和背景图片创建了一个简单的古腾堡块。一切都很好，后端和前端。但是，如果我再次尝试编辑此页面，则在编辑器中缺少背景图像，并且我在控制台中收到以下错误消息：

Content generated by `save` function:

<div class="wp-block-foa-foa-hero-block cta-container" style="background-image:url('undefined');background-size:cover;background-position:center;background-repeat:no-repeat"><div class="cta-overlay" style="background:black;opacity:0.3"></div><h2 style="color:#ff9f00">asdsad</h2><p>asdsa</p></div>

Content retrieved from post body:

<div class="wp-block-foa-foa-hero-block cta-container" style="background-image:url('http://foa.test/wp-content/uploads/2020/12/carousel01.jpg');background-size:cover;background-position:center;background-repeat:no-repeat"><div class="cta-overlay" style="background:black;opacity:0.3"></div><h2 style="color:#ff9f00">asdsad</h2><p>asdsa</p></div>

您可以在下面找到我的代码：

const { registerBlockType } = wp.blocks;
const { RichText,InspectorControls,ColorPalette,MediaUpload } = wp.blockEditor;
const { PanelBody,IconButton,RangeControl } = wp.components;

registerBlockType('foa/foa-hero-block',{
    //built-in attributes
    title: 'FoA Hero Block',description: 'Hero Block to be used on the top of the main page',icon: 'dashicons-id-alt',categoy: 'layout',//custom attributes
    attributes: {
        title: {
            type: 'string',source: 'html',selector: 'h2'
        },titleColor : {
            type:'string',default:'black'

        },body: {
            type:'string',selector: 'p'
        },backroundImage: {
            type: 'string',default: null
        },overlayColor: {
            type: 'string',default: 'black'
        },overlayOpacity: {
            type:'number',default:0.3
        }
    },//custom functions

    edit: ({attributes,setAttributes}) => {

        const {
            title,body,titleColor,backgroundImage,overlayColor,overlayOpacity
        } = attributes;

        function onChangeTitle(newBody) {
            setAttributes({title: newBody});
        }

        function onChangeBody(newTitle) {
            setAttributes({body: newTitle});
        }

        function onTitleColorChange(newColor) {
            setAttributes({titleColor: newColor});
        }

        function onSelectimage(newImage) {
            setAttributes({backgroundImage: newImage.sizes.full.url});
        }

        function onOverlayColorChange(newColor) {
            setAttributes({overlayColor: newColor});
        }

        function onOverlayOpacityChange(newOpacity) {
            setAttributes({overlayOpacity: newOpacity});
        }

        return ([
            <InspectorControls style={{marginBottom:'40px'}}>
                <PanelBody title={'Font Color Settings'}>
                    <p><strong>Select a Title Color:</strong></p>
                    <ColorPalette value={titleColor} onChange={onTitleColorChange} />
                </PanelBody>
                <PanelBody title={'Background Image Settings'}>
                    <p><strong>Select a Background Image:</strong></p>
                    <MediaUpload onSelect={onSelectimage} type="image" value={backgroundImage} render={({open}) => (
                        <IconButton onClick={open} icon="upload" className="editor-media-placeholder__button is-button is-default is-large">Background Image</IconButton>
                    )} />
                    <div style={{marginTop: '20px',marginBottom: '40px'}}>
                        <p><strong>Overlay Color</strong></p>
                        <ColorPalette value={overlayColor} onChange={onOverlayColorChange} />
                    </div>
                    <RangeControl
                        label={'Overlay Opacity'}
                        value={overlayOpacity}
                        onChange={onOverlayOpacityChange}
                        min={0}
                        max={1}
                        step={0.05}
                     />
                </PanelBody>
            </InspectorControls>,<div class="cta-container" style={{
                backgroundImage: `url('${backgroundImage}')`,backgroundSize: 'cover',backgroundPosition: 'center',backgroundRepeat: 'no-repeat'
            }}>
                <div className="cta-overlay" style={{background: overlayColor,opacity: overlayOpacity}}></div>
                <RichText 
                    key="editable"
                    tagName="h2"
                    placeholder="Your Title"
                    value={title}
                    onChange={onChangeTitle}
                    style={ { color:titleColor } }
                />
                <RichText 
                    key="editable"
                    tagName="p"
                    placeholder="Your Text"
                    value={body}
                    onChange={onChangeBody}
                />
            </div>
        ]);
    },//built-in functions
    save: ({attributes}) => {

        const {
            title,overlayOpacity
        } = attributes;


        return (
            <div className="cta-container" style={{
                backgroundImage: `url('${backgroundImage}')`,backgroundRepeat: 'no-repeat'
            }}>
            <div className="cta-overlay" style={{background: overlayColor,opacity: overlayOpacity}}></div>
                <h2 style={{color:titleColor}}>{title}</h2>
                <RichText.Content tagName="p" 
                    value={body}
                />
            </div>
        );
    }
});

有什么想法吗？

谢谢！

解决方法

您的属性 backroundImage 的名称似乎有误，应该是 backgroundImage。此错字是您在尝试更新/保存未定义的属性时在保存输出中看到的 undefined 错误的原因。

//custom attributes
attributes: {
    ...
    backroundImage: { // < typo,correct to 'backgroundImage'
        type: 'string',default: null
    },...

在您的 backgroundImage 和 edit() 函数中正确命名了 save() 属性。