Extending Gutenberg group block: properly combining multiple attributes

Question

I’m extending the group block. I’ve added multiple attributes, but I don’t really know how to combine them properly. Could you please help me?

/**
 * Create HOC to add group control to inspector controls of block.
 */
const withGroupControl = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        // Do nothing if it's another block than our defined ones.
        if ( ! enableGroupControlOnBlocks.includes( props.name ) ) {
            return (
                <BlockEdit { ...props } />
            );
        }

        const { width } = props.attributes;
        const { color } = props.attributes;
        const { highlight } = props.attributes;
        
        const combo = width + ' ' + color + ' ' + highlight;
        
        if ( combo ) {
        props.attributes.className = `${ combo }`;
        }

        return (
            <Fragment>
                <BlockEdit { ...props } />
                <InspectorControls>
                    <PanelBody
                        title={ 'Functions' }
                        initialOpen={ true }
                    >
                        <SelectControl
                            label={ 'Width settings' }
                            value={ width }
                            options={ groupWidthControlOptions }
                            onChange={ ( selectedWidthOption ) => {
                                props.setAttributes( {
                                    width: selectedWidthOption,
                                } );
                            } }
                        />
                        <SelectControl
                            label={ 'Color settings' }
                            value={ color }
                            options={ groupColorControlOptions }
                            onChange={ ( selectedColorOption ) => {
                                props.setAttributes( {
                                    color: selectedColorOption,
                                } );
                            } }
                        />
                        <SelectControl
                            label={ 'Highlight settings' }
                            value={ highlight }
                            options={ groupHighlightControlOptions }
                            onChange={ ( selectedHighlightOption ) => {
                                props.setAttributes( {
                                    highlight: selectedHighlightOption,
                                } );
                            } }
                        />
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );



    };
}, 'withGroupControl' );

addFilter( 'editor.BlockEdit', 'ww-group/with-group-control', withGroupControl );
0
jsjqueryreact 2 years 2020-09-02T04:10:30-05:00 0 Answers 45 views 0

Leave an answer

Browse
Browse