javascript - Gutenberg passing block attributes to component in ES6ESNext

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.

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.

• javascript
• block-editor

Share Improve this question asked Jan 4, 2019 at 16:07 at least three charactersat least three characters 3371212 silver badges2828 bronze badges 1

• It is not related – at least three characters Commented Jan 4, 2019 at 18:02

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

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