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.
Share Improve this question asked Jan 4, 2019 at 16:07 at least three charactersat least three characters 33712 silver badges28 bronze badges 1- It is not related – at least three characters Commented Jan 4, 2019 at 18:02
1 Answer
Reset to default 3This 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>
);
},
});