Inspector控件中共享同一面板主体的两个Gutenberg组件

我有一个自定义古腾堡积木，它使用两个自定义组件。每个组件在Inspector控制面板中都有一个切换。这只是一个简化的场景，实际上，将有两个以上的组件。

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

我的标题组件：

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

我的字幕组件：

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: 有没有办法让组件共享同一个面板？

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

相关推荐