Skip to content

SettingTabsControl Component

Josh_soporte edited this page Jul 15, 2020 · 2 revisions

Include tabs on Inspector Control for the Block.

Files path

'/src/components/setting-tabs-control'

Usage

Renders SettingTabsControl on Inspector Control:

const { __ } = wp.i18n;
const { InspectorControls } = wp.blockEditor;
const { registerBlockType } = wp.blocks;

#Component
import MarginPaddingControl from '../components/margin-padding-control/';

registerBlockType( 'maxi-blocks/example-block', {
    title: __('Example block', 'maxi-blocks'),
    icon: icon,
    category: 'maxi-blocks',
    edit: (props) => {
        return (
            <InspectorControls>
                <SettingTabsControl
                    items={[
                        {
                            label: __('Some label for the tab', 'maxi-blocks'),
                            className: 'some-class',
                            content: (
                                <SomeComponent />
                            )
                        }
                    ]}
                />
            </InspectorControls>
        )
    }
    save: () => {
        return null;
    }
} );

Props

Name Type Default Required Description
items array none Y Array with an object for every tab the component should create. It contains: label and content.
className string maxi-settingstab-control N Retrieve a class for the component
disablePadding boolean false N Make the interior of the tab content has no padding
Clone this wiki locally