diff --git a/packages/core/src/react/components/BaseBlocksRenderer.tsx b/packages/core/src/react/components/BaseBlocksRenderer.tsx index 90869703a..2561cd1b3 100644 --- a/packages/core/src/react/components/BaseBlocksRenderer.tsx +++ b/packages/core/src/react/components/BaseBlocksRenderer.tsx @@ -14,7 +14,10 @@ const { default: parse, domToReact } = HtmlReactParser; /** * The interface any children of {@link BlocksRenderer} must implement. */ -export interface BlockProps { +export interface BlockProps< + BlockAttributes extends IDataWPBlock = IDataWPBlock, + Context extends Record = Record, +> { /** * A test function receives a domNode and returns a boolean value indicating * whether that domNode should be replaced with the React component @@ -64,6 +67,11 @@ export interface BlockProps * The style tag of the domNode as an object. */ style?: Record; + + /** + * An optional context that is passed to all children components + */ + context?: Context; } /** @@ -121,6 +129,11 @@ export interface BlockRendererProps { * Whether to forward the block attributes to the children components. */ forwardBlockAttributes?: boolean; + + /** + * An optional context that is passed to all children components + */ + context?: Record; } interface BaseBlockRendererProps extends BlockRendererProps { @@ -153,6 +166,7 @@ export function BaseBlocksRenderer({ children, settings, forwardBlockAttributes = false, + context, }: BaseBlockRendererProps) { const blocks: ReactNode[] = React.Children.toArray(children); @@ -216,6 +230,10 @@ export function BaseBlocksRenderer({ blockProps.block = { attributes, name, className }; } + if (context) { + blockProps.context = context; + } + component = React.createElement( block.type, blockProps, diff --git a/packages/core/src/react/components/__tests__/BlocksRenderer.tsx b/packages/core/src/react/components/__tests__/BlocksRenderer.tsx index 6644830ff..f401b2037 100644 --- a/packages/core/src/react/components/__tests__/BlocksRenderer.tsx +++ b/packages/core/src/react/components/__tests__/BlocksRenderer.tsx @@ -239,4 +239,29 @@ describe('BlocksRenderer', () => { expect(container).toMatchSnapshot(); }); + + it('forward context to the component', () => { + const DivToP = ({ + block, + context, + }: BlockProps<{ blockAttribute: string }, { contextProp: string }>) => { + return ( +

+ {JSON.stringify(block)} - {JSON.stringify(context)} +

+ ); + }; + + const { container } = render( + `} + forwardBlockAttributes + context={{ contextProp: 'this is a context prop' }} + > + isBlockByName(node, '10up/custom-block')} /> + , + ); + + expect(container).toMatchSnapshot(); + }); }); diff --git a/packages/core/src/react/components/__tests__/__snapshots__/BlocksRenderer.tsx.snap b/packages/core/src/react/components/__tests__/__snapshots__/BlocksRenderer.tsx.snap index 3e028f801..ea45e262a 100644 --- a/packages/core/src/react/components/__tests__/__snapshots__/BlocksRenderer.tsx.snap +++ b/packages/core/src/react/components/__tests__/__snapshots__/BlocksRenderer.tsx.snap @@ -10,6 +10,18 @@ exports[`BlocksRenderer forward blockProps to the component 1`] = ` `; +exports[`BlocksRenderer forward context to the component 1`] = ` +
+

+ {"attributes":{"blockAttribute":"this is a block attribute"},"name":"10up/custom-block","className":"my-class"} + - + {"contextProp":"this is a context prop"} +

+
+`; + exports[`BlocksRenderer works correctly with chinese content 1`] = `