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:

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:
- I included
TextControl
andToggleControl
components for the fields themselves,PanelBody
,PanelRow
andInspectorControls
are just wrappers for the fields. - The panel with fields is closed by default, it is because of this
initialOpen={ false }
, you can change it toinitialOpen={ true }
, if you would like to make it initially open. - The rest code of the method was described before, here and here.
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>
)
}

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
Thank you very much, I read a lot of your tutorials to train me on gutenberg …
Always welcome!
If you have any suggestions for new posts on Gutenberg, just let me know 🙃⚡️
Like the post and help me to understand they way to modify Inspector component. One thing concern me though, why did you want to create ‘el’? The code just doesn’t look standard of JSX way…
Not a lot of quality tutorials for adding Gutenberg blocks, especially using es5 code. Thanks!