From 833854d88fe0eafabccf4ccae919349d04ae482f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=ADcholas=20Oliveira?= <nicholas.andre@10up.com>
Date: Mon, 5 Aug 2024 22:24:40 -0300
Subject: [PATCH] feat: introducing rsc-compatible image block

---
 package-lock.json                             | 30 ++++-----
 packages/core/src/dom/index.ts                |  1 +
 packages/core/src/dom/parseBlockAttributes.ts |  2 +
 packages/core/src/react/blocks/ImageBlock.tsx | 22 ++----
 packages/core/src/react/blocks/types.ts       |  3 -
 packages/core/src/react/index.ts              |  1 +
 .../next/src/components/ImageComponent.tsx    |  2 +-
 packages/next/src/rsc/blocks/ImageBlock.tsx   | 67 +++++++++++++++++++
 packages/next/src/rsc/blocks/LinkBlock.tsx    |  8 ++-
 packages/next/src/rsc/index.ts                |  1 +
 .../wp-nextjs-app/src/components/Blocks.tsx   |  4 +-
 11 files changed, 104 insertions(+), 37 deletions(-)
 create mode 100644 packages/next/src/rsc/blocks/ImageBlock.tsx

diff --git a/package-lock.json b/package-lock.json
index 9180eb693..35fe8e40d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20772,7 +20772,7 @@
     },
     "packages/core": {
       "name": "@headstartwp/core",
-      "version": "1.4.4",
+      "version": "1.5.0-next.0",
       "license": "MIT",
       "dependencies": {
         "@justinribeiro/lite-youtube": "^1.3.1",
@@ -20844,11 +20844,11 @@
     },
     "packages/next": {
       "name": "@headstartwp/next",
-      "version": "1.4.3",
+      "version": "1.5.0-next.0",
       "license": "MIT",
       "dependencies": {
         "@formatjs/intl-localematcher": "^0.5.4",
-        "@headstartwp/core": "^1.4.4",
+        "@headstartwp/core": "^1.5.0-next.0",
         "@isaacs/ttlcache": "^1.4.1",
         "deepmerge": "^4.3.1",
         "loader-utils": "^3.2.0",
@@ -20959,8 +20959,8 @@
       "version": "0.2.0",
       "license": "GPL-2.0-or-later",
       "dependencies": {
-        "@headstartwp/core": "^1.4.4",
-        "@headstartwp/next": "^1.4.3",
+        "@headstartwp/core": "^1.5.0-next.0",
+        "@headstartwp/next": "^1.5.0-next.0",
         "@linaria/core": "^5.0.2",
         "@linaria/react": "^5.0.3",
         "clsx": "^1.1.1",
@@ -20988,8 +20988,8 @@
       "version": "0.2.0",
       "license": "GPL-2.0-or-later",
       "dependencies": {
-        "@headstartwp/core": "^1.4.4",
-        "@headstartwp/next": "^1.4.3",
+        "@headstartwp/core": "^1.5.0-next.0",
+        "@headstartwp/next": "^1.5.0-next.0",
         "@linaria/core": "^5.0.2",
         "@linaria/react": "^5.0.3",
         "clsx": "^1.1.1",
@@ -21016,8 +21016,8 @@
       "name": "@10up/wp-multisite-nextjs-app",
       "version": "0.1.0",
       "dependencies": {
-        "@headstartwp/core": "^1.4.3",
-        "@headstartwp/next": "^1.4.2",
+        "@headstartwp/core": "^1.5.0-next.0",
+        "@headstartwp/next": "^1.5.0-next.0",
         "next": "^14.2.5",
         "react": "^18",
         "react-dom": "^18"
@@ -21060,8 +21060,8 @@
       "license": "GPL-2.0-or-later",
       "dependencies": {
         "@10up/next-redis-cache-provider": "^1.0.0",
-        "@headstartwp/core": "^1.4.4",
-        "@headstartwp/next": "^1.4.3",
+        "@headstartwp/core": "^1.5.0-next.0",
+        "@headstartwp/next": "^1.5.0-next.0",
         "@linaria/core": "^5.0.2",
         "@linaria/react": "^5.0.3",
         "clsx": "^1.1.1",
@@ -21091,8 +21091,8 @@
       "name": "@10up/wp-nextjs-app",
       "version": "0.1.0",
       "dependencies": {
-        "@headstartwp/core": "^1.4.3",
-        "@headstartwp/next": "^1.4.2",
+        "@headstartwp/core": "^1.5.0-next.0",
+        "@headstartwp/next": "^1.5.0-next.0",
         "next": "^14.2.5",
         "react": "^18",
         "react-dom": "^18"
@@ -21144,8 +21144,8 @@
       "name": "@10up/wp-polylang-nextjs-app",
       "version": "0.1.0",
       "dependencies": {
-        "@headstartwp/core": "^1.4.3",
-        "@headstartwp/next": "^1.4.2",
+        "@headstartwp/core": "^1.5.0-next.0",
+        "@headstartwp/next": "^1.5.0-next.0",
         "next": "^14.2.5",
         "react": "^18",
         "react-dom": "^18"
diff --git a/packages/core/src/dom/index.ts b/packages/core/src/dom/index.ts
index 319121ab4..d1ea99799 100644
--- a/packages/core/src/dom/index.ts
+++ b/packages/core/src/dom/index.ts
@@ -343,3 +343,4 @@ export function isBlockByName(node: DOMNode, name: string) {
 
 export * from './wpKsesPost';
 export * from './stripTags';
+export * from './parseBlockAttributes';
diff --git a/packages/core/src/dom/parseBlockAttributes.ts b/packages/core/src/dom/parseBlockAttributes.ts
index 676e0b0cd..e8e4cb75c 100644
--- a/packages/core/src/dom/parseBlockAttributes.ts
+++ b/packages/core/src/dom/parseBlockAttributes.ts
@@ -12,6 +12,8 @@ export const DEFAULT_BLOCK_ELEMENT = new Element('div', {
 	'data-wp-block-name': BLOCK_MISSING,
 });
 
+export const defaultElement = DEFAULT_BLOCK_ELEMENT;
+
 /**
  * Parses Json without throwing errors
  *
diff --git a/packages/core/src/react/blocks/ImageBlock.tsx b/packages/core/src/react/blocks/ImageBlock.tsx
index 802f5e3a8..5cc434a89 100644
--- a/packages/core/src/react/blocks/ImageBlock.tsx
+++ b/packages/core/src/react/blocks/ImageBlock.tsx
@@ -2,7 +2,7 @@
 
 import { Element } from 'html-react-parser';
 import { isBlockByName } from '../../dom';
-import { IBlock } from '../components';
+import { BlockFC, IBlock } from '../components';
 import { useBlock } from './hooks';
 import { useBlockAttributes } from './hooks/useBlockAttributes';
 import { IBlockAttributes } from './types';
@@ -19,12 +19,12 @@ export interface ImageBlockProps extends IBlockAttributes {
 
 export interface IImageBlock extends IBlock<ImageBlockProps> {}
 
-export function ImageBlock({
+export const ImageBlock: BlockFC<IBlock<ImageBlockProps>> = ({
 	domNode: node = DEFAULT_BLOCK_ELEMENT,
 	children,
 	component: Component,
 	style,
-}: IImageBlock) {
+}: IImageBlock) => {
 	const { name, className, attributes } = useBlock<ImageBlockProps>(node);
 	const blockAttributes = useBlockAttributes(node);
 
@@ -62,16 +62,8 @@ export function ImageBlock({
 			{children}
 		</Component>
 	);
-}
+};
 
-/**
- * @internal
- */
-// eslint-disable-next-line no-redeclare
-export namespace ImageBlock {
-	export const defaultProps = {
-		test: (node) => {
-			return isBlockByName(node, 'core/image');
-		},
-	};
-}
+ImageBlock.test = (node) => {
+	return isBlockByName(node, 'core/image');
+};
diff --git a/packages/core/src/react/blocks/types.ts b/packages/core/src/react/blocks/types.ts
index eb3198629..c1c6ab0b1 100644
--- a/packages/core/src/react/blocks/types.ts
+++ b/packages/core/src/react/blocks/types.ts
@@ -1,6 +1,5 @@
 import { Element } from 'html-react-parser';
 import { ReactNode } from 'react';
-import { IDataWPBlock } from '../../dom/parseBlockAttributes';
 
 export interface Colors {
 	backgroundColorSlug: string;
@@ -88,8 +87,6 @@ export interface IBlockAttributes {
 	};
 }
 
-export type { IDataWPBlock };
-
 export interface BlockAttributes extends Colors {
 	align: Align;
 	style: Partial<Style>;
diff --git a/packages/core/src/react/index.ts b/packages/core/src/react/index.ts
index e82016169..ffe7ce922 100644
--- a/packages/core/src/react/index.ts
+++ b/packages/core/src/react/index.ts
@@ -3,3 +3,4 @@ export * from './provider';
 export * from './hooks';
 export * from './blocks';
 export * from './utils';
+export * from '../dom';
diff --git a/packages/next/src/components/ImageComponent.tsx b/packages/next/src/components/ImageComponent.tsx
index 9a159b90c..95063ccfe 100644
--- a/packages/next/src/components/ImageComponent.tsx
+++ b/packages/next/src/components/ImageComponent.tsx
@@ -1,6 +1,6 @@
 import NextImageComponent from 'next/image.js';
 import type { ImageLoaderProps } from 'next/image.js';
-import { ImageBlockProps } from '@headstartwp/core/react';
+import type { ImageBlockProps } from '@headstartwp/core/react';
 
 // See error in https://github.com/vercel/next.js/issues/54777
 const Image =
diff --git a/packages/next/src/rsc/blocks/ImageBlock.tsx b/packages/next/src/rsc/blocks/ImageBlock.tsx
new file mode 100644
index 000000000..c366bc8bf
--- /dev/null
+++ b/packages/next/src/rsc/blocks/ImageBlock.tsx
@@ -0,0 +1,67 @@
+import { domToReact, Element, isBlockByName } from '@headstartwp/core';
+import { BlockFC, BlockProps } from '@headstartwp/core/react';
+import { ImageComponent } from '../../components/ImageComponent';
+
+type ImageBlockAttributes = {
+	width?: number;
+	height?: number;
+	sizeSlug?: string;
+	linkDestination?: string;
+	src: string;
+	alt?: string;
+};
+
+export const ImageBlock: BlockFC<BlockProps<ImageBlockAttributes>> = ({
+	domNode: node,
+	children,
+	style,
+	block,
+}) => {
+	if (typeof node === 'undefined') {
+		return null;
+	}
+
+	if (typeof block === 'undefined') {
+		return domToReact([node]);
+	}
+
+	const { name, className, attributes } = block;
+
+	const hasFigureNode = (node.firstChild as Element).name === 'figure';
+
+	const { width, height } = attributes;
+	let imgNode;
+
+	if (hasFigureNode) {
+		const figureNode = node.children[0] as Element;
+
+		if (figureNode.children[0]) {
+			imgNode = figureNode.children[0] as Element;
+		}
+	} else {
+		imgNode = node.children[0] as Element;
+	}
+
+	const { src, alt, width: imgNodeWidth, height: imgNodeHeight } = imgNode.attribs;
+	const imageWidth = width ?? imgNodeWidth;
+	const imageHeight = height ?? imgNodeHeight;
+
+	return (
+		<ImageComponent
+			name={name}
+			domNode={node}
+			className={className}
+			src={src}
+			alt={alt}
+			width={imageWidth ? Number(imageWidth) : undefined}
+			height={imageHeight ? Number(imageHeight) : undefined}
+			style={style}
+		>
+			{children}
+		</ImageComponent>
+	);
+};
+
+ImageBlock.test = (node) => {
+	return isBlockByName(node, 'core/image');
+};
diff --git a/packages/next/src/rsc/blocks/LinkBlock.tsx b/packages/next/src/rsc/blocks/LinkBlock.tsx
index 2ec3138a5..995121b81 100644
--- a/packages/next/src/rsc/blocks/LinkBlock.tsx
+++ b/packages/next/src/rsc/blocks/LinkBlock.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link.js';
 import { removeSourceUrl } from '@headstartwp/core/utils';
 import { BlockFC, BlockProps, IDataWPBlock } from '@headstartwp/core/react';
-import { getAttributes, isAnchorTag } from '@headstartwp/core';
+import { domToReact, getAttributes, isAnchorTag } from '@headstartwp/core';
 import React from 'react';
 
 interface LinkBlockProps extends BlockProps<IDataWPBlock> {
@@ -31,8 +31,12 @@ interface LinkBlockProps extends BlockProps<IDataWPBlock> {
  * @category React Components
  */
 export const LinkBlock: BlockFC<LinkBlockProps> = ({ domNode, children, blockContext }) => {
+	if (typeof domNode === 'undefined') {
+		return null;
+	}
+
 	if (typeof blockContext?.settings === 'undefined') {
-		return children;
+		return domToReact([domNode]);
 	}
 
 	const { settings } = blockContext;
diff --git a/packages/next/src/rsc/index.ts b/packages/next/src/rsc/index.ts
index ac4e12427..fbc7ad2d0 100644
--- a/packages/next/src/rsc/index.ts
+++ b/packages/next/src/rsc/index.ts
@@ -15,3 +15,4 @@ export * from './components/HeadstartWPApp';
 // blocks
 export * from './blocks/LinkBlock';
 export * from '../blocks/TwitterBlock';
+export * from './blocks/ImageBlock';
diff --git a/projects/wp-nextjs-app/src/components/Blocks.tsx b/projects/wp-nextjs-app/src/components/Blocks.tsx
index 1c086e9ca..041770eb0 100644
--- a/projects/wp-nextjs-app/src/components/Blocks.tsx
+++ b/projects/wp-nextjs-app/src/components/Blocks.tsx
@@ -1,7 +1,8 @@
 import { BlocksRenderer } from '@headstartwp/core/react';
 import React from 'react';
 import { HeadlessConfig, isBlockByName } from '@headstartwp/core';
-import { LinkBlock, TwitterBlock } from '@headstartwp/next/app';
+import { ImageBlock, LinkBlock, TwitterBlock } from '@headstartwp/next/app';
+
 import { PostList } from './Blocks/PostList';
 
 type BlockProps = {
@@ -15,6 +16,7 @@ const Blocks: React.FC<BlockProps> = ({ html, settings }) => {
 	// the settings is automatically passed to the children components via blockContext
 	return (
 		<BlocksRenderer forwardBlockAttributes html={html} settings={settings}>
+			<ImageBlock />
 			<PostList test={(node) => isBlockByName(node, 'core/query')} />
 			<TwitterBlock />
 			<LinkBlock />