@wordpress/block-editor
Version:
57 lines (36 loc) • 2.64 kB
Markdown
Block Context is a React implementation of WordPress's block context. Block context, much like [React's context](https://react.dev/learn/passing-data-deeply-with-context), is a method for passing and inheriting values deeply through a hierarchy of blocks. Because of the similarities with React's context, the client-side implementation here is quite minimal. It is complemented by equivalent behaviors in the server-side rendering of a block.
Note that the implementation of Block Context is distinct from [the `BlockEdit` context](../block-edit). While it is true that both provide context relevant for the editing of a block, Block Context is implemented separately so as to prioritize it as most identifiable amongst the machinery of block context, and not amongst other client-side editing context of a block.
Currently, only the [Provider component](https://react.dev/reference/react/createContext#provider) is made available on the public interface of the `@wordpress/block-editor` module. This can be used to add or override context which can then be consumed by blocks rendered within that context in the block editor.
```js
import { BlockContextProvider } from '@wordpress/block-editor';
function MyCustomPostEditor() {
return (
<BlockContextProvider value={ { postId: 1, postType: 'post' } }>
<BlockEditorProvider { /* ... */ } />
</BlockContextProvider>
);
}
```
Internal to the `@wordpress/block-editor` module, a component can access the [full Context object](https://react.dev/reference/react/createContext), typically for use in combination with [`useContext`](https://react.dev/reference/react/useContext).
```js
import { useContext } from 'react';
// Only available internally within `@wordpress/block-editor`!
import BlockContext from '../block-context';
function MyBlockComponent() {
const { postId } = useContext( BlockContext );
return 'The current post ID is: ' + postId;
}
```
The reason `BlockContext` is only internally available within the `@wordpress/block-editor` module is to reinforce the expectation that external consumption of values from block context should be declared on the block registration using the `context` property.
`BlockContextProvider` behaves like a standard [`Context.Provider` component](https://react.dev/reference/react/createContext#provider). It receives `value` and `children` props. The `value` is merged with the current block context value.
- Type: `Record<string,*>`
- Required: Yes
Context value to merge with current value.
- Type: `ReactNode`
- Required: Yes
Component children.