Two Gutenberg components sharing the same Panel Body in Inspector Controls

You have two options:

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
);

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.

Related Posts: