I've got a custom Gutenberg block that is using two custom components. Each of the components has a toggle in the Inspector Controls panel. This is just a simplified scenario, in reality, there will be more than just two components.

// My GB block
import PreTitle from '../components/PreTitle';
import Title from '../components/Title';

const { registerBlockType } = wp.blocks;

const blockConfig = {
    title: 'My Block',
    category: 'my-blocks',
    attributes: {
        // Some attributes
    },

    edit: ( props ) => {
        return (
            <div className={`controls`}>
                <PreTitle { ...props } />
                <Title { ...props } />
            </div>
        );
    },
    save: ({attributes: { preTitleContent, TitleContent }}) => {

        return(
            <div className={`controls`}>
                <PreTitle.Content { ...props } />
                <Title.Content { ...props } />
            </div>
        );
    }
};

export const headings = registerBlockType(
    `cv-wp-lib-gutenberg-blocks/headings`,
    blockConfig
);

My Title component:

const Title = ( props ) => {
    // ... some code
    return (
        <>
            <InspectorControls>
                <PanelBody>
                    <ToggleControl
                        label={ __(`Toggle title`, `cv-wp-lib-gutenberg-blocks`) }
                        checked={ showTitle }
                        onChange={ onChangeToggleField }
                    />
                </PanelBody>
            </InspectorControls>

            // ... some JSX
        </>
    );
};

My PreTitle component:

const PreTitle = ( props ) => {
    // ... some code
    return (
        <>
            <InspectorControls>
                <PanelBody>
                    <ToggleControl
                        label={ __(`Toggle preTitle`, `cv-wp-lib-gutenberg-blocks`) }
                        checked={ showPreTitle }
                        onChange={ onChangeToggleField }
                    />
                </PanelBody>
            </InspectorControls>

            // ... some JSX
        </>
    );
};

Question: Is there a way for the components sharing the same panel?

I've got a custom Gutenberg block that is using two custom components. Each of the components has a toggle in the Inspector Controls panel. This is just a simplified scenario, in reality, there will be more than just two components.

// My GB block
import PreTitle from '../components/PreTitle';
import Title from '../components/Title';

const { registerBlockType } = wp.blocks;

const blockConfig = {
    title: 'My Block',
    category: 'my-blocks',
    attributes: {
        // Some attributes
    },

    edit: ( props ) => {
        return (
            <div className={`controls`}>
                <PreTitle { ...props } />
                <Title { ...props } />
            </div>
        );
    },
    save: ({attributes: { preTitleContent, TitleContent }}) => {

        return(
            <div className={`controls`}>
                <PreTitle.Content { ...props } />
                <Title.Content { ...props } />
            </div>
        );
    }
};

export const headings = registerBlockType(
    `cv-wp-lib-gutenberg-blocks/headings`,
    blockConfig
);

My Title component:

const Title = ( props ) => {
    // ... some code
    return (
        <>
            <InspectorControls>
                <PanelBody>
                    <ToggleControl
                        label={ __(`Toggle title`, `cv-wp-lib-gutenberg-blocks`) }
                        checked={ showTitle }
                        onChange={ onChangeToggleField }
                    />
                </PanelBody>
            </InspectorControls>

            // ... some JSX
        </>
    );
};

My PreTitle component:

const PreTitle = ( props ) => {
    // ... some code
    return (
        <>
            <InspectorControls>
                <PanelBody>
                    <ToggleControl
                        label={ __(`Toggle preTitle`, `cv-wp-lib-gutenberg-blocks`) }
                        checked={ showPreTitle }
                        onChange={ onChangeToggleField }
                    />
                </PanelBody>
            </InspectorControls>

            // ... some JSX
        </>
    );
};

Question: Is there a way for the components sharing the same panel?

• block-editor

Share Improve this question asked Jun 25, 2020 at 12:44 crs1138crs1138 29111 gold badge22 silver badges1111 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You have two options:

1. You write only one InspectorControls and put it in your main component/block and remove the InpertorControls from your Title and PreTitle js files. Don't forget to change the onChange function name 'onChangeToggleField' cause they both share the same function name. Whatever props you change now, should be now passed to Title and PreTitle

// My GB block
import PreTitle from '../components/PreTitle';
import Title from '../components/Title';

const { registerBlockType } = wp.blocks;

const blockConfig = {
    title: 'My Block',
    category: 'my-blocks',
    attributes: {
        // Some attributes
    },

    edit: ( props ) => {
        return (
           <>
            <InspectorControls>
                <PanelBody>
                    <ToggleControl
                        label={ __(`Toggle title`, `cv-wp-lib-gutenberg-blocks`) }
                        checked={ showTitle }
                        onChange={ onChangeToggleFieldTitle }
                    />
                    <ToggleControl
                        label={ __(`Toggle preTitle`, `cv-wp-lib-gutenberg- 
                          blocks`) }
                        checked={ showPreTitle }
                        onChange={ onChangeToggleFieldPreTitle }
                    />
                </PanelBody>
            </InspectorControls>
            <div className={`controls`}>
                <PreTitle { ...props } />
                <Title { ...props } />
            </div>
           </>
        );
    },
    save: ({attributes: { preTitleContent, TitleContent }}) => {

        return(
            <div className={`controls`}>
                <PreTitle.Content { ...props } />
                <Title.Content { ...props } />
            </div>
        );
    }
};

export const headings = registerBlockType(
    `cv-wp-lib-gutenberg-blocks/headings`,
    blockConfig
);

2. You write an extra component (for example MyGbBlockInspector.js and import it in your block.

// My GB block
import PreTitle from '../components/PreTitle';
import Title from '../components/Title';
import MyGbBlockInspector from '../components/MyGbBlockInspector';

I prefer option 2, although the problem is, that Title and PreTitle are now not global anymore and can't be simply used in other Blocks without rewriting their InspectorControls functions.