From bab784be80b510c8caf27d87a47011903967a586 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=ADcholas=20Andr=C3=A9?= <nicholas.andre@10up.com>
Date: Fri, 9 Aug 2024 18:58:28 -0300
Subject: [PATCH] fix: forwardBlockAttributes vs blockAttributes

---
 .changeset/heavy-bikes-join.md                |  5 +++++
 packages/core/src/dom/parseBlockAttributes.ts | 19 +++++++++++++++----
 .../react/components/BaseBlocksRenderer.tsx   |  9 +++++++--
 .../components/__tests__/BlocksRenderer.tsx   | 17 ++++++++++++++++-
 4 files changed, 43 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/heavy-bikes-join.md

diff --git a/.changeset/heavy-bikes-join.md b/.changeset/heavy-bikes-join.md
new file mode 100644
index 000000000..016f4800e
--- /dev/null
+++ b/.changeset/heavy-bikes-join.md
@@ -0,0 +1,5 @@
+---
+"@headstartwp/core": patch
+---
+
+Fix: only run parseBlockAttribute when forwardBlockAttribute is set for nodes that represent wp blocks
diff --git a/packages/core/src/dom/parseBlockAttributes.ts b/packages/core/src/dom/parseBlockAttributes.ts
index e8e4cb75c..1ef5ce641 100644
--- a/packages/core/src/dom/parseBlockAttributes.ts
+++ b/packages/core/src/dom/parseBlockAttributes.ts
@@ -52,6 +52,20 @@ export type ParsedBlock<T extends IDataWPBlock = IDataWPBlock> = {
 	className: string;
 };
 
+/**
+ * Checks whether the node is a WordPress block
+ *
+ * @param node DomNode
+ *
+ * @returns
+ */
+export function isWordPressBlock(node: Element) {
+	return (
+		typeof node.attribs['data-wp-block-name'] !== 'undefined' &&
+		typeof node.attribs['data-wp-block'] !== 'undefined'
+	);
+}
+
 /**
  * Returns the block name and attributes
  *
@@ -64,10 +78,7 @@ export function parseBlockAttributes(node?: Element): ParsedBlock {
 		throw new FrameworkError('You are calling `parseBlockAttributes` on a undefined node');
 	}
 
-	if (
-		typeof node.attribs['data-wp-block-name'] === 'undefined' &&
-		typeof node.attribs['data-wp-block'] === 'undefined'
-	) {
+	if (!isWordPressBlock(node)) {
 		warn(
 			'[parseBlockAttributes] You are using the `parseBlockAttributes` hook in a node that is not a block.',
 		);
diff --git a/packages/core/src/react/components/BaseBlocksRenderer.tsx b/packages/core/src/react/components/BaseBlocksRenderer.tsx
index 3148f2820..6d37ab76f 100644
--- a/packages/core/src/react/components/BaseBlocksRenderer.tsx
+++ b/packages/core/src/react/components/BaseBlocksRenderer.tsx
@@ -7,7 +7,12 @@ import { HeadlessConfig } from '../../types';
 import { warn } from '../../utils';
 import { IBlockAttributes } from '../blocks/types';
 import { getInlineStyles } from '../blocks/utils';
-import { IDataWPBlock, parseBlockAttributes, ParsedBlock } from '../../dom/parseBlockAttributes';
+import {
+	IDataWPBlock,
+	isWordPressBlock,
+	parseBlockAttributes,
+	ParsedBlock,
+} from '../../dom/parseBlockAttributes';
 
 const { default: parse, domToReact } = HtmlReactParser;
 
@@ -243,7 +248,7 @@ export function BaseBlocksRenderer({
 						style: style || undefined,
 					};
 
-					if (forwardBlockAttributes) {
+					if (forwardBlockAttributes && isWordPressBlock(domNode as Element)) {
 						const { attributes, name, className } = parseBlockAttributes(
 							domNode as Element,
 						);
diff --git a/packages/core/src/react/components/__tests__/BlocksRenderer.tsx b/packages/core/src/react/components/__tests__/BlocksRenderer.tsx
index cec4388e9..3a686e0aa 100644
--- a/packages/core/src/react/components/__tests__/BlocksRenderer.tsx
+++ b/packages/core/src/react/components/__tests__/BlocksRenderer.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { DOMNode, domToReact, Element } from 'html-react-parser';
 import React, { ReactElement } from 'react';
 import { isAnchorTag, isBlockByName } from '../../../dom';
@@ -242,6 +242,21 @@ describe('BlocksRenderer', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('does not forward blockProps to the component for nodes that are not wp blocks', () => {
+		const DivToP = ({ block }: BlockProps<{ blockAttribute: string }>) => {
+			return <p data-testid="block-no-props">{JSON.stringify(block)}</p>;
+		};
+
+		render(
+			<BlocksRenderer html={`<div class="my-class""></div>`} forwardBlockAttributes>
+				<DivToP tagName="div" classList="my-class" />
+			</BlocksRenderer>,
+		);
+
+		const node = screen.getByTestId('block-no-props');
+		expect(node.textContent).toBe('');
+	});
+
 	it('forward context to the component', () => {
 		const DivToP = ({
 			block,