How to Add a Custom Inspector Sidebar in WordPress Gutenberg

There are a variety of built-in UI patterns. To help generate the editor preview to ease block modification and guarantee a uniform experience for users. The wp.editor global provides a few more popular components to render editing interfaces, similar to the RichText component. We’ll look at how to add a custom sidebar to the Inspector (right sidebar) in WordPress Gutenberg in this article. Inside, we’ll add a field that’s link to a post’s metadata. Everything is done in Javascript inside the Gutenberg editor, and it’s an alternative to the standard method of adding meta boxes.

Settings Custom Inspector Sidebar

Custom Inspector Sidebar img-1

The Settings Sidebar is use to display settings that aren’t use very often or that take up a lot of screen space. Only block-level settings should be use in the Settings Sidebar.

Do not put options in the Settings Sidebar that impact just chosen material inside a block (for example, the “bold” setting for selected text within a paragraph). Because the Settings Sidebar is visible even while editing a block in HTML mode, it should only show block-level options.

When we select a block, the Block Tab replaces the Document Tab.

If you include an InspectorControls element in the return result of your block type’s edit function. Those controls will appear in the Settings Sidebar section, similar to rendering a toolbar.

The example below adds two colour palettes to the sidebar, one for text colour and the other for background colour.

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { TextControl } from '@wordpress/components';
 
import {
    useBlockProps,
    ColorPalette,
    InspectorControls,
} from '@wordpress/block-editor';
 
registerBlockType( 'softhunt/inspector-example', {

    apiVersion: 2,
    attributes: {
        message: {
            type: 'string',
            source: 'text',
            selector: 'div',
            default: '', // empty default
        },
        bg_color: { type: 'string', default: '#000000' },
        text_color: { type: 'string', default: '#ffffff' },
    },
    edit: ( { attributes, setAttributes } ) => {
        const onChangeBGColor = ( hexColor ) => {
            setAttributes( { bg_color: hexColor } );
        };
 
        const onChangeTextColor = ( hexColor ) => {
            setAttributes( { text_color: hexColor } );
        };
 
        return (
            <div { ...useBlockProps() }>
                <InspectorControls key="setting">
                    <div id="softhunt-inspector-controls">
                        <fieldset>
                            <legend className="blocks-base-control__label">
                                { __( 'Background color', 'softhunt' ) }
                            </legend>
                            <ColorPalette // Element Tag for Gutenberg standard                                                       colour selector
                                onChange={ onChangeBGColor } // onChange event callback
                            />
                        </fieldset>
                        <fieldset>
                            <legend className="blocks-base-control__label">
                                { __( 'Text color', 'softhunt' ) }
                            </legend>
                            <ColorPalette // Element Tag for Gutenberg standard colour selector
                                onChange={ onChangeTextColor } // onChange event callback
                            />
                        </fieldset>
                    </div>
                </InspectorControls>
                <TextControl
                    value={ attributes.message }
                    onChange={ ( val ) => setAttributes( { message: val } ) }
                    style={ {
                        backgroundColor: attributes.bg_color,
                        color: attributes.text_color,
                    } }
                />
            </div>
        );
    },
    save: ( { attributes } ) => {
        return (
            <div
                { ...useBlockProps.save() }
                style={ {
                    backgroundColor: attributes.bg_color,
                    color: attributes.text_color,
                } }
            >
                { attributes.message }
            </div>
        );
    },
} );

If you are not aware of how to create a block from scratch with a complete plugin setting. Then visit the sites by clicking on the links. These are suggested articles so why are waiting? Click the links.

That’s all for this article if you have any confusion contact us through our website or email us at [email protected] or by using LinkedIn.

Leave a Comment