Passing multiple attributes objects

[gregbia]

I'm loading my inspector controls into a block using separate components. One component named text-inspector contains inspector controls for text and another component named social-inspector contains inspector controls for social icons.

I'm using components for inspector controls because I want to re-use them in other blocks. It makes more sense to make them modular. Below is my attempt which does not work...

In my block index.js:

const textAttributes = {
	heading: {
		type: 'string',
	},
       description: {
		type: 'string',
	},
};

const socialAttributes = {
	twitter: {
		type: 'string',
	},
       facebook: {
		type: 'string',
	},
      youtube: {
		type: 'string',
      },
};

registerBlockType( name, {
	
	title: __( 'My Block' ),

	attributes: textAttributes,

        /* How to also add social attributes? */

        edit( { attributes, socialAttributes, setAttributes, className } ) {
		
	   const { heading, description } = attributes;	
	   const { twitter, facebook, youtube } = socialAttributes; /* this doesn't work */

            return (
	      <Fragment>
		  <TextInspector { ...{ attributes, setAttributes } } />
                  <SocialInspector { ...{ socialAttributes, setAttributes } } />
              </Fragment>
            );
          },

         ... etc

});

The text-inspector component (this is a simplified example. I know that it's better to use the richtext component for adding text to blocks):

export default class TextInspector extends Component {
	render() {	
		const { attributes: { heading, description }, setAttributes } = this.props;
		
	        return (
			<InspectorControls>
				<PanelBody title={ __( 'Text Settings' ) } initialOpen={ false }>
					<TextControl
                                             label={ __( 'Heading' ) }
                                             value={ heading }
                                             onChange={ ( value ) => setAttributes( { heading: value } ) }
                                          />
                                         
                                         <TextControl
                                             label={ __( 'Description' ) }
                                             value={ description }
                                             onChange={ ( value ) => setAttributes( { description: value } ) }
                                          />
				</PanelBody>
			</InspectorControls>
	  )
	}
}

The social-inspector component:

export default class SocialInspector extends Component {
	render() {	
		const { attributes: { twitter, facebook, youtube }, setAttributes } = this.props;
		
	        return (
			<InspectorControls>
				<PanelBody title={ __( 'Social Icons' ) } initialOpen={ false }>
					<TextControl
                                             label={ __( 'Twitter' ) }
                                             value={ twitter }
                                             onChange={ ( value ) => setAttributes( { twitter: value } ) }
                                          />
                                         
                                         <TextControl
                                             label={ __( 'Facebook' ) }
                                             value={ facebook }
                                             onChange={ ( value ) => setAttributes( { facebook: value } ) }
                                          />

                                        <TextControl
                                             label={ __( 'YouTube' ) }
                                             value={ youtube }
                                             onChange={ ( value ) => setAttributes( { youtube: value } ) }
                                          />

				</PanelBody>
			</InspectorControls>
	  )
	}
}

[youknowriad]

Did you figure this out?

I think you have an error here:

const { heading, description } = attributes;	
const { twitter, facebook, youtube } = socialAttributes;

It should be something like

const { heading, description,  twitter, facebook, youtube } = attributes;	
const socialAttributes =  { twitter, facebook, youtube };
const textAttributes =  { heading, description };

and the block attributes should contain all the attributes

attributes: {
   ...textAttributes,
   ...socialAttributes,
},

Good luck