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 '@wordpress/components';
import { withState } from '@wordpress/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;
    },
} );

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 '@wordpress/components';
import { withState } from '@wordpress/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;
    },
} );

• block-editor

• You can refer the official document of Wordpress for creating RangeControl. Here is the link. wordpress/gutenberg/handbook/designers-developers/… – Pooja Shingala Commented Apr 29, 2019 at 8:17

1 Answer 1

You are creating the MySelectControl component but it is not being used inside the edit function/component. Include it there and it should appear.

If you want it to appear in the settings sidebar, rather than in the editor, simply wrap the component inside the inspector-controls component (from the package @wordpress/editor):

<InspectorControls>
    <MySelectControl />
</InspectorControls>