Gutenberg: How to use RangeControl in the editor itself and make it work?

admin管理员组

文章数量:1279182

I tried to use the RangeControl component outside and in the block editor itself. But it looks like there are styles missing, and it does not work properly.

Is there a trick to use it in the block in Gutenberg somehow?

export default function Edit( { attributes, setAttributes } ) {

const blockProps = useBlockProps();

const MyRangeControl = () => {
    const [ columns, setColumns ] = useState( 2 );
 
    return(
        <RangeControl
            label="Rating"
            value={ attributes.value }
            onChange={ onChangeValue }
            min={ 1 }
            max={ 10 }
            step={ 0.5 } 
        />
    );
};

return (
    <p { ...blockProps }>
    <MyRangeControl/>
    </p>
);

}

EDIT: It works if I add it like this, but it does not save the value:

export default function Edit( { attributes, setAttributes } ) {

    const blockProps = useBlockProps();

    const onChangeValue = ( newValue ) => {
        setAttributes( { value: newValue} )
    }


    return (
        <p { ...blockProps }>
        <RangeControl
                label="Rating"
                value={ attributes.value }
                onChange={ onChangeValue }
                min={ 1 }
                max={ 10 }
                step={ 0.5 } 
            />
        </p>
    );
} 

I tried to use the RangeControl component outside and in the block editor itself. But it looks like there are styles missing, and it does not work properly.

Is there a trick to use it in the block in Gutenberg somehow?

export default function Edit( { attributes, setAttributes } ) {

const blockProps = useBlockProps();

const MyRangeControl = () => {
    const [ columns, setColumns ] = useState( 2 );
 
    return(
        <RangeControl
            label="Rating"
            value={ attributes.value }
            onChange={ onChangeValue }
            min={ 1 }
            max={ 10 }
            step={ 0.5 } 
        />
    );
};

return (
    <p { ...blockProps }>
    <MyRangeControl/>
    </p>
);

}

EDIT: It works if I add it like this, but it does not save the value:

export default function Edit( { attributes, setAttributes } ) {

    const blockProps = useBlockProps();

    const onChangeValue = ( newValue ) => {
        setAttributes( { value: newValue} )
    }


    return (
        <p { ...blockProps }>
        <RangeControl
                label="Rating"
                value={ attributes.value }
                onChange={ onChangeValue }
                min={ 1 }
                max={ 10 }
                step={ 0.5 } 
            />
        </p>
    );
} 

• block-editor

Share Improve this question edited Nov 18, 2021 at 21:50 Marc asked Nov 18, 2021 at 21:28 MarcMarc 69799 silver badges2828 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

This happens because the Component need the correct data type. Use "number" when getting the value. Use "String" as the attributes type.

const onChangeValue = ( newValue ) => {
        setAttributes( { value: String(newValue)} )
    }

<RangeControl
 label="Rating"
 value={ Number(attributes.value) }
 onChange={ onChangeValue }
 min={ 1 }
 max={ 10 }
 step={ 0.5 } 
/>
        

本文标签： Gutenberg How to use RangeControl in the editor itself and make it work