From ccdb8385b33a85485e0c9929e2c7733ef9b44f89 Mon Sep 17 00:00:00 2001
From: Alex Kazhukhouski <alex.kazhukhouski@wpengine.com>
Date: Thu, 12 Dec 2024 12:02:26 +0100
Subject: [PATCH] fix(FeaturedImage): prevent simultaneous width and fill props
 usage

---
 .../components/FeaturedImage/FeaturedImage.js | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/examples/next/faustwp-getting-started/components/FeaturedImage/FeaturedImage.js b/examples/next/faustwp-getting-started/components/FeaturedImage/FeaturedImage.js
index e05a20607..40a4a78cb 100644
--- a/examples/next/faustwp-getting-started/components/FeaturedImage/FeaturedImage.js
+++ b/examples/next/faustwp-getting-started/components/FeaturedImage/FeaturedImage.js
@@ -10,25 +10,33 @@ export default function FeaturedImage({
   ...props
 }) {
   const src = image?.sourceUrl;
-  const { altText } = image || '';
 
-  width = width ? width : image?.mediaDetails?.width;
-  height = height ? height : image?.mediaDetails?.height;
+  if (!src) return null;
+
+  const { altText = '', mediaDetails = {} } = image ?? {};
+
   layout = layout ?? 'fill';
 
-  return src && width && height ? (
+  const dimensions = {
+    width: layout === 'fill' ? undefined : width ?? mediaDetails?.width,
+    height: layout === 'fill' ? undefined : height ?? mediaDetails?.height
+  };
+
+  if (layout !== 'fill' && (!dimensions.width || !dimensions.height)) return null;
+
+  return (
     <figure className={className}>
       <Image
         src={src}
         alt={altText}
-        layout={layout}
-        width={width}
-        height={height}
+        fill={layout}
+        width={dimensions.width}
+        height={dimensions.height}
         priority={priority}
         {...props}
       />
     </figure>
-  ) : null;
+  );
 }
 
 FeaturedImage.fragments = {