How to Create Inspector Controls for a Custom Gutenberg Block

Gutenberg  /  9 Comments

First of all we create some kind of useful options for our custom block like this:

Add option fields to the Inspector control panel of our custom Gutenberg block.
One custom Panel, one TextControl and one ToggleControl field.

Once we do it, I will show you how to add all kind of fields too like: textarea, checkbox, number, radio buttons and of course we will try to create multiple options panels.

How to create multiple inspector controls panels in Gutenberg
Multiple Inspector Controls Panels in Gutenberg. In the second panel we created a TextareaConrol, CheckboxControl, SelectControl, RadioControl and RangeControl.

1. Components We Need

I highly encourage you to read the first and the second tutorial in this series. Because some things may be difficult to understand in this case.

Here is what we need:

Let’s dive into it!

( function( blocks, editor, element, components ) {

	const el = element.createElement;

	const { registerBlockType } = blocks;

	const { RichText, InspectorControls } = editor;
	const { Fragment } = element;
	const { TextControl, ToggleControl, Panel, PanelBody, PanelRow } = components;

	attributes: {

		// ... 

	}

	registerBlockType(  // ...

		edit: function( props ) {

			// ...

		}

		save: function( props ) {

			// ...

		}

	)

} )(
	window.wp.blocks,
	window.wp.editor,
	window.wp.element,
	window.wp.components,
);

2. Deal with Attributes

Let’s add some attributes. At this moment we are going to add just two fields, so:

attributes: {

	// ... 

	list_id: {
		type: 'string',
		// default: '12345' // you can set a default value
	},
	doubleoptin: {
		type: 'boolean' // for ToggleControl we need boolean type
	}
},

Nothing especial here, we added an attribute for each of our fields, and as you probably noticed, for ToggleControl and CheckboxControl we have to use boolean type.

3. Add Panels and Settings Fields

In this part of the tutorial you will understand why everyone uses babel js to transform React this way 😁

<Fragment>
	<InspectorControls>
		<PanelBody ...

Maybe one day I will learn npm and all that stuff… but it is not today 😁 Because everything I want today is to make my website and my plugins Gutenberg-compatible. And I have a team to develop clients websites, so I do not have to know it myself.

And now let’s make some settings. Look at your edit() function which is a part of registerBlockType() as you probably remember.

edit: function( props ) {

	return (
		el( Fragment, {},
			el( InspectorControls, {},
				el( PanelBody, { title: 'Form Settings', initialOpen: true },

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

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

				),

			),

			/*  
			 * Here will be your block markup 
			 */
	
		), 
	)

},

4. Make Changes in the Block Markup Depending on its Settings

To be honest, I’m not sure that I created the markup below the perfect way 😁 If you know how to do it better, please let me know in comments below.

Actually all I did below – added two hidden fields and printed the value of our settings there.

save: function( props ) {
	return (
		el( 'form', { className: 'misha-subscription-block-form-wrap' },
			el( 'input', { 'type': 'email', 'placeholder' : 'Enter your email address' } ),
			el( 'input', { 'type': 'hidden', 'name' : 'list_id', 'value' : props.attributes.list_id } ),
			el( 'input', { 'type': 'hidden', 'name' : 'double_opt_in', 'value' : ( props.attributes.doubleoptin == true ? 'yes' : 'no' ) } ),
			el( 'button', {}, 'Subscribe' )
		)
	);
},

But depending on your situation you may probably want to add some CSS classes to the form or maybe even display it only for registered users / certain user roles.

And one more thing – hidden fields don’t change form appearance, that’s why we added them only in save() function, but you can also change block appearance in Gutenberg (edit() function) depending on attributes values.

More Awesome Fields

If you remember the second screenshot from the beginning of this tutorial, I also decided to add the second panel with: TextareaConrol, CheckboxControl, SelectControl, RadioControl and RangeControl.

Multiple panels with inspector controls for your custom Gutenberg block

Let’s begin with the appropriate components first:

const {
	TextControl,
	CheckboxControl,
	RadioControl,
	SelectControl,
	TextareaControl,
	ToggleControl,
	RangeControl,
	Panel,
	PanelBody,
	PanelRow
} = components;

When it comes to attributes, I would say, that nothing especial there, just duplicate the attributes we created before for TextControl and ToggleControl and change their names.

And here is the controls code:

el( InspectorControls, {},

	// 1st Panel – Form Settings
	el( PanelBody, { title: 'Form Settings', initialOpen: true },

		// Text field
		el( PanelRow, {},
			el( TextControl,
				{
					label: 'List ID',
					onChange: ( value ) => {
						props.setAttributes( { list_id: value } );
					},
					// type: 'number', // in case it is a number field
					value: props.attributes.list_id
				}
			)
		),

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

	),

	// 2nd Panel – Awesome Fields (closed by default, see initialOpen parameter)
	el( PanelBody, { title: 'Awesome fields', initialOpen: false },
	
		// Textarea field
		el( TextareaControl,
			{
				label: 'Textarea Control',
				onChange: ( value ) => {
					props.setAttributes( { textarea_attr: value } );
				},
				value: props.attributes.textarea_attr,
			}
		),
		
		// Checkbox field
		el( CheckboxControl,
			{
				label: 'Checkbox Control',
				onChange: ( value ) => {
					props.setAttributes( { chekbox_attr: value } );
				},
				checked: props.attributes.chekbox_attr,
			}
		),

		// 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 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
		el( RangeControl,
			{
				label: 'Range Control',
				min: 2,
				max: 10,
				onChange: ( value ) => {
					props.setAttributes( { range_attr: value } );
				},
				value: props.attributes.range_attr
			}
		),

	)

),

I’m pretty sure you will have question about this tutorial, so welcome to comments!

Read also:

Creating Editable Gutenberg block if You Don’t Know JavaScript Deeply
Using Gutenberg Color Palette for a Custom Block
Misha Rudrastyh

Misha Rudrastyh

I develop websites since 2008, so it is total of 13 years of experience, oh my gosh. Most of all I love love love to create websites with WordPress and Gutenberg, some ideas and thoughts I share throughout my blog.

Need some developer help? Contact me