Inspector Controls – Add Settings to a Custom Block

As a result of this lesson, our custom Gutenberg block will have the following settings:

So, we will add three types of options here:

• Regular text and checkbox (toggle) fields in a custom panel,
• Border, border radius, padding, and margin settings with the help of the block.json file,
• Custom border setting into the “border” panel of the InspectorControl component.

I am not afraid to say that this lesson may be quite complicated, so I would recommend you to watch the video above or learn from the source files of the block.

Basics of Using Gutenberg InspectorControl Component

Let’s start with this simple setting group.

Basically, what I am going to do here is to add a custom “Form Settings” panel into the block settings, and then I will add two fields there – a text field and a checkbox (or, to be more specific, a toggle).

Step 1. Setting up block attributes

Every custom block setting is a block attribute.

So, in the same way that we added attributes for every editable RichText component in the previous tutorial, we have to do it for the fields in the InspectorControl component as well.

Let’s open our block.json file and add the following lines there:

"attributes": {
	
	...
	
	"emailPlaceholder" : {
		"type": "string",
		"default": "Email address"
	},
	"showFormIcon" : {
		"type": "boolean",
		"default" : false
	},
}

For checkboxes and toggles, we have to use a boolean type. Kind of obvious, but just in case.

Step 2. Add an InspectorControls component

Since our custom settings are going to be displayed only in the block editor, most of the work we’re going to do in this chapter. We will add a simple input field and a toggle field into the settings sidebar, display their values depending on the values of their attributes, and also wrap the fields into a panel.

import { 
	useBlockProps, 
	RichText, 
	InspectorControls,
} from '@wordpress/block-editor'

import {
	TextControl,
	ToggleControl,
	PanelBody,
} from '@wordpress/components'

export default function Edit( { attributes, setAttributes } ) {

	const blockProps = useBlockProps()

	return(
		<>
			<InspectorControls>
				<PanelBody title="Form Settings" initialOpen={ false }>
					<TextControl
						label="Email placeholder"
						onChange={ ( placeholder ) => setAttributes( { emailPlaceholder : placeholder } ) }
						value={ attributes.emailPlaceholder }
					/>
					<ToggleControl
						label="Show form icon"
						onChange={ () => setAttributes( { showFormIcon: ! attributes.showFormIcon } ) }
						checked={ attributes.showFormIcon }
					/>
				</PanelBody>
			</InspectorControls>
			<div {...blockProps}>
				<RichText
					tagName="h3"
					value={ attributes.heading }
					allowedFormats={ [ 'core/italic' ] }
					onChange={ ( heading ) => setAttributes( { heading } ) }
					placeholder="Enter heading here..."
				/>
				<p>
					<span>{ attributes.emailPlaceholder }</span>
					<RichText
						tagName="span"
						value={ attributes.buttonText }
						allowedFormats={ [] }
						onChange={ ( buttonText ) => setAttributes( { buttonText } ) }
						placeholder="Button text..."
					/>
				</p>
			</div>
		</>
	)
}

Now let’s deconstruct this part a little bit:

• At the beginning of this code snippet, I included TextControl and ToggleControl components for the fields themselves, PanelBody and InspectorControls are just kind of wrappers for the fields.
• The panel with fields is closed by default, it is because of initialOpen={ false }, you can change it to initialOpen={ true }, if you would like to make it initially open.
• We’re using the onChange function for every field to change an attribute value when a field value is changed accordingly. For checkboxes and toggles, we can just set an opposite value with the help of ! attributes.{ATTRIBUTE NAME HERE}.

You may also notice that our “Show form icon” toggle doesn’t do anything at this moment, and that’s correct – we will code it in the next lesson of this course.

Step 3. Applying block settings to the site front end

In this step, let’s make some changes in the save() method of the registerBlockType() function, or, if you’re working with dynamic blocks, in the render.php file.

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function Save( { attributes } ) {
	return (
		<div {...useBlockProps.save()}>
			<RichText.Content tagName="h3" value={ attributes.heading } />
			<form>
				<input type="email" placeholder={ attributes.emailPlaceholder } />
				<RichText.Content tagName="button" value={ attributes.buttonText } />
			</form>
		</div>
	)
}

Super-simple, isn’t it?

How to Add Settings to Default InspectorControls Groups (Tabs)

The cool thing here is that since WordPress 6.2, it is not necessary to put all block settings in your custom panels (or a single panel, doesn’t matter). Now, you can add block settings to one of the standard InspectorControls groups:

• styles,
• color,
• typography,
• dimensions,
• border,
• advanced.

As you can see, most of these groups are style-related; however, it is not a requirement.

There are two ways of adding option fields to these groups.

Using your block.json file – in this case, we’re simply using the supports parameter of the configuration file, for example:

"supports": {
	"spacing": {
		"padding": true,
		"margin" : true
	}
},

Using a group parameter of the InspectorControls component where you specify a group slug. However, for the “Advanced” group, you can also use the InspectorAdvancedControls component. A simple example:

<InspectorControls group="dimensions">
	Some fields for the dimensions group
</InspectorControls>
<InspectorControls group="border">
	Some fields for the border group
</InspectorControls>

The result would be:

From the screenshot below, you can see that in the case of our custom “Subscription form” block, we’ve added some block settings to the “Border” and “Dimensions” groups.

So far, I have used:

• the block.json method to add “Margin”, “Padding”, “Border,” and “Border Radius” settings,
• <InsectorControls group="border"> to add the “Email field border” setting with the help of the BorderBoxControl component.

How to do that? I have described the whole process in the video above, or you can take a look at the source code of our block below:

Sorry, but you don’t have access to the source files. Sign in or buy the course.

Gutenberg Block Development

Misha Rudrastyh

Hey guys and welcome to my website. For more than 15 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X