Add Settings for a Gutenberg Block (Inspector Controls)

With this tutorial I continue the series of tutorials where I created a Gutenberg block from scratch and make it editable.

Now it is time to add some block settings into the sidebar. Here is what I mean:

add settings fields for Gutenberg blocks

So we are going to have a couple of options for your block, their values will become the hidden field values of the subscription form on the website which the block displays.

Attributes

The same way how we added attributes for every editable RichText component we have to do it for Inspector Control fields. So, let’s open our block.json file and add there the following:

"attributes": {
	
	...
	
	"list_id": {
		"type": "string"
	},
	"doubleoptin": {
		"type": "boolean"
	}
}

For checkboxes and toggles we have to use boolean type. But you’ve noticed that, right?

Adding Fields into Settings Sidebar

edit()

Most the work we are going to do here – we will add a simple input field and a toggle into the settings sidebar, display their values depending on the values of the attributes and also wrap the fields into the panel.

It is all for edit() method of registerBlockType() function. 

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

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

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

	const blockProps = useBlockProps();

	return(
		<>
			<InspectorControls>
				<PanelBody title="Form Settings" initialOpen={ false }>
					<PanelRow>
						<TextControl
							label="List ID"
							onChange={ ( list_id ) => setAttributes( { list_id } ) }
							value={ attributes.list_id }
						/>
					</PanelRow>
					<PanelRow>
						<ToggleControl
							label="Double Opt In"
							onChange={ () => setAttributes( { doubleoptin: ! attributes.doubleoptin } ) }
							checked={ attributes.doubleoptin }
						/>
					</PanelRow>
				</PanelBody>
			</InspectorControls>
			<div {...blockProps}>
				<RichText
					tagName="h3"
					value={ attributes.heading }
					allowedFormats={ [ 'core/bold', 'core/italic' ] }
					onChange={ ( heading ) => setAttributes( { heading } ) }
					placeholder="Enter heading here..."
				/>
				<p>
					<span>Email address</span>
					<RichText
						tagName="span"
						value={ attributes.buttonText }
						allowedFormats={ [] }
						onChange={ ( buttonText ) => setAttributes( { buttonText } ) }
						placeholder="Button text..."
					/>
				</p>
			</div>
		</>
	)
}

Here we have:

save()

All we have to do is to add two hidden input fields into the save() method.

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="Enter your email address" />
				<RichText.Content tagName="button" value={ attributes.buttonText } />
				<input type="hidden" name="list_id" value={ attributes.list_id } />
				<input type="hidden" name="double_opt_in" value={ true == attributes.doubleoptin ? 'yes' : 'no' } />
			</form>
		</div>
	)
}

# Gutenberg, Creating Blocks

Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 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 Twitter