我正在为 Gutenberg 构建(并边走边学)英雄形象块。我正在关注它的教程,到目前为止它运行良好。但我想使用 RangeControl 组件(在 Gutenberg Editor Inspector Controls 中)来控制英雄叠加层的不透明度。这也有效,但只能设置整数范围(即从 1 到 10)。是否可以改用小数(因此范围为 0.0 到 1.0)?当然我可以使用整数然后将它们转换为小数,但这不是最好的用户体验。
我使用(非常好的)create-guten-block样板,这里是块的代码(注意:我知道我还没有完成 save() 方法!):
块.js
registerBlockType('configit-blocks/hero', {
title: 'Hero Image',
icon: 'format-image',
category: 'common',
attributes: {
textString: {
type: 'array',
source: 'children',
selector: 'h2',
},
fontColor: {
type: 'string',
default: 'black'
},
overlayOpacity: {
type: 'decimalPoint',
default: 0.0
}
},
edit(props) {
const {
setAttributes,
attributes,
className,
focus
} = props;
const { fontColor } = props.attributes;
const { overlayOpacity } = props.attributes;
function onTextChange(changes) {
setAttributes({
textString: changes
});
}
function onTextColorChange(changes) {
setAttributes({
fontColor: changes
})
}
function onOverlayOpacity(changes) {
setAttributes({
overlayOpacity: changes
})
}
return ([
<InspectorControls>
<div>
<strong>Select a font color:</strong>
<ColorPalette
value={fontColor}
onChange={onTextColorChange}
/>
</div>
<div>
<RangeControl
label="Overlay Opacity"
value={ overlayOpacity }
onChange={ onOverlayOpacity }
min={ 0.0 }
max={ 1.0 }
/>
</div>
</InspectorControls>,
<div className={className}
style={{
backgroundImage: `url('http://placehold.it/1440x700')`,
backgroundSize: 'cover',
backgroundPosition: 'center'
}}>
<div className="overlay" />
<RichText
tagName="h2"
className="content"
value={attributes.textString}
onChange={onTextChange}
placeholder="Enter your text here!"
style={{color: fontColor}}
allowReset={false}
/>
</div>
]);
},
save(props) {
const { attributes, className } = props;
const { fontColor } = props.attributes;
return (
<div className={className}
style={{
backgroundImage: "url('http://placehold.it/1440x700')",
backgroundSize: "cover",
backgroundPosition: "center"
}}>
<div className="overlay"/>
<h2 className="content" style={{color: fontColor}}>{attributes.textString}</h2>
</div>
);
}
});