wordpress-gutenberg - RangeControl 组件可以设置为小数之间的范围吗？

Question

我正在为 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>
    );
}

});

标签： wordpress-gutenberg

Answer 1

是的，将 RangeControl 上的“step”道具设置为您想要的值。（这没有记录，但它有效。）

例子：

<RangeControl
   label="Overlay Opacity"
   value={ overlayOpacity }
   onChange={ onOverlayOpacity }
   min={ 0.0 }
   max={ 1.0 }
   step={ 0.1 }   
/>