Gutenberg passing block attributes to component in ES6/ESNext

Question

I saw many examples on how to pass props from a block component to another component but they all use ES5 syntax.

In ES6 the edit function when registering a block looks like this:

edit( { attributes, className, setAttributes } ) {
   const { title, url, image, content } = attributes;

   ...etc

I want to pass the attributes and setAttributes to a component. Would this syntax be correct?

<MyComponent { ...{setAttributes, ...attributes } } />

Then in my component would I access them like so: ?

class MyComponent extends Component {
    constructor( props ) {
        super( ...arguments )
    }
    render() {
       const { title, url, image, content } = this.props.attributes;
       const { setAttributes } = this.props;

       ...etc

There are many ways to do it and not sure which is recommended.

Answer 1

This is a react related issue, so I suggest you take a look at Components and Props.

In this case the edit function passes an argument, which is an object, and we can call props:

registerBlockType("my-plugin/my-block", {
    //...
    edit: props => {
        return <MyComponent {...props} />;
    }
});

This way of spreading would be the same as:

<MyComponent attributes={props.attributes} setAttributes={props.setAttributes} />

with all the properties the props object has.

Then inside your component you may access the properties as you are doing in the question:

class MyComponent extends Component {
    render() {
        const { attributes, setAttributes } = this.props;
        const { title, url, image, content } = attributes;


    //...etc

Note:

After playing around with blocks and filters I came to the conclusion that it is better to leave the root element of both edit and save functions with an html element rather than a component (and then add the components inside it). This is because Gutenberg changes this root element through filters (for example it adds the necessary classes, as the block name, and allows filters to pass attributes to it), and if you are using your own component you would have to do this by yourself. You can check the columns block to see the differences in the edit and save functions.

registerBlockType("my-plugin/my-block", {
    //...
    edit: props => {
        return (
            <div className={props.className}>
                <MyComponent {...props} />
            </div>
        );
    },
    save: props => {
        return (
            <div>
                <MyComponent {...props} />
            </div>
        );
    },
});