feat: interating on rendering blocks on Gutenberg

10up · Oct 31, 2024 · 5752792 · 5752792
1 parent a3e72f2
commit 5752792
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/packages/block-primitives/src/block-editor/block.tsx b/packages/block-primitives/src/block-editor/block.tsx
@@ -1,6 +1,7 @@
-import { ReactNode, createContext, useContext, useMemo } from 'react';
+import React, { ReactNode, createContext, isValidElement, useContext, useMemo } from 'react';
+import { UniversalBlock } from '#shared/types.js';
 
-const BlockPrimitiveContext = createContext<BlockProps>({
+const BlockPrimitiveContext = createContext<UniversalBlockProviderProps>({
 	attributes: {},
 	setAttributes: () => {
 		throw new Error(
@@ -9,7 +10,7 @@ const BlockPrimitiveContext = createContext<BlockProps>({
 	},
 });
 
-type BlockProps = {
+type UniversalBlockProviderProps = {
 	attributes: Record<string, any>;
 	setAttributes: (attributes: Record<string, any>) => void;
 };
@@ -20,12 +21,28 @@ export function useBlockPrimitiveProps() {
 	return props;
 }
 
-const Block = ({ attributes, setAttributes, children }: BlockProps & { children: ReactNode }) => {
+const UniversalBlockProvider = ({
+	attributes,
+	setAttributes,
+	children,
+}: UniversalBlockProviderProps & { children: ReactNode }) => {
 	const value = useMemo(() => ({ setAttributes, attributes }), [attributes, setAttributes]);
+	const blocks: ReactNode[] = React.Children.toArray(children);
 
 	return (
-		<BlockPrimitiveContext.Provider value={value}>{children}</BlockPrimitiveContext.Provider>
+		<BlockPrimitiveContext.Provider value={value}>
+			{blocks.map((block) => {
+				if (isValidElement<UniversalBlock>(block)) {
+					return React.cloneElement(block, {
+						...block.props,
+						attributes,
+					});
+				}
+
+				return block;
+			})}
+		</BlockPrimitiveContext.Provider>
 	);
 };
 
-export default Block;
+export default UniversalBlockProvider;
diff --git a/packages/block-primitives/src/shared/types.ts b/packages/block-primitives/src/shared/types.ts
@@ -134,7 +134,7 @@ export interface InnerBlocksProps extends InnerBlocks.Props {
 	className?: string;
 }
 
-export interface UniversalBlock<T extends Record<string, unknown>> {
+export interface UniversalBlock<T extends Record<string, unknown> = Record<string, unknown>> {
 	children?: React.ReactNode;
 	attributes: {
 		[k in keyof T]: T[k];

diff --git a/wp/10up-theme/includes/blocks/example-block/edit.js b/wp/10up-theme/includes/blocks/example-block/edit.js
@@ -3,7 +3,7 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 
-import Block from '@headstartwp/block-primitives/block';
+import UniversalBlockProvider from '@headstartwp/block-primitives/block';
 import { Hero } from '@headstartwp/component-library/hero';
 
 /**
@@ -24,9 +24,9 @@ const ExampleBlockEdit = (props) => {
 
 	return (
 		<div {...blockProps}>
-			<Block attributes={attributes} setAttributes={setAttributes}>
-				<Hero attributes={attributes} />
-			</Block>
+			<UniversalBlockProvider attributes={attributes} setAttributes={setAttributes}>
+				<Hero />
+			</UniversalBlockProvider>
 		</div>
 	);
 };