我用一些文字和背景图片创建了一个简单的古腾堡块。一切都很好,后端和前端。但是,如果我再次尝试编辑此页面,则在编辑器中缺少背景图像,并且我在控制台中收到以下错误消息:
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',
source: 'html',
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,
body,
titleColor,
backgroundImage,
overlayColor,
overlayOpacity
} = attributes;
return (
<div className="cta-container" style={{
backgroundImage: `url('${backgroundImage}')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
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>
);
}
});
有什么想法吗?
谢谢!
答案 0 :(得分:0)
您的属性 backroundImage
的名称似乎有误,应该是 backgroundImage
。此错字是您在尝试更新/保存未定义的属性时在保存输出中看到的 undefined
错误的原因。
//custom attributes
attributes: {
...
backroundImage: { // < typo, correct to 'backgroundImage'
type: 'string',
default: null
},
...
在您的 backgroundImage
和 edit()
函数中正确命名了 save()
属性。