Context in WordPress block

Context in React allows sharing data across components without the need for manually sending props ("prop drilling") through each level of the component tree.

Block context in WordPress

In WordPress, context is used to pass data from a parent block to its child blocks. This is beneficial in scenarios where child blocks need to access some values from their parent block.

Use case example

In Sortable Block plugin for WordPress, I worked on an update to introduce a feature that detects expired entries.

The idea is to allow filtering of entries based on a set date. It is ideal for event sections to automatically hide past events, keeping the displayed content up-to-date and relevant.

In plugin, the filter date is set and saved within the parent block. However, to make the child blocks aware of this date, I used context to establish a communication link between parent and child.

Defining block context

The parent block provides the block context, defined under the providesContext field within the block’s metadata. Thus, the first step is to define the block context in the parent block:

"attributes": {
	"filterDateTime": {
		"type": "string"
	}
},
"providesContext": {
	"sortable/filterDateTime": "filterDateTime"
},

In the code snippet above, we've defined an attribute filterDateTime and under providesContext . Then, we are mapping sortable/filterDateTime to the filterDateTime attribute. This means that the filterDateTime value is now available as context to child blocks.

The term "sortable" in the context label "sortable/filterDateTime" is a namespace, and it's specific to the example provided. Namespacing is a practice to ensure that particular labels or identifiers are unique within a larger system to avoid conflicts with other similarly named items.

Consuming block context

A child block can use the context provided by the parent block. However, it must specify which context to access within the usesContext field in its metadata. Thus, the second step is to ensure the child block is aware of the parent's context:

"usesContext": [ "sortable/filterDateTime" ],

Above, the child block signals its intent to use the sortable/filterDateTime context provided by the parent block.

Using block context

In WordPress, blocks access context via props. Thus, the final step is to retrieve this context through within the child block’s component file:

const { context } = props;
const filterDateTime = context["sortable/filterDateTime"];

Above, we access the filterDateTime context value through the props.context object, which can now be used within a child block.

What’s next?

With the context value now accessible within the child blocks, you can manipulate and utilize this value for a range of applications to make blocks more interactive and responsive.

For instance, in Sortable Block, I used the context to compare dates.

If the context date is earlier than the date set in child, the child block adds a special CSS class. This class, through CSS rules, hides the block, ensuring only relevant, up-to-date content is displayed to users.

Save function

The save function in WordPress block development dictates how the various attributes of a block are merged to the final markup, which is then saved into the post content.

According to WordPress standards, the save function should purely rely on the provided attributes and avoid external data or side effects to prevent block invalidation issues.

Because of that, context cannot be used in the save function.