Control Types For Settings Sidebar – Gutenberg Block Development

In previous tutorial blog post, we have learned how to use Settings Sidebar to add option to change to change the color of Colored Lines block. We have used the PanelColorSettings element with custom color options which lets the user change the color of the Colored Lines. In this tutorial, we will learn about the other type of editable fields (text field, text area field, radio button field etc.) also known as controls for settings sidebar and how to use them inside the edit() function.

Text Control

const { TextControl, PanelRow } = components;
/* Text Field */
el( PanelRow, {},
        el( TextControl,
	{
               label: 'List ID',
               onChange: ( value ) => {
                     props.setAttributes( { list_id: value } );
               },
               value: props.attributes.list_id
	})
),

Text Area Control

const { TextareaControl } = components;
// Textarea field
el( TextareaControl,
	{
               label: 'Textarea Control',
               onChange: ( value ) => {
                        props.setAttributes( { textarea_attr: value } );
		},
                value: props.attributes.textarea_attr,
	}
),

Toggle Control

const { ToggleControl, PanelRow} = components;
/* Toggle Field */
el( PanelRow, {},
	el( ToggleControl,
	{
                label: 'Double Opt In',
                onChange: ( value ) => {
                       props.setAttributes( { doubleoptin: value } );
                },
                checked: props.attributes.doubleoptin,
	})
),

Checkbox Control

const { CheckboxControl } = components;
// Checkbox field
el( CheckboxControl,
	{
                label: 'Checkbox Control',
                onChange: ( value ) => {
                       props.setAttributes( { chekbox_attr: value } );
	        },
                checked: props.attributes.chekbox_attr,
        }
),

Select Control

const { SelectControl } = components;
// Select dropdown field
el( SelectControl,
	{
                label: 'Select Control',
                options : [
                        { label: 'Option 1', value: 'val_1' },
                        { label: 'Option 2', value: 'val_2' },
		],
                onChange: ( value ) => {
                        props.setAttributes( { select_attr: value } );
		},
		value: props.attributes.select_attr
	}
),

Radio Control

const { RadioControl } = components;
// Radio buttons
el( RadioControl,
	{
               label: 'Radio Control',
               //help: 'Some kind of description',
               options : [
                      { label: 'Option 1', value: 'value_1' },
                      { label: 'Option 2', value: 'value_2' },
		],
                onChange: ( value ) => {
                       props.setAttributes( { radio_attr: value } );
		},
                selected: props.attributes.radio_attr
	}
),

Range Control

const { RangeControl } = components;
// Range slider
el( RangeControl,
	{
                label: 'Line Width (%)',
		min: 10,
		max: 100,
                initialPosition: 100,
                value: props.attributes.lineWidth,
                onChange: ( value ) => {
                        props.setAttributes( { lineWidth: value } );
		},
	}
),

Panel Color Control

const { PanelColorSettings } = editor;
const colorSamples = [
	{
		name: 'Coral',
		slug: 'coral',
		color: '#FF7F50'
	},
	{
		name: 'Brown',
	        slug: 'brown',
		color: '#964B00'
	},
	{
		name: 'Purple',
		slug: 'purple',
		color: '#800080'
	}
];
el( PanelColorSettings, {
	// title: 'Line Color Options',
        colorSettings: [
	        // Color 1
		{
                        colors: colorSamples, // array with custom colors
                        value: props.attributes.lineColor,
                        label: 'Line color',
                        onChange: ( value ) => {
                                props.setAttributes( { lineColor: value } );
                        },
		},
	]
}),

Media Upload

const {MediaUpload} = editor;
const { PanelRow, Button } = components;

el( PanelRow, {},
	el( MediaUpload, {
                onSelect: ( value ) => {
                        props.setAttributes( { videoThumbnail: value.url } );
		},
                type: 'image',
                value: props.attributes.videoThumbnail,
                render: function( obj ) {
                        return el( Button, {
                                className: props.attributes.videoThumbnail ? 'image-button' : 'button button-large',
                                onClick: obj.open
                                },
                                ! props.attributes.videoThumbnail ? __( 'Upload Image', 'codoblocks' ) : el( 'img', { src: props.attributes.videoThumbnail } )
                        );
	        }
	})
),

References: