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

by

How to add custom settings in the side panel that shows when a block is active? For example Paragraph block has “Text Settings” and “Custom Size” options, how can I add options to my custom block?

This tutorial: https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbars-and-inspector/, says to use InspectorControls however that appears to be deprecated and does not work.

Here’s what I have so far:

( function( blocks, i18n, element ) {
    var el = element.createElement;
    var __ = i18n.__;
    var ServerSideRender = window.wp.components.ServerSideRender;

    blocks.registerBlockType( 'my-block/block', {
        title: __( 'My Block', 'my-block' ),
        icon: 'welcome-widgets-menus',
        category: 'widgets',
        attributes : {},
        edit: function( props ) {
            return [
                el( ServerSideRender, {
                    block: "my-block/block",
                    attributes:  props.attributes
                } )
            ];
        },
        save: function() {
            return null;
        },
    } );
}(
    window.wp.blocks,
    window.wp.i18n,
    window.wp.element
) );

Thank you!

2 Answers
2

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