Create RangeControl in gutenberg Block

Question

I am try to creating rangecontrol in Gutenberg block, but not able to success, can you please share some sample code how can i do that.
here is what is am currently working on

const { __ } = wp.i18n; // Import __() from wp.i18n
import { SelectControl } from 'WPBeginner - WordPress Tutorials/components';
import { withState } from 'WPBeginner - WordPress Tutorials/compose';
const {
    registerBlockType,
    AlignmentToolbar,
    BlockControls,
    InspectorControls
} = wp.blocks;
const { withSelect } = wp.data;
const blockStyle = {
    backgroundColor: '#900',
    color: '#fff',
    padding: '20px',
};
const MySelectControl = withState( {
    size: '50%',
} )( ( { size, setState } ) => (
    <SelectControl
        label="Size"
        value={ size }
        options={ [
            { label: 'Big', value: '100%' },
            { label: 'Medium', value: '50%' },
            { label: 'Small', value: '25%' },
        ] }
        onChange={ ( size ) => { setState( { size } ) } }
    />
) );
registerBlockType( 'mansi-caterers/slider', {
    title: 'Slider',
    icon: 'megaphone',
    category: 'mansi-caterers',

    edit: withSelect( ( select ) => {
        return {
            posts: select( 'core' ).getEntityRecords( 'postType', 'slider' )
        };
    } )( ( { posts, className } ) => {

        if ( ! posts ) {
            return "Loading...";
        }

        if ( posts && posts.length === 0 ) {
            return "No posts";
        }
        let post = posts[ 0 ];

        // return <a style={blockStyle} className={ className } href={ post.link }>
        //  { post.title.rendered }
        // </a>;
        return <div style={blockStyle} class={className}>Slider Set</div>;
    } ),

    save() {
        // Rendering in PHP
        return null;
    },
} );
0
C Modi 2 months 0 Answers 15 views 0

Leave an answer