Wordpress custom blocks: Pass down attributes to child blocks

Suppose you are working on a set of interacting custom blocks in Wordpress. You have a child block that needs information from the parent block to display, in this situation, information about a specific record. In such a case you want to use Block context .

Block context is a feature which enables ancestor blocks to provide values which can be consumed by descendent blocks within its own hierarchy.

Wordpress

Let’s get to work

In your parent block, map the attribute you want to use in your child block using providesContext. So if you would like to map the recordId property, your parent block configuration would look like this:

registerBlockType('my-plugin/parent-block', {
  // ...

  attributes: {
    recordId: {
      type: 'number',
    },
  },
 
  providesContext: {
    'my-plugin/recordId': 'recordId',
  },

  // ...
}

The child block can then “consume” the context by adding the following useContext line to your child block configuration:

registerBlockType('my-plugin/child-block', {
  // ...

  usesContext: \['my-plugin/recordId'\],

  // ...
}

In your child block’s edit and save methods, you can then access the context like this:

registerBlockType('my-plugin/child-block', {
  // ...

  edit(props) {
    const { context } = props;
    const { "my-plugin/recordId": recordId } = context;

    return (
      <p>{ recordId }</p>
    );
  },

  save(props) {
    const { context } = props;
    const { "my-plugin/recordId": recordId } = context;

    return (
      <p>{ recordId }</p>
    );
  }

  // ...
}