1

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.

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>
        );
    },
});
  • Thank you for the info! How do you mean leave the root element with a html element? – at least three characters Jan 4 at 18:04
  • No problem :) I mean to leave a div in the root. I might be wrong though, but after trying to modify the block contents with deprecations and match the html attributes of the root element I figure out it was less hassle to leave a div, I'll update the answer. – Alvaro Jan 4 at 18:13
  • Oh i see! Yes I leave both the edit and save within the registerBlockType function. It seems like that is done in the official Gutenberg blocks as well. – at least three characters Jan 4 at 18:23
  • Otherwise they do it like this github.com/WordPress/gutenberg/tree/master/packages/… – at least three characters Jan 4 at 18:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.