How to code the Inspector Controls – the settings sidebar of Gutenberg blocks?

Share

What are the Inspector Controls?

The Inspector Controls are the settings in the sidebar of Gutenberg blocks. When a block is selected in admin, you will see the settings of the blocks under the ‘Block‘ tab of the sidebar. Typical settings you will find here are color selectors, on/off switches, size selectors, and variable dropdowns.

The Inspector Control React Component

For the WordPress developer, the Inspector Controls (<InspectorControls>) is a React component used within the edit-function of a Gutenberg block. Any child of the Inspector Controls will show up in the sidebar while editing the block in the WordPress admin. Below is a minimal edit function of a Gutenberg block using a ‘FormToggle‘ control (switch on/off) inside the inspector controls.

import { InspectorControls } from "@wordpress/block-editor";
import { Fragment } from "@wordpress/element";
import {
	PanelBody,
	FormToggle,
} from "@wordpress/components";

const edit = (props) => {
	const { className, attributes, setAttributes } = props;
	const { show } = attributes;

	return (
		<Fragment>
			<InspectorControls>
				<PanelBody title="Settings" initialOpen={false}>
					<FormToggle
						label="Should text be shown?"
						help={show ? "Yes" : "No"}
						checked={show}
						onChange={() => setAttributes({ show: !show })}
					/>
				</PanelBody>
			</InspectorControls>
			<div>
				My Block Content
			</div>
		</Fragment>
	);
};

Inside of the <InspectorControls> you find a wrapper component called <PanelBody>. It divides the settings area into sections that can be toggled to open and close.

Inside of the <PanelBody> is the actual wordpress native form control. You may use a regular html checkbox instead – but it gives a consistent feeling to stick to the native wordpress controls available in the WordPress components library.

You will use the control components to set your block attributes (the data that is saved in the database and passed to the save function).

Hoped this gave an introduction to the settings panel of Gutenberg blocks. In the coming posts, we will go through the most useful controls in the components library. Stay tuned!