Gutenberg InspectorControls is deprecated, how to add custom block settings?

Actually InspectorControls is not deprecated. It’s been moved to another namespace or under a different object, which is wp.editor. So the latest way of adding controls in side panel is the following (in JSX) –

// Destruct components
// Place at the top of the block file
const { InspectorControls } = wp.editor;
const { PanelBody } = wp.components;

// in edit() method
<InspectorControls>
    <PanelBody
        title={__('Panel Title')}
        initialOpen={true}
    >
        {/* Panel items goes here */}
    </PanelBody>
</InspectorControls>

Update (example in pure JS):

var InspectorControls = wp.editor.InspectorControls;
var PanelBody = wp.components.PanelBody;

// in edit() method
wp.element.createElement(
    InspectorControls,
    null,
    wp.element.createElement(PanelBody, {
        title: __('Panel Title'),
        initialOpen: true
    })
);

Leave a Comment