0

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;
    },
} );
0

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>
  • thanks, also can you show how can i display list of custom post in this same block of code? – C Modi Feb 6 at 7:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.