fix: forwardBlockAttributes vs blockAttributes (#849)

.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

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.',
 		);

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,
 						);

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,