feat: introducing rsc-compatible image block (#835)

.changeset/poor-donkeys-march.md

@@ -0,0 +1,6 @@
+---
+"@headstartwp/core": minor
+"@headstartwp/next": minor
+---
+
+RSC compatible image block for next.js

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';

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
  *

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');
+};

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

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';

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 =

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');
+};

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;

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';

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 />