Controls

WordPress add various controls to use inside the block editor. We use some of them in our Blocks.

InspectorControls

import { InspectorControls } from '@wordpress/block-editor';

<InspectorControls>{/* Your controls go here */}</InspectorControls>

PanelBody

import { PanelBody } from '@wordpress/components';

<InspectorControls>
    <PanelBody title="Slider Settings" initialOpen={true}>
        {/* Your controls go here */}
    </PanelBody>
</InspectorControls>

PanelRow

import { PanelRow } from '@wordpress/components';

<InspectorControls>
    <PanelBody title="Slider Settings" initialOpen={true}>
        <PanelRow>{/* Your controls go here */}</PanelRow>
    </PanelBody>
</InspectorControls>

ToggleControl

import { ToggleControl } from '@wordpress/components';

<ToggleControl
    label="Show Title"
    checked={attributes.showTitle}
    onChange={(value) => setAttributes({ showTitle: value })}
/>

SelectControl

import { SelectControl } from '@wordpress/components';

<SelectControl
    label="Effect"
    value={attributes.effect}
    options={[
        { value: 'slide', label: 'Slide' },
        { value: 'fade', label: 'Fade' },
    ]}
    onChange={(effect) => setAttributes({ effect })}
/>

RangeControl

import { RangeControl } from '@wordpress/components';

<RangeControl
    label="Columns"
    value={attributes.columns}
    onChange={(columns) => setAttributes({ columns })}
    min={1}
    max={6}
/>

TextControl

import { TextControl } from '@wordpress/components';

<TextControl
    label="Autoplay Speed"
    value={attributes.autoplaySpeed}
    onChange={(autoplaySpeed) =>
        setAttributes({
            autoplaySpeed: parseInt(autoplaySpeed, 10) || 0,
        })
    }
/>

ColorPalette

import { ColorPalette } from '@wordpress/block-editor';

<ColorPalette
    colors={[
        { name: 'red', color: '#f00' },
        { name: 'green', color: '#0f0' },
        { name: 'blue', color: '#00f' },
    ]}
    value={attributes.textColor}
    onChange={(textColor) => setAttributes({ textColor })}
/>

Example

Here is an example of a complete InspectorControls setup using some of the controls mentioned above:

<InspectorControls>
    <PanelBody title="Slider Settings" initialOpen={true}>
        <PanelRow>
            <ToggleControl
                label="Show Title"
                checked={attributes.showTitle}
                onChange={(value) => setAttributes({ showTitle: value })}
            />
        </PanelRow>
        <PanelRow>
            <SelectControl
                label="Effect"
                value={attributes.effect}
                options={[
                    { value: 'slide', label: 'Slide' },
                    { value: 'fade', label: 'Fade' },
                ]}
                onChange={(effect) => setAttributes({ effect })}
            />
        </PanelRow>
        <PanelRow>
            <RangeControl
                label="Columns"
                value={attributes.columns}
                onChange={(columns) => setAttributes({ columns })}
                min={1}
                max={6}
            />
        </PanelRow>
        <PanelRow>
            <TextControl
                label="Autoplay Speed"
                value={attributes.autoplaySpeed}
                onChange={(autoplaySpeed) =>
                    setAttributes({
                        autoplaySpeed: parseInt(autoplaySpeed, 10) || 0,
                    })
                }
            />
        </PanelRow>
        <PanelRow>
            <ColorPalette
                colors={[
                    { name: 'red', color: '#f00' },
                    { name: 'green', color: '#0f0' },
                    { name: 'blue', color: '#00f' },
                ]}
                value={attributes.textColor}
                onChange={(textColor) => setAttributes({ textColor })}
            />
        </PanelRow>
    </PanelBody>
</InspectorControls>

Now a full Component could look like this:

import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import {
    PanelBody,
    PanelRow,
    ToggleControl,
    SelectControl,
    RangeControl,
    TextControl,
} from '@wordpress/components';
import { ColorPalette } from '@wordpress/block-editor';

registerBlockType('basetheme/example', {
    title: 'Example',
    icon: 'smiley',
    category: 'widgets',
    attributes: {
        showTitle: { type: 'boolean', default: true },
        effect: { type: 'string', default: 'slide' },
        columns: { type: 'number', default: 3 },
        autoplaySpeed: { type: 'number', default: 3000 },
        textColor: { type: 'string', default: '#000000' },
    },
    edit: EditComponent,
    save: () => null,
});

function EditComponent(props) {
    const { attributes, setAttributes } = props;

    return (
        <>
            <InspectorControls>
                <PanelBody title="Slider Settings" initialOpen={true}>
                    <PanelRow>
                        <ToggleControl
                            label="Show Title"
                            checked={attributes.showTitle}
                            onChange={(value) =>
                                setAttributes({ showTitle: value })
                            }
                        />
                    </PanelRow>
                    <PanelRow>
                        <SelectControl
                            label="Effect"
                            value={attributes.effect}
                            options={[
                                { value: 'slide', label: 'Slide' },
                                { value: 'fade', label: 'Fade' },
                            ]}
                            onChange={(effect) => setAttributes({ effect })}
                        />
                    </PanelRow>
                    <PanelRow>
                        <RangeControl
                            label="Columns"
                            value={attributes.columns}
                            onChange={(columns) => setAttributes({ columns })}
                            min={1}
                            max={6}
                        />
                    </PanelRow>
                    <PanelRow>
                        <TextControl
                            label="Autoplay Speed"
                            value={attributes.autoplaySpeed}
                            onChange={(autoplaySpeed) =>
                                setAttributes({
                                    autoplaySpeed:
                                        parseInt(autoplaySpeed, 10) || 0,
                                })
                            }
                        />
                    </PanelRow>
                    <PanelRow>
                        <ColorPalette
                            colors={[
                                { name: 'red', color: '#f00' },
                                { name: 'green', color: '#0f0' },
                                { name: 'blue', color: '#00f' },
                            ]}
                            value={attributes.textColor}
                            onChange={(textColor) =>
                                setAttributes({ textColor })
                            }
                        />
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
            <div>
                {attributes.showTitle && (
                    <h2 style={{ color: attributes.textColor }}>
                        Example Block
                    </h2>
                )}
                <p>Effect: {attributes.effect}</p>
                <p>Columns: {attributes.columns}</p>
                <p>Autoplay Speed: {attributes.autoplaySpeed} ms</p>
            </div>
        </>
    );
}

Caution

To work with the InspectorControls and Components we must wrapped all inside a React Fragment <> ... </>.