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

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: /, 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.wpponents.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!

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/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.wpponents.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!

• block-editor

Share Improve this question asked Jan 26, 2019 at 22:42 user382738user382738 16311 gold badge11 silver badge44 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 8

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 } = wpponents;

// 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 = wpponents.PanelBody;

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

First you need to import the components

const { InspectorControls } = wp.editor;
const { PanelBody } = wpponents;

and then inside the edit function you need to place the InspectorControls like this -

<InspectorControls>

   <PanelBody title={ __( 'Settings One' ) }>
   </PanelBody>

   <PanelBody title={ __( 'Settings Two' ) }>
   </PanelBody>

   <PanelBody title={ __( 'Settings Three' ) >
   </PanelBody>

</InspectorControls>

And you have three setting panel. Here's another example -

 isSelected && (
            <InspectorControls key= { 'inspector' } >
                    <PanelBody>
                    <RangeControl 
                        label= { __('Title Size', 'tar') }
                        value= { textSize }
                        min= '25'
                        max= '50'
                        onChange={ (set) => setAttributes({ textSize : set }) }
                    />

                    <PanelColorSettings 
                        title={ __('Title Color', 'tar') }
                        colorSettings= { [ 
                            {
                            value: textColor,
                            onChange: (colorValue) => setAttributes ( { textColor: colorValue } ),
                            label: __('Color', 'tar'),
                            },
                         ] }
                    />

                    <PanelColorSettings 
                        title={ __('Background Color', 'tar') }
                        colorSettings= { [ 
                            {
                            value: bgColor,
                            onChange: (colorValue) => setAttributes ( { bgColor: colorValue } ),
                            label: __('Color', 'tar'),
                            },
                         ] }
                    />

                </PanelBody>
            </InspectorControls>
         ),

Noticed the isSelected props? This means the block sidebar settings will shown ONLY when you click on the block. I hope this helps.