2

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!

4

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
    })
);
  • Thanks for the info. Any idea on how to do this with pure JS? – user382738 Jan 29 at 12:57
  • @user382738 updated my answer with JS example. – obiPlabon Jan 29 at 14:13
3

First you need to import the components

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

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.

  • Thanks for the info. Any idea on how to do this with pure JS? – user382738 Jan 29 at 12:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.