From fd14ee5910468939c1afe488eab5d0d09d307f4a Mon Sep 17 00:00:00 2001
From: Vito Galatro <vgalatro@users.noreply.github.com>
Date: Wed, 20 Mar 2024 13:01:47 -0400
Subject: [PATCH] THEMES-891: Non-manual images focal point support (#1966)

* THEMES-891: implemented focal point into numbered list block

* THEMES-891: updated card list and extra large promo.

* THEMES-891: added support for focal point to remaining blocks.

* THEMES-891: fixed filter for results list, added focal point to search results list block.

* THEMES-891: fixed filter for medium promo.

* THEMES-891: added focal point to product featured image.
---
 .../features/card-list/default.jsx            | 21 +++--
 .../features/extra-large-promo/default.jsx    | 32 +++++---
 .../features/large-promo/default.jsx          | 26 ++++--
 .../features/leadart/default.jsx              |  7 +-
 .../features/medium-promo/default.jsx         | 17 +++-
 .../features/numbered-list/default.jsx        | 15 +++-
 .../product-assortment-carousel/default.jsx   |  3 +-
 .../product-featured-image/default.jsx        | 10 +--
 .../product-featured-image/default.test.jsx   | 20 +----
 .../features/results-list/results/index.jsx   | 18 +++--
 .../results-list/results/result-item.jsx      | 50 +++++++-----
 .../results-list/results/result-item.test.jsx |  3 +
 .../_children/search-result.jsx               |  4 +
 .../features/simple-list/default.jsx          | 23 ++++--
 .../features/small-promo/default.jsx          | 80 ++++++++++---------
 .../top-table-list/_children/extra-large.jsx  |  8 +-
 .../top-table-list/_children/large.jsx        | 30 +++----
 .../top-table-list/_children/medium.jsx       |  3 +-
 .../top-table-list/_children/small.jsx        | 25 +++---
 .../features/top-table-list/default.jsx       | 32 +++++---
 package-lock.json                             |  6 +-
 21 files changed, 260 insertions(+), 173 deletions(-)

diff --git a/blocks/card-list-block/features/card-list/default.jsx b/blocks/card-list-block/features/card-list/default.jsx
index d2fec9bd79..cf9ce369d3 100644
--- a/blocks/card-list-block/features/card-list/default.jsx
+++ b/blocks/card-list-block/features/card-list/default.jsx
@@ -10,6 +10,7 @@ import {
 	Date,
 	formatAuthors,
 	formatURL,
+	getFocalFromANS,
 	getImageFromANS,
 	Heading,
 	HeadingSection,
@@ -84,21 +85,29 @@ const CardListItems = (props) => {
 		  promo_items {
 			 basic {
 				_id
-				type
-				url
 				auth {
 					${RESIZER_TOKEN_VERSION}
 				}
+				focal_point {
+					x
+					y
+				}
+				type
+				url
 			 }
 			 lead_art {
 				promo_items {
 				  basic {
 					_id
-					type
-					url
 					auth {
 						${RESIZER_TOKEN_VERSION}
 					}
+					focal_point {
+						x
+						y
+					}
+					type
+					url
 				  }
 				}
 				type
@@ -170,7 +179,7 @@ const CardListItems = (props) => {
 				ansImage,
 				aspectRatio: "4:3",
 				resizedOptions: {
-					smart: true,
+					...getFocalFromANS(ansImage),
 				},
 				responsiveImages: [377, 754, 1508],
 				width: 377,
@@ -230,7 +239,7 @@ const CardListItems = (props) => {
 										ansImage: itemAnsImage,
 										aspectRatio: "3:2",
 										resizedOptions: {
-											smart: true,
+											...getFocalFromANS(itemAnsImage),
 										},
 										responsiveImages: [105, 210, 420],
 										width: 105,
diff --git a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
index 8ebbf62e17..6d115cc0a0 100644
--- a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
+++ b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
@@ -11,6 +11,7 @@ import {
 	Conditional,
 	Date as DateComponent,
 	formatAuthors,
+	getFocalFromANS,
 	getImageFromANS,
 	getVideoFromANS,
 	Heading,
@@ -211,21 +212,29 @@ const ExtraLargePromo = ({ customFields }) => {
 						promo_items {
 							basic {
 								_id
-								type
-								url
 								auth {
 									${RESIZER_TOKEN_VERSION}
 								}
+								focal_point {
+									x
+									y
+								}
+								type
+								url
 							}
 						}
 					}
 					basic {
 						_id
-						type
-						url
 						auth {
 							${RESIZER_TOKEN_VERSION}
 						}
+						focal_point {
+							x
+							y
+						}
+						type
+						url
 					}
 				}
 				website_url
@@ -296,21 +305,22 @@ const ExtraLargePromo = ({ customFields }) => {
 		showByline && content?.credits?.by?.length > 0
 			? formatAuthors(content.credits.by, phrases.t("global.and-text"))
 			: null;
+	const ansImage = getImageFromANS(content);
 	const imageParams =
 		showImage &&
-		(imageOverrideURL || (content && getImageFromANS(content))
+		(imageOverrideURL || ansImage
 			? {
 					ansImage: imageOverrideURL
 						? {
-								_id: resizedImage ? imageOverrideId : "",
-								url: imageOverrideURL,
-								auth: resizedAuth || {},
-						  }
-						: getImageFromANS(content),
+							_id: resizedImage ? imageOverrideId : "",
+							url: imageOverrideURL,
+							auth: resizedAuth || {},
+						}
+						: ansImage,
 					alt: content?.headlines?.basic || "",
 					aspectRatio: imageRatio,
 					resizedOptions: {
-						smart: true,
+						...getFocalFromANS(ansImage),
 					},
 					responsiveImages: [400, 600, 800, 1200],
 					width: 800,
diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx
index af4a0b5b08..80f557a635 100644
--- a/blocks/large-promo-block/features/large-promo/default.jsx
+++ b/blocks/large-promo-block/features/large-promo/default.jsx
@@ -18,6 +18,7 @@ import {
 	MediaItem,
 	Stack,
 	formatURL,
+	getFocalFromANS,
 	getImageFromANS,
 	getVideoFromANS,
 	isServerSide,
@@ -221,21 +222,29 @@ const LargePromoItem = ({ customFields, arcSite }) => {
 						promo_items {
 							basic {
 								_id
-								type
-								url
 								auth {
 									${RESIZER_TOKEN_VERSION}
 								}
+								focal_point {
+									x
+									y
+								}
+								type
+								url
 							}
 						}
 					}
 					basic {
 						_id
-						type
-						url
 						auth {
 							${RESIZER_TOKEN_VERSION}
 						}
+						focal_point {
+							x
+							y
+						}
+						type
+						url
 					}
 				}
 				embed_html
@@ -337,9 +346,10 @@ const LargePromoItem = ({ customFields, arcSite }) => {
 	const contentOverline = showOverline ? overlineText : null;
 	const contentUrl = content?.websites?.[arcSite]?.website_url;
 	const embedMarkup = playVideoInPlace && getVideoFromANS(content);
-	const promoImageParams =
+	const ansImage = getImageFromANS(content);
+	const promoImageParams = 
 		showImage &&
-		(imageOverrideURL || (content && getImageFromANS(content))
+		(imageOverrideURL || ansImage
 			? {
 					ansImage: imageOverrideURL
 						? {
@@ -347,11 +357,11 @@ const LargePromoItem = ({ customFields, arcSite }) => {
 								url: imageOverrideURL,
 								auth: resizedAuth || {},
 						  }
-						: getImageFromANS(content),
+						: ansImage,
 					alt: content?.headlines?.basic || "",
 					aspectRatio: imageRatio,
 					resizedOptions: {
-						smart: true,
+						...getFocalFromANS(ansImage),
 					},
 					responsiveImages: [400, 600, 800, 1200],
 					width: 377,
diff --git a/blocks/lead-art-block/features/leadart/default.jsx b/blocks/lead-art-block/features/leadart/default.jsx
index c59397c39a..0cd5136a9d 100644
--- a/blocks/lead-art-block/features/leadart/default.jsx
+++ b/blocks/lead-art-block/features/leadart/default.jsx
@@ -9,6 +9,7 @@ import {
 	Carousel,
 	formatCredits,
 	formatPowaVideoEmbed,
+	getFocalFromANS,
 	Icon,
 	Image,
 	MediaItem,
@@ -140,12 +141,12 @@ export const LeadArtPresentation = (props) => {
 					<div className={`${BLOCK_CLASS_NAME}__image-wrapper`} ref={imgRef}>
 						<Image
 							alt={leadArt.alt_text}
+							ansImage={leadArt}
 							aspectRatio={imageRatio || "16:9"}
 							loading={imageLoadingStrategy}
-							width={800}
 							responsiveImages={[800, 1600]}
-							resizedOptions={{ smart: true }}
-							ansImage={leadArt}
+							resizedOptions={{ ...getFocalFromANS(leadArt) }}
+							width={800}
 						/>
 						{isOpen ? (
 							<Button
diff --git a/blocks/medium-promo-block/features/medium-promo/default.jsx b/blocks/medium-promo-block/features/medium-promo/default.jsx
index 582a6d863b..daa78ec9ed 100644
--- a/blocks/medium-promo-block/features/medium-promo/default.jsx
+++ b/blocks/medium-promo-block/features/medium-promo/default.jsx
@@ -11,6 +11,7 @@ import {
 	Date as DateComponent,
 	formatAuthors,
 	formatURL,
+	getFocalFromANS,
 	getImageFromANS,
 	getPromoType,
 	Heading,
@@ -106,6 +107,10 @@ const MediumPromo = ({ customFields }) => {
 							auth {
 								${RESIZER_TOKEN_VERSION}
 							}
+							focal_point {
+								x
+								y
+							}
 							type
 							url
 						}
@@ -116,6 +121,10 @@ const MediumPromo = ({ customFields }) => {
 					auth {
 						${RESIZER_TOKEN_VERSION}
 					}
+					focal_point {
+						x
+						y
+					}
 					type
 					url
 				}
@@ -170,9 +179,9 @@ const MediumPromo = ({ customFields }) => {
 		gallery: phrases.t("global.gallery-text"),
 		video: phrases.t("global.video-text"),
 	}[promoType];
-
+	const ansImage = getImageFromANS(content);
 	const imageParams =
-		imageOverrideURL || (content && getImageFromANS(content))
+		imageOverrideURL || ansImage
 			? {
 					ansImage: imageOverrideURL
 						? {
@@ -180,11 +189,11 @@ const MediumPromo = ({ customFields }) => {
 								url: imageOverrideURL,
 								auth: resizedAuth || {},
 						  }
-						: getImageFromANS(content),
+						: ansImage,
 					alt: content?.headlines?.basic || "",
 					aspectRatio: imageRatio,
 					resizedOptions: {
-						smart: true,
+						...getFocalFromANS(ansImage),
 					},
 					responsiveImages: [200, 400, 600, 800, 1200],
 					width: 600,
diff --git a/blocks/numbered-list-block/features/numbered-list/default.jsx b/blocks/numbered-list-block/features/numbered-list/default.jsx
index 9ece6fd7cb..0198e2c5a2 100644
--- a/blocks/numbered-list-block/features/numbered-list/default.jsx
+++ b/blocks/numbered-list-block/features/numbered-list/default.jsx
@@ -6,6 +6,7 @@ import { useFusionContext } from "fusion:context";
 import getProperties from "fusion:properties";
 import { RESIZER_TOKEN_VERSION } from "fusion:environment";
 import {
+	getFocalFromANS,
 	getImageFromANS,
 	isServerSide,
 	Heading,
@@ -57,6 +58,10 @@ const NumberedList = (props) => {
 			auth {
 				${RESIZER_TOKEN_VERSION}
 			}
+			focal_point {
+				x
+				y
+			}
             type
             url
           }
@@ -67,8 +72,12 @@ const NumberedList = (props) => {
 				auth {
 					${RESIZER_TOKEN_VERSION}
 				}
-                type
-                url
+				focal_point {
+					x
+					y
+				}
+				type
+				url
               }
             }
             type
@@ -100,7 +109,7 @@ const NumberedList = (props) => {
 												ansImage: imageObj,
 												aspectRatio: "3:2",
 												resizedOptions: {
-													smart: true,
+													...getFocalFromANS(imageObj),
 												},
 												responsiveImages: [137, 274, 548],
 												width: 274,
diff --git a/blocks/product-assortment-carousel-block/features/product-assortment-carousel/default.jsx b/blocks/product-assortment-carousel-block/features/product-assortment-carousel/default.jsx
index b13b5e6637..1ff9b12740 100644
--- a/blocks/product-assortment-carousel-block/features/product-assortment-carousel/default.jsx
+++ b/blocks/product-assortment-carousel-block/features/product-assortment-carousel/default.jsx
@@ -6,6 +6,7 @@ import { useContent, useEditableContent } from "fusion:content";
 
 import {
 	Carousel,
+	getFocalFromANS,
 	Heading,
 	HeadingSection,
 	Icon,
@@ -153,7 +154,7 @@ function ProductAssortmentCarousel({ customFields = {} }) {
 											<Image
 												alt={altText}
 												ansImage={featuredImage}
-												resizedOptions={{ smart: true }}
+												resizedOptions={{ ...getFocalFromANS(featuredImage) }}
 												width={280}
 												height={280}
 												responsiveImages={[280, 420, 560, 840]}
diff --git a/blocks/product-featured-image-block/features/product-featured-image/default.jsx b/blocks/product-featured-image-block/features/product-featured-image/default.jsx
index d8a8ec11b6..0aa15ecc1d 100644
--- a/blocks/product-featured-image-block/features/product-featured-image/default.jsx
+++ b/blocks/product-featured-image-block/features/product-featured-image/default.jsx
@@ -2,21 +2,21 @@ import React from "react";
 import { useFusionContext } from "fusion:context";
 import { RESIZER_TOKEN_VERSION } from "fusion:environment";
 import getProperties from "fusion:properties";
-import { imageANSToImageSrc, Image } from "@wpmedia/arc-themes-components";
+import { getFocalFromANS, Image } from "@wpmedia/arc-themes-components";
 
 const BLOCK_CLASS_NAME = "b-product-featured-image";
 
-export const ProductFeaturedImageDisplay = ({ featuredImage, resizerAppVersion, resizerURL }) => {
-	const { auth = {}, alt_text: altText } = featuredImage;
+export const ProductFeaturedImageDisplay = ({ featuredImage, resizerURL }) => {
+	const { alt_text: altText } = featuredImage;
 	return (
 		<Image
 			alt={altText}
+			ansImage={featuredImage}
 			className={BLOCK_CLASS_NAME}
 			height={768}
-			resizedOptions={{ auth: auth[resizerAppVersion] }}
+			resizedOptions={{ ...getFocalFromANS(featuredImage) }}
 			resizerURL={resizerURL}
 			responsiveImages={[320, 768]}
-			src={imageANSToImageSrc(featuredImage)}
 			width={768}
 		/>
 	);
diff --git a/blocks/product-featured-image-block/features/product-featured-image/default.test.jsx b/blocks/product-featured-image-block/features/product-featured-image/default.test.jsx
index 2a613e08c2..5ba8b6f85f 100644
--- a/blocks/product-featured-image-block/features/product-featured-image/default.test.jsx
+++ b/blocks/product-featured-image-block/features/product-featured-image/default.test.jsx
@@ -30,12 +30,12 @@ describe("Product Featured Image", () => {
 			globalContent: {},
 		}));
 		const { container } = render(<ProductFeaturedImage />);
-		expect(container.firstChild).toBe(null);
+		expect(container).toBeEmptyDOMElement();
 	});
 	it("should render null if no global content object", () => {
 		useFusionContext.mockImplementation(() => ({}));
 		const { container } = render(<ProductFeaturedImage />);
-		expect(container.firstChild).toBe(null);
+		expect(container).toBeEmptyDOMElement();
 	});
 	it("should render null if empty schema provided", () => {
 		useFusionContext.mockImplementation(() => ({
@@ -44,7 +44,7 @@ describe("Product Featured Image", () => {
 			},
 		}));
 		const { container } = render(<ProductFeaturedImage />);
-		expect(container.firstChild).toBe(null);
+		expect(container).toBeEmptyDOMElement();
 	});
 	it("should render null if no featured image provided", () => {
 		useFusionContext.mockImplementation(() => ({
@@ -57,7 +57,7 @@ describe("Product Featured Image", () => {
 			},
 		}));
 		const { container } = render(<ProductFeaturedImage />);
-		expect(container.firstChild).toBe(null);
+		expect(container).toBeEmptyDOMElement();
 	});
 	it("should render a featured image", () => {
 		useFusionContext.mockImplementation(() => ({
@@ -86,16 +86,4 @@ describe("Product Featured Image", () => {
 		expect(image).toBeInTheDocument();
 		expect(image).toHaveAttribute("alt", "");
 	});
-	it("should render with no auth", () => {
-		useFusionContext.mockImplementation(() => ({
-			globalContent: {
-				schema: {
-					featuredImage: { value: [{ ...FEATURED_IMAGE_ASSET, auth: undefined }] },
-				},
-			},
-		}));
-		render(<ProductFeaturedImage />);
-		const image = screen.getByRole("img");
-		expect(image).toBeInTheDocument();
-	});
 });
diff --git a/blocks/results-list-block/features/results-list/results/index.jsx b/blocks/results-list-block/features/results-list/results/index.jsx
index e7c7d33945..c7c8d4b938 100644
--- a/blocks/results-list-block/features/results-list/results/index.jsx
+++ b/blocks/results-list-block/features/results-list/results/index.jsx
@@ -102,11 +102,15 @@ const Results = ({
         promo_items {
           basic {
 			_id
-            auth {
+			auth {
 				${RESIZER_TOKEN_VERSION}
 			}
-            type
-            url
+			focal_point {
+				x
+				y
+			}
+			type
+			url
           }
           lead_art {
             promo_items {
@@ -115,8 +119,12 @@ const Results = ({
 				auth {
 					${RESIZER_TOKEN_VERSION}
 				}
-                type
-                url
+				focal_point {
+					x
+					y
+				}
+				type
+				url
               }
             }
             type
diff --git a/blocks/results-list-block/features/results-list/results/result-item.jsx b/blocks/results-list-block/features/results-list/results/result-item.jsx
index d602df4a5e..c6f5969184 100644
--- a/blocks/results-list-block/features/results-list/results/result-item.jsx
+++ b/blocks/results-list-block/features/results-list/results/result-item.jsx
@@ -2,7 +2,6 @@ import React from "react";
 import { useEditableContent } from "fusion:content";
 import { useComponentContext } from "fusion:context";
 import getProperties from "fusion:properties";
-import { RESIZER_TOKEN_VERSION } from "fusion:environment";
 
 import {
 	Attribution,
@@ -10,10 +9,10 @@ import {
 	Date as DateComponent,
 	formatAuthors,
 	formatURL,
+	getFocalFromANS,
 	getImageFromANS,
 	Heading,
 	Image,
-	imageANSToImageSrc,
 	Join,
 	Link,
 	localizeDateTime,
@@ -59,7 +58,6 @@ const ResultItem = React.memo(
 					timeZone: "GMT",
 					dateTimeFormat: "LLLL d, yyyy 'at' K:m bbbb z",
 				},
-				resizerURL,
 			} = getProperties(arcSite);
 
 			const {
@@ -80,8 +78,7 @@ const ResultItem = React.memo(
 			}
 
 			/* Author Formatting */
-			const imageURL = imageANSToImageSrc(getImageFromANS(element)) || null;
-			const auth = getImageFromANS(element)?.auth || {};
+			const ansImage = getImageFromANS(element)
 			const { searchableField } = useEditableContent();
 			const hasAuthors = showByline ? credits?.by?.some((author) => author?.name !== "") : null;
 			const contentHeading = showHeadline ? headlineText : null;
@@ -89,6 +86,31 @@ const ResultItem = React.memo(
 				? localizeDateTime(new Date(displayDate), dateTimeFormat, language, timeZone)
 				: "";
 			const url = websites[arcSite].website_url;
+			const imageParams = ansImage
+				? {
+						ansImage,
+						aspectRatio: imageRatio,
+						loading,
+						resizedOptions: {
+							...getFocalFromANS(ansImage),
+						},
+						responsiveImages: [250, 500],	
+						sizes: [
+							{
+								isDefault: true,
+								sourceSizeValue: "250px",
+							},
+							{
+								sourceSizeValue: "500px",
+								mediaCondition: "(min-width: 48rem)",
+							},
+						],
+						width: 500,
+				  }
+				: {
+						src: targetFallbackImage,
+						loading
+				  };
 			return showHeadline ||
 				showImage ||
 				showDescription ||
@@ -109,24 +131,8 @@ const ResultItem = React.memo(
 								assistiveHidden
 							>
 								<Image
-									src={imageURL !== null ? imageURL : targetFallbackImage}
 									alt={headlineText}
-									aspectRatio={imageRatio}
-									resizedOptions={{ auth: auth[RESIZER_TOKEN_VERSION], smart: true }}
-									resizerURL={resizerURL}
-									sizes={[
-										{
-											isDefault: true,
-											sourceSizeValue: "250px",
-										},
-										{
-											sourceSizeValue: "500px",
-											mediaCondition: "(min-width: 48rem)",
-										},
-									]}
-									responsiveImages={[250, 500]}
-									width={500}
-									loading={loading}
+									{ ...imageParams }
 								/>
 							</Conditional>
 						</MediaItem>
diff --git a/blocks/results-list-block/features/results-list/results/result-item.test.jsx b/blocks/results-list-block/features/results-list/results/result-item.test.jsx
index 57bd79a6e1..0ba521ccac 100644
--- a/blocks/results-list-block/features/results-list/results/result-item.test.jsx
+++ b/blocks/results-list-block/features/results-list/results/result-item.test.jsx
@@ -273,6 +273,9 @@ describe("Result parts", () => {
 							_id: "ABCDEFG12345678910",
 							type: "image",
 							url: "http://test/resources/ABCDEFG12345678910.jpg",
+							auth: {
+								"2": "abc123",
+							}
 						},
 					},
 				}}
diff --git a/blocks/search-results-list-block/features/search-results-list/_children/search-result.jsx b/blocks/search-results-list-block/features/search-results-list/_children/search-result.jsx
index 5a9869cb25..45e80d06d9 100644
--- a/blocks/search-results-list-block/features/search-results-list/_children/search-result.jsx
+++ b/blocks/search-results-list-block/features/search-results-list/_children/search-result.jsx
@@ -7,6 +7,7 @@ import {
 	Date as DateComponent,
 	formatAuthors,
 	formatURL,
+	getFocalFromANS,
 	getImageFromANS,
 	Heading,
 	HeadingSection,
@@ -59,6 +60,9 @@ const SearchResult = ({ arcSite, className, content, promoElements }) => {
 			? {
 					ansImage,
 					aspectRatio: imageRatio,
+					resizedOptions: {
+						...getFocalFromANS(ansImage),
+					},
 					responsiveImages: [200, 400, 800],
 					sizes: [
 						{
diff --git a/blocks/simple-list-block/features/simple-list/default.jsx b/blocks/simple-list-block/features/simple-list/default.jsx
index 4d35cd32b2..e84c3417e0 100644
--- a/blocks/simple-list-block/features/simple-list/default.jsx
+++ b/blocks/simple-list-block/features/simple-list/default.jsx
@@ -6,14 +6,15 @@ import { useFusionContext } from "fusion:context";
 import getProperties from "fusion:properties";
 import { RESIZER_TOKEN_VERSION } from "fusion:environment";
 import {
+	getFocalFromANS,
 	getImageFromANS,
-	Stack,
-	isServerSide,
 	Heading,
 	HeadingSection,
 	Image,
+	isServerSide,
 	LazyLoad,
 	Link,
+	Stack,
 } from "@wpmedia/arc-themes-components";
 
 const BLOCK_CLASS_NAME = "b-simple-list";
@@ -85,21 +86,29 @@ const SimpleList = (props) => {
 		  	promo_items {
 				basic {
 					_id
-					type
-					url
 					auth {
 						${RESIZER_TOKEN_VERSION}
 					}
+					focal_point {
+						x
+						y
+					}
+					type
+					url
 			 	}
 				lead_art {
 					promo_items {
 				  		basic {
 							_id
-							type
-							url
 							auth {
 								${RESIZER_TOKEN_VERSION}
 							}
+							focal_point {
+								x
+								y
+							}
+							type
+							url
 						}
 					}
 					type
@@ -135,7 +144,7 @@ const SimpleList = (props) => {
 										ansImage: image,
 										aspectRatio: "3:2",
 										resizedOptions: {
-											smart: true,
+											...getFocalFromANS(image),
 										},
 										responsiveImages: [274, 548, 1096],
 										width: 274,
diff --git a/blocks/small-promo-block/features/small-promo/default.jsx b/blocks/small-promo-block/features/small-promo/default.jsx
index 5ff5262ae6..92454c2277 100644
--- a/blocks/small-promo-block/features/small-promo/default.jsx
+++ b/blocks/small-promo-block/features/small-promo/default.jsx
@@ -5,7 +5,11 @@ import { useContent, useEditableContent } from "fusion:content";
 import { useComponentContext, useFusionContext } from "fusion:context";
 import getProperties from "fusion:properties";
 import {
+	Conditional,
 	formatURL,
+	getFocalFromANS,
+	getImageFromANS,
+	Grid,
 	Heading,
 	HeadingSection,
 	Image,
@@ -13,9 +17,6 @@ import {
 	LazyLoad,
 	Link,
 	MediaItem,
-	Grid,
-	getImageFromANS,
-	Conditional,
 } from "@wpmedia/arc-themes-components";
 
 const BLOCK_CLASS_NAME = "b-small-promo";
@@ -67,21 +68,29 @@ const SmallPromo = ({ customFields }) => {
 				promo_items {
 					basic {
 						_id
-						type
-						url
 						auth {
 							${RESIZER_TOKEN_VERSION}
 						}
+						focal_point {
+							x
+							y
+						}
+						type
+						url
 					}
 				}
 			}
 			basic {
 				_id
-				type
-				url
 				auth {
 					${RESIZER_TOKEN_VERSION}
 				}
+				focal_point {
+					x
+					y
+				}
+				type
+				url
 			}
 		}
 		websites {
@@ -118,31 +127,29 @@ const SmallPromo = ({ customFields }) => {
 	const linkURL = content?.websites?.[arcSite]?.website_url;
 	const headline = content?.headlines?.basic;
 
-	const PromoImage = () => {
-		const { fallbackImage } = getProperties(arcSite);
-		const imageParams =
-			imageOverrideURL || (content && getImageFromANS(content))
+	const { fallbackImage } = getProperties(arcSite);
+	const ansImage = getImageFromANS(content);
+	const imageParams = imageOverrideURL || ansImage
+		? {
+			ansImage: imageOverrideURL
 				? {
-						ansImage: imageOverrideURL
-							? {
-									_id: resizedImage ? imageOverrideId : "",
-									url: imageOverrideURL,
-									auth: resizedAuth || {},
-							  }
-							: getImageFromANS(content),
-						alt: content?.headlines?.basic || "",
-						aspectRatio: imageRatio,
-						resizedOptions: {
-							smart: true,
-						},
-						responsiveImages: [200, 400, 600, 800, 1200],
-						width: 600,
-				  }
-				: {
-						src: fallbackImage,
-				  };
+						_id: resizedImage ? imageOverrideId : "",
+						url: imageOverrideURL,
+						auth: resizedAuth || {},
+					}
+				: ansImage,
+			alt: content?.headlines?.basic || "",
+			aspectRatio: imageRatio,
+			resizedOptions: {
+				...getFocalFromANS(ansImage),
+			},
+			responsiveImages: [200, 400, 600, 800, 1200],
+			width: 600,
+		}
+		: { src: fallbackImage, };
 
-		return showImage ? (
+	const promoImage = showImage
+		? (
 			<Conditional
 				className={`${BLOCK_CLASS_NAME}__img`}
 				component={Link}
@@ -163,10 +170,9 @@ const SmallPromo = ({ customFields }) => {
 				</MediaItem>
 			</Conditional>
 		) : null;
-	};
 
-	const PromoHeading = () =>
-		showHeadline && headline ? (
+	const promoHeading = showHeadline && headline
+		? (
 			<Heading>
 				<Conditional
 					component={Link}
@@ -192,13 +198,13 @@ const SmallPromo = ({ customFields }) => {
 				<Grid as="article" className={containerClassNames}>
 					{["below", "right"].includes(imagePosition) ? (
 						<>
-							<PromoHeading />
-							<PromoImage />
+							{ promoHeading }
+							{ promoImage }
 						</>
 					) : (
 						<>
-							<PromoImage />
-							<PromoHeading />
+							{ promoImage }
+							{ promoHeading }
 						</>
 					)}
 				</Grid>
diff --git a/blocks/top-table-list-block/features/top-table-list/_children/extra-large.jsx b/blocks/top-table-list-block/features/top-table-list/_children/extra-large.jsx
index 8bad0209be..c45a5651b2 100644
--- a/blocks/top-table-list-block/features/top-table-list/_children/extra-large.jsx
+++ b/blocks/top-table-list-block/features/top-table-list/_children/extra-large.jsx
@@ -8,6 +8,7 @@ import {
 	Date as DateComponent,
 	Divider,
 	formatAuthors,
+	getFocalFromANS,
 	getImageFromANS,
 	getVideoFromANS,
 	Heading,
@@ -85,14 +86,15 @@ const ExtraLarge = (props) => {
 	const contentUrl = element?.websites?.[arcSite]?.website_url;
 	const embedMarkup = playVideoInPlaceXL && getVideoFromANS(element);
 	const hasAuthors = showBylineXL && element?.credits?.by.length > 0;
+	const ansImage = getImageFromANS(element);
 	const imageParams =
-		element && getImageFromANS(element)
+		element && ansImage
 			? {
-					ansImage: getImageFromANS(element),
+					ansImage,
 					alt: element?.headlines?.basic || "",
 					aspectRatio: imageRatioXL,
 					resizedOptions: {
-						smart: true,
+						...getFocalFromANS(ansImage),
 					},
 					responsiveImages: [400, 600, 800, 1200],
 					width: 800,
diff --git a/blocks/top-table-list-block/features/top-table-list/_children/large.jsx b/blocks/top-table-list-block/features/top-table-list/_children/large.jsx
index b0156ace05..27f6943e8f 100644
--- a/blocks/top-table-list-block/features/top-table-list/_children/large.jsx
+++ b/blocks/top-table-list-block/features/top-table-list/_children/large.jsx
@@ -3,8 +3,17 @@ import getProperties from "fusion:properties";
 import { useFusionContext } from "fusion:context";
 
 import {
+	Attribution,
 	Conditional,
+	Date as DateDisplay,
+	Divider,
+	formatAuthors,
+	formatURL,
+	getFocalFromANS,
+	getImageFromANS,
+	getVideoFromANS,
 	Grid,
+	Heading,
 	HeadingSection,
 	Icon,
 	Image,
@@ -12,20 +21,13 @@ import {
 	Link,
 	localizeDateTime,
 	MediaItem,
-	Stack,
-	formatURL,
-	getImageFromANS,
-	getVideoFromANS,
 	Overline,
-	Heading,
 	Paragraph,
-	Date as DateDisplay,
-	formatAuthors,
-	Attribution,
 	Separator,
+	Stack,
 	usePhrases,
 	Video,
-	Divider,
+	
 } from "@wpmedia/arc-themes-components";
 
 const BLOCK_CLASS_NAME = "b-top-table-list-large";
@@ -111,16 +113,16 @@ const Large = (props) => {
 	const contentOverline = showOverlineLG ? overlineText : null;
 	const contentUrl = element?.websites?.[arcSite]?.website_url;
 	const embedMarkup = playVideoInPlaceLG && getVideoFromANS(element);
-	const promoImageURL = showImageLG && (getImageFromANS(element)?.url || fallbackImage);
-
+	const ansImage = getImageFromANS(element);
+	const promoImageURL = showImageLG && (ansImage?.url || fallbackImage);
 	const imageParams =
-		element && getImageFromANS(element)
+		element && ansImage
 			? {
-					ansImage: getImageFromANS(element),
+					ansImage,
 					alt: element?.headlines?.basic || "",
 					aspectRatio: imageRatioLG,
 					resizedOptions: {
-						smart: true,
+						...getFocalFromANS(ansImage),
 					},
 					responsiveImages: [400, 600, 800, 1200],
 					width: 800,
diff --git a/blocks/top-table-list-block/features/top-table-list/_children/medium.jsx b/blocks/top-table-list-block/features/top-table-list/_children/medium.jsx
index 4ae8e2f145..8af253a0a3 100644
--- a/blocks/top-table-list-block/features/top-table-list/_children/medium.jsx
+++ b/blocks/top-table-list-block/features/top-table-list/_children/medium.jsx
@@ -9,6 +9,7 @@ import {
 	Divider,
 	formatAuthors,
 	formatURL,
+	getFocalFromANS,
 	getImageFromANS,
 	getPromoType,
 	Heading,
@@ -81,7 +82,7 @@ const Medium = (props) => {
 				ansImage: ANSImage,
 				aspectRatio: imageRatioMD,
 				resizedOptions: {
-					smart: true,
+					...getFocalFromANS(ANSImage),
 				},
 				responsiveImages: [400, 600, 800, 1200],
 				width: 800,
diff --git a/blocks/top-table-list-block/features/top-table-list/_children/small.jsx b/blocks/top-table-list-block/features/top-table-list/_children/small.jsx
index e49602a8bd..9e288ea655 100644
--- a/blocks/top-table-list-block/features/top-table-list/_children/small.jsx
+++ b/blocks/top-table-list-block/features/top-table-list/_children/small.jsx
@@ -2,16 +2,17 @@ import React from "react";
 import { useFusionContext } from "fusion:context";
 
 import {
+	Conditional,
 	Divider,
 	formatURL,
+	getFocalFromANS,
+	getImageFromANS,
+	Grid,
 	Heading,
 	HeadingSection,
 	Image,
 	Link,
 	MediaItem,
-	Grid,
-	getImageFromANS,
-	Conditional,
 } from "@wpmedia/arc-themes-components";
 
 const BLOCK_CLASS_NAME = "b-top-table-list-small";
@@ -42,7 +43,7 @@ const Small = (props) => {
 				ansImage: ANSImage,
 				aspectRatio: imageRatioSM,
 				resizedOptions: {
-					smart: true,
+					...getFocalFromANS(ANSImage),
 				},
 				responsiveImages: [400, 600, 800, 1200],
 				width: 800,
@@ -58,8 +59,8 @@ const Small = (props) => {
 		.filter((classString) => classString)
 		.join(" ");
 
-	const PromoImage = () =>
-		showImageSM ? (
+	const promoImage = showImageSM
+		? (
 			<Conditional component={Link} condition={linkURL} href={formatURL(linkURL)} assistiveHidden>
 				<MediaItem>
 					<Image {...imageParams} />
@@ -67,8 +68,8 @@ const Small = (props) => {
 			</Conditional>
 		) : null;
 
-	const PromoHeading = () =>
-		showHeadlineSM && headline ? (
+	const promoHeading = showHeadlineSM && headline
+		? (
 			<Heading>
 				<Conditional component={Link} condition={linkURL} href={formatURL(linkURL)}>
 					{headline}
@@ -81,13 +82,13 @@ const Small = (props) => {
 			<Grid as="article" className={containerClassNames}>
 				{["below", "right"].includes(imagePosition) ? (
 					<>
-						<PromoHeading />
-						<PromoImage />
+						{ promoHeading }
+						{ promoImage }
 					</>
 				) : (
 					<>
-						<PromoImage />
-						<PromoHeading />
+						{ promoImage }
+						{ promoHeading }
 					</>
 				)}
 				{showBottomBorder ? <Divider /> : null}
diff --git a/blocks/top-table-list-block/features/top-table-list/default.jsx b/blocks/top-table-list-block/features/top-table-list/default.jsx
index 907dc2e1a2..a2ee366fa0 100644
--- a/blocks/top-table-list-block/features/top-table-list/default.jsx
+++ b/blocks/top-table-list-block/features/top-table-list/default.jsx
@@ -145,12 +145,16 @@ const TopTableListWrapper = ({ customFields }) => {
         }
         promo_items {
           basic {
-				_id
-            type
-            url
-				auth {
-					${RESIZER_TOKEN_VERSION}
-				}
+			_id
+			auth {
+				${RESIZER_TOKEN_VERSION}
+			}
+			focal_point {
+				x
+				y
+			}
+			type
+			url
           }
           lead_art {
 				_id
@@ -158,12 +162,16 @@ const TopTableListWrapper = ({ customFields }) => {
             embed_html
             promo_items {
               basic {
-					 _id
-                type
-                url
-					 auth {
-						${RESIZER_TOKEN_VERSION}
-					}
+				_id
+				auth {
+					${RESIZER_TOKEN_VERSION}
+				}
+				focal_point {
+					x
+					y
+				}
+				type
+				url
               }
             }
           }
diff --git a/package-lock.json b/package-lock.json
index 0320fdd065..ce95ba4b6d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8684,9 +8684,9 @@
 			"link": true
 		},
 		"node_modules/@wpmedia/arc-themes-components": {
-			"version": "0.0.4-arc-themes-release-version-2-1-4.4",
-			"resolved": "https://npm.pkg.github.com/download/@WPMedia/arc-themes-components/0.0.4-arc-themes-release-version-2-1-4.4/7033b5b5a0a5cbba4062967ba039e18ace7a1980",
-			"integrity": "sha512-3RgeYdnzjhNeVWTu0QcMhZ/kCCm7Y9eE1e+jMNLE/m0I75mOIxwlepFwv2+yeAEPJ2FjtjV+OZJYHCuMAMk9yw==",
+			"version": "0.0.4-arc-themes-release-version-2-2-0.1",
+			"resolved": "https://npm.pkg.github.com/download/@WPMedia/arc-themes-components/0.0.4-arc-themes-release-version-2-2-0.1/60e2bba0f78527c5d536707a15f2cb02effc0d10",
+			"integrity": "sha512-LKznamo1Tq67lW9SICkZdsKFlHFr9I3gPa+6o2TS3R77xDrTdhO/X2BKz+D9ujXc1gQUU4iHRL9+ta6Tw/Mdrg==",
 			"license": "CC-BY-NC-ND-4.0",
 			"dependencies": {
 				"@arc-publishing/sdk-identity": "^1.79.0",