From de501ff75d8edde6bda890ec24b7da5c3e46a055 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=ADcholas=20Andr=C3=A9?= <nicholasio.oliveira@gmail.com>
Date: Tue, 29 Aug 2023 09:53:27 -0300
Subject: [PATCH] fix: images without width/height (#589)

---
 .changeset/lucky-bears-think.md                 | 6 ++++++
 packages/core/src/react/blocks/ImageBlock.tsx   | 6 ++++--
 packages/next/src/components/ImageComponent.tsx | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/lucky-bears-think.md

diff --git a/.changeset/lucky-bears-think.md b/.changeset/lucky-bears-think.md
new file mode 100644
index 000000000..923ef5496
--- /dev/null
+++ b/.changeset/lucky-bears-think.md
@@ -0,0 +1,6 @@
+---
+"@headstartwp/core": patch
+"@headstartwp/next": patch
+---
+
+Fix an issue for images without width or height
diff --git a/packages/core/src/react/blocks/ImageBlock.tsx b/packages/core/src/react/blocks/ImageBlock.tsx
index 1e5e15c44..b21397720 100644
--- a/packages/core/src/react/blocks/ImageBlock.tsx
+++ b/packages/core/src/react/blocks/ImageBlock.tsx
@@ -41,6 +41,8 @@ export function ImageBlock({
 	}
 
 	const { src, alt, width: imgNodeWidth, height: imgNodeHeight } = imgNode.attribs;
+	const imageWidth = width ?? imgNodeWidth;
+	const imageHeight = height ?? imgNodeHeight;
 
 	return (
 		<Component
@@ -50,8 +52,8 @@ export function ImageBlock({
 			src={src}
 			alt={alt}
 			attributes={blockAttributes}
-			width={width || Number(imgNodeWidth)}
-			height={height || Number(imgNodeHeight)}
+			width={imageWidth ? Number(imageWidth) : undefined}
+			height={imageHeight ? Number(imageHeight) : undefined}
 			style={style}
 		>
 			{children}
diff --git a/packages/next/src/components/ImageComponent.tsx b/packages/next/src/components/ImageComponent.tsx
index 254eb1b68..5b0daaa81 100644
--- a/packages/next/src/components/ImageComponent.tsx
+++ b/packages/next/src/components/ImageComponent.tsx
@@ -102,7 +102,7 @@ export function ImageComponent({ src, alt, width, height, children, style, loade
 	}
 
 	if (!width || !height) {
-		<Image src={src} alt={alt || ''} fill style={style} loader={loader} />;
+		return <Image src={src} alt={alt || ''} fill style={style} loader={loader} />;
 	}
 
 	return (