UNPKG

@wordpress/block-editor

Version:
57 lines (36 loc) 2.64 kB
# Block Context 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. ## Usage 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. ## Props `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. ### `value` - Type: `Record<string,*>` - Required: Yes Context value to merge with current value. ### `children` - Type: `ReactNode` - Required: Yes Component children.