@elementor/editor-audits 4.3.2 → 4.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-audits",
-  "version": "4.3.2",
+  "version": "4.3.4",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,19 +39,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.2",
-    "@elementor/editor-mcp": "4.3.2",
-    "@elementor/editor-app-bar": "4.3.2",
-    "@elementor/editor-elements": "4.3.2",
-    "@elementor/editor-floating-panels": "4.3.2",
-    "@elementor/editor-notifications": "4.3.2",
-    "@elementor/editor-v1-adapters": "4.3.2",
-    "@elementor/events": "4.3.2",
-    "@elementor/http-client": "4.3.2",
+    "@elementor/editor": "4.3.4",
+    "@elementor/editor-mcp": "4.3.4",
+    "@elementor/editor-app-bar": "4.3.4",
+    "@elementor/editor-elements": "4.3.4",
+    "@elementor/editor-floating-panels": "4.3.4",
+    "@elementor/editor-notifications": "4.3.4",
+    "@elementor/editor-props": "4.3.4",
+    "@elementor/editor-styles": "4.3.4",
+    "@elementor/editor-v1-adapters": "4.3.4",
+    "@elementor/events": "4.3.4",
+    "@elementor/http-client": "4.3.4",
     "@elementor/icons": "~1.77.0",
-    "@elementor/locations": "4.3.2",
-    "@elementor/session": "4.3.2",
-    "@elementor/store": "4.3.2",
+    "@elementor/locations": "4.3.4",
+    "@elementor/session": "4.3.4",
+    "@elementor/store": "4.3.4",
     "@elementor/ui": "1.37.5"
   },
   "peerDependencies": {

package/src/api/page-context-client.ts

@@ -4,13 +4,16 @@ import { type PageContextResponse } from '../types';
 import { isNonceInvalidError, refreshAuditsNonce } from '../utils/session-expiration';
 import { getWindowConfig } from '../utils/window-config';
 
-export async function fetchPageContext( documentId: number, attachmentIds: number[] ): Promise< PageContextResponse > {
-	return requestPageContext( documentId, attachmentIds, true );
+export async function fetchPageContext(
+	documentId: number,
+	imageSizeRequests: string[]
+): Promise< PageContextResponse > {
+	return requestPageContext( documentId, imageSizeRequests, true );
 }
 
 async function requestPageContext(
 	documentId: number,
-	attachmentIds: number[],
+	imageSizeRequests: string[],
 	allowNonceRetry: boolean
 ): Promise< PageContextResponse > {
 	const { restNamespace, nonce } = getWindowConfig();
@@ -20,7 +23,7 @@ async function requestPageContext(
 		const response = await httpService().get< PageContextResponse >( url, {
 			params: {
 				document_id: documentId,
-				attachment_ids: attachmentIds,
+				image_size_requests: imageSizeRequests,
 			},
 			headers: { 'X-WP-Nonce': nonce },
 		} );
@@ -33,6 +36,6 @@ async function requestPageContext(
 
 		await refreshAuditsNonce();
 
-		return requestPageContext( documentId, attachmentIds, false );
+		return requestPageContext( documentId, imageSizeRequests, false );
 	}
 }

package/src/audits/accessibility-statement.ts

@@ -0,0 +1,39 @@
+import { __ } from '@wordpress/i18n';
+
+import { type Audit } from '../types';
+
+export const audit: Audit = {
+	id: 'audits/accessibility-statement',
+	title: __( 'Create an accessibility statement', 'elementor' ),
+	description: __(
+		'An accessibility statement showcases your efforts to create an inclusive online space, highlighting helpful features and a commitment to accessibility.',
+		'elementor'
+	),
+	fixHint: __( 'Use Ally to create and publish an accessibility statement for your site.', 'elementor' ),
+	categories: [ 'accessibility' ],
+	severity: 'info',
+	weight: 1,
+	evaluate: ( ctx ) => {
+		const isReady = ctx.pageContext.ally_plugin_active;
+
+		if ( isReady && ctx.pageContext.ally_accessibility_statement_created ) {
+			return { status: 'pass' };
+		}
+
+		return {
+			status: 'fail',
+			violations: [
+				{
+					auditId: audit.id,
+					label: __( 'No accessibility statement has been created for this site.', 'elementor' ),
+					externalUrl: isReady
+						? ctx.pageContext.ally_accessibility_statement_url
+						: ctx.pageContext.ally_plugin_url,
+					ctaLabel: isReady ? __( 'Create', 'elementor' ) : undefined,
+					secondaryCtaLabel: __( 'Learn more', 'elementor' ),
+					secondaryCtaUrl: 'https://go.elementor.com/acc-plg-learn-more',
+				},
+			],
+		};
+	},
+};

package/src/audits/accessibility-widget.ts

@@ -0,0 +1,41 @@
+import { __ } from '@wordpress/i18n';
+
+import { type Audit } from '../types';
+import { hasAccessibilityWidgetScript } from '../utils/scan-accessibility-widgets';
+
+export const audit: Audit = {
+	id: 'audits/accessibility-widget',
+	title: __( 'Add an accessibility widget', 'elementor' ),
+	description: __( 'Make your site more inclusive by adding an accessibility widget.', 'elementor' ),
+	fixHint: __( 'Activate Ally’s accessibility widget to give visitors on-page accessibility tools.', 'elementor' ),
+	categories: [ 'accessibility' ],
+	severity: 'info',
+	weight: 1,
+	evaluate: ( ctx ) => {
+		if ( ! ctx.pageContext.frontend_url ) {
+			return { status: 'skipped', reason: __( 'Page is not published.', 'elementor' ) };
+		}
+
+		if ( ! ctx.renderedHtml ) {
+			return { status: 'skipped', reason: __( 'Could not fetch the published page.', 'elementor' ) };
+		}
+
+		if ( hasAccessibilityWidgetScript( ctx.renderedHtml ) ) {
+			return { status: 'pass' };
+		}
+
+		const isReady = ctx.pageContext.ally_plugin_active;
+
+		return {
+			status: 'fail',
+			violations: [
+				{
+					auditId: audit.id,
+					label: __( 'No accessibility widget is active on this site.', 'elementor' ),
+					externalUrl: isReady ? ctx.pageContext.ally_widget_settings_url : ctx.pageContext.ally_plugin_url,
+					ctaLabel: __( 'Activate', 'elementor' ),
+				},
+			],
+		};
+	},
+};

package/src/audits/google-consent-mode.ts

@@ -1,7 +1,6 @@
 import { __ } from '@wordpress/i18n';
 
 import { type Audit } from '../types';
-import { fetchRenderedHtml } from '../utils/fetch-rendered-html';
 import { hasConsentDefaultCall, hasGoogleTracking } from '../utils/scan-consent-signals';
 
 export const audit: Audit = {
@@ -18,22 +17,20 @@ export const audit: Audit = {
 	categories: [ 'compliance' ],
 	severity: 'warning',
 	weight: 1,
-	evaluate: async ( ctx ) => {
+	evaluate: ( ctx ) => {
 		if ( ! ctx.pageContext.frontend_url ) {
 			return { status: 'skipped', reason: __( 'Page is not published.', 'elementor' ) };
 		}
 
-		const html = await fetchRenderedHtml( ctx.pageContext.frontend_url );
-
-		if ( ! html ) {
+		if ( ! ctx.renderedHtml ) {
 			return { status: 'skipped', reason: __( 'Could not fetch the published page.', 'elementor' ) };
 		}
 
-		if ( ! hasGoogleTracking( html ) ) {
+		if ( ! hasGoogleTracking( ctx.renderedHtml ) ) {
 			return { status: 'skipped', reason: __( 'No Google tracking product detected.', 'elementor' ) };
 		}
 
-		if ( hasConsentDefaultCall( html ) ) {
+		if ( hasConsentDefaultCall( ctx.renderedHtml ) ) {
 			return { status: 'pass' };
 		}
 

package/src/audits/images-inefficient-format.ts

@@ -0,0 +1,67 @@
+import { __ } from '@wordpress/i18n';
+
+import { type Audit, type AuditViolation, type ElementSnapshotNode } from '../types';
+import { walkAtomicBackgroundImageSources } from '../utils/atomic-background-image-sources';
+import { walkAtomicImageSources } from '../utils/atomic-image-sources';
+import { walkBackgroundImageSources } from '../utils/background-image-sources';
+import { type ImageLikeMedia, walkImageLikeSources } from '../utils/image-like-sources';
+import { buildImageSizeKey } from '../utils/image-size-key';
+
+const LEGACY_RASTER_MIME_TYPES = new Set( [ 'image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/tiff' ] );
+
+export const audit: Audit = {
+	id: 'audits/images-inefficient-format',
+	title: __( 'Inefficient image format', 'elementor' ),
+	description: __( "Image isn't served in a modern, efficient format like WebP or AVIF.", 'elementor' ),
+	fixHint: __( 'Convert the image to a modern format like WebP or AVIF, or enable image optimization.', 'elementor' ),
+	categories: [ 'performance' ],
+	severity: 'info',
+	weight: 1,
+	evaluate: ( ctx ) => {
+		const offendingElementIds = new Set< string >();
+		let hasAnyImage = false;
+		let inefficientImageFormatCount = 0;
+
+		const evaluateSource = ( node: ElementSnapshotNode, media: ImageLikeMedia ) => {
+			if ( media.id || media.url ) {
+				hasAnyImage = true;
+			}
+
+			const id = media.id;
+
+			if ( ! id ) {
+				return;
+			}
+
+			const mime = ctx.pageContext.image_sizes[ buildImageSizeKey( { id, size: media.size } ) ]?.mime;
+
+			if ( ! mime || ! LEGACY_RASTER_MIME_TYPES.has( mime ) ) {
+				return;
+			}
+
+			inefficientImageFormatCount++;
+			offendingElementIds.add( node.id );
+		};
+
+		walkImageLikeSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+		walkBackgroundImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+		walkAtomicImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+		walkAtomicBackgroundImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+
+		if ( ! hasAnyImage ) {
+			return { status: 'skipped', reason: __( 'No images', 'elementor' ) };
+		}
+
+		const violations: AuditViolation[] = Array.from( offendingElementIds ).map( ( elementId ) => ( {
+			auditId: audit.id,
+			elementId,
+			targetHint: 'element-settings' as const,
+			label: __( "Image isn't served in a modern format like WebP or AVIF.", 'elementor' ),
+			externalUrl: ctx.pageContext.image_optimization_plugin_url,
+		} ) );
+
+		return violations.length === 0
+			? { status: 'pass' }
+			: { status: 'fail', violations, metadata: { inefficientImageFormatCount } };
+	},
+};

package/src/audits/images-too-large.ts

@@ -1,7 +1,11 @@
 import { __, sprintf } from '@wordpress/i18n';
 
-import { type Audit, type AuditViolation } from '../types';
-import { hasPageImages, walkImageLikeSources } from '../utils/image-like-sources';
+import { type Audit, type AuditViolation, type ElementSnapshotNode } from '../types';
+import { walkAtomicBackgroundImageSources } from '../utils/atomic-background-image-sources';
+import { walkAtomicImageSources } from '../utils/atomic-image-sources';
+import { walkBackgroundImageSources } from '../utils/background-image-sources';
+import { type ImageLikeMedia, walkImageLikeSources } from '../utils/image-like-sources';
+import { buildImageSizeKey } from '../utils/image-size-key';
 
 const SIZE_THRESHOLD_BYTES = 500 * 1024;
 const BYTES_PER_KB = 1024;
@@ -15,21 +19,22 @@ export const audit: Audit = {
 	severity: 'warning',
 	weight: 7,
 	evaluate: ( ctx ) => {
-		if ( ! hasPageImages( ctx.elements.tree ) ) {
-			return { status: 'skipped', reason: __( 'No images', 'elementor' ) };
-		}
-
 		const widgetMaxKb = new Map< string, number >();
 		let oversizedImageCount = 0;
+		let hasAnyImage = false;
+
+		const evaluateSource = ( node: ElementSnapshotNode, media: ImageLikeMedia ) => {
+			if ( media.id || media.url ) {
+				hasAnyImage = true;
+			}
 
-		walkImageLikeSources( ctx.elements.tree, ( { node, media } ) => {
 			const id = media.id;
 
 			if ( ! id ) {
 				return;
 			}
 
-			const size = ctx.pageContext.image_sizes[ id ];
+			const size = ctx.pageContext.image_sizes[ buildImageSizeKey( { id, size: media.size } ) ];
 
 			if ( ! size || size.filesize_bytes <= SIZE_THRESHOLD_BYTES ) {
 				return;
@@ -40,7 +45,16 @@ export const audit: Audit = {
 			const kb = Math.round( size.filesize_bytes / BYTES_PER_KB );
 			const currentMax = widgetMaxKb.get( node.id ) ?? 0;
 			widgetMaxKb.set( node.id, Math.max( currentMax, kb ) );
-		} );
+		};
+
+		walkImageLikeSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+		walkBackgroundImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+		walkAtomicImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+		walkAtomicBackgroundImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+
+		if ( ! hasAnyImage ) {
+			return { status: 'skipped', reason: __( 'No images', 'elementor' ) };
+		}
 
 		const violations: AuditViolation[] = Array.from( widgetMaxKb.entries() ).map( ( [ elementId, kb ] ) => ( {
 			auditId: audit.id,

package/src/audits/page-title.ts

@@ -24,6 +24,10 @@ export const audit: Audit = {
 						label: __( 'Page has no title.', 'elementor' ),
 						targetHint: 'page-settings',
 						angieFix: true,
+						angiePrompt: __(
+							"Based on this page's contents, generate a title for this page.",
+							'elementor'
+						),
 					},
 				],
 			};

package/src/components/violation-cta-button.tsx

@@ -4,9 +4,10 @@ import { Button } from '@elementor/ui';
 type Props = {
 	ctaLabel: string;
 	externalUrl: string;
+	variant?: 'outlined' | 'text';
 };
 
-export default function ViolationCtaButton( { ctaLabel, externalUrl }: Props ) {
+export default function ViolationCtaButton( { ctaLabel, externalUrl, variant = 'outlined' }: Props ) {
 	const handleClick = ( event: React.MouseEvent< HTMLButtonElement > ) => {
 		event.stopPropagation();
 		event.preventDefault();
@@ -15,7 +16,7 @@ export default function ViolationCtaButton( { ctaLabel, externalUrl }: Props ) {
 	};
 
 	return (
-		<Button variant="outlined" color="secondary" size="small" onClick={ handleClick }>
+		<Button variant={ variant } color="secondary" size="small" onClick={ handleClick }>
 			{ ctaLabel }
 		</Button>
 	);

package/src/components/violation-row.tsx

@@ -159,13 +159,24 @@ export default function ViolationRow( { audit, skipReason, violations }: Props )
 										) }
 									</Box>
 									{ violation.angieFix && (
-										<FixViolationWithAngie prompt={ buildAngiePrompt( rowLabel ) } />
+										<FixViolationWithAngie
+											prompt={ violation.angiePrompt ?? buildAngiePrompt( rowLabel ) }
+										/>
 									) }
 									{ violation.ctaLabel && violation.externalUrl ? (
-										<ViolationCtaButton
-											ctaLabel={ violation.ctaLabel }
-											externalUrl={ violation.externalUrl }
-										/>
+										<Box sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
+											<ViolationCtaButton
+												ctaLabel={ violation.ctaLabel }
+												externalUrl={ violation.externalUrl }
+											/>
+											{ violation.secondaryCtaLabel && violation.secondaryCtaUrl && (
+												<ViolationCtaButton
+													ctaLabel={ violation.secondaryCtaLabel }
+													externalUrl={ violation.secondaryCtaUrl }
+													variant="text"
+												/>
+											) }
+										</Box>
 									) : (
 										<EyeIcon
 											className="violation-hover-icon"

package/src/register-audits.ts

@@ -1,4 +1,6 @@
 import * as accessibilityPolicy from './audits/accessibility-policy';
+import * as accessibilityStatement from './audits/accessibility-statement';
+import * as accessibilityWidget from './audits/accessibility-widget';
 import * as cookiePolicy from './audits/cookie-policy';
 import * as deepNesting from './audits/deep-nesting';
 import * as defaultDesignSystem from './audits/default-design-system';
@@ -7,6 +9,7 @@ import * as googleConsentMode from './audits/google-consent-mode';
 import * as headingStructure from './audits/heading-structure';
 import * as hiddenElements from './audits/hidden-elements';
 import * as imagesAltText from './audits/images-alt-text';
+import * as imagesInefficientFormat from './audits/images-inefficient-format';
 import * as imagesTooLarge from './audits/images-too-large';
 import * as nestedBoxedContainers from './audits/nested-boxed-containers';
 import * as pageExcerpt from './audits/page-excerpt';
@@ -43,11 +46,14 @@ const AUDITS: Audit[] = [
 	headingStructure.audit,
 	imagesAltText.audit,
 	imagesTooLarge.audit,
+	imagesInefficientFormat.audit,
 
 	robotsNoindex.audit,
 
 	privacyPolicy.audit,
 	accessibilityPolicy.audit,
+	accessibilityStatement.audit,
+	accessibilityWidget.audit,
 	cookiePolicy.audit,
 	scanForCookies.audit,
 	googleConsentMode.audit,

package/src/register-promotions.ts

@@ -80,4 +80,27 @@ export const PROMOTIONS: PromotionConfig[] = [
 		},
 		getCtaUrl: firstFailExternalUrl,
 	},
+	{
+		auditId: 'audits/images-inefficient-format',
+		icon: ShieldHalfFilledIcon,
+		ctaLabel: __( 'Optimize all', 'elementor' ),
+		formatSubtitle: ( run ) => {
+			if ( run.result.status !== 'fail' ) {
+				return null;
+			}
+
+			const count = run.result.metadata?.inefficientImageFormatCount ?? 0;
+
+			if ( count === 0 ) {
+				return null;
+			}
+
+			return sprintf(
+				/* translators: %d: number of images served in an inefficient format. */
+				_n( '%d image', '%d images', count, 'elementor' ),
+				count
+			);
+		},
+		getCtaUrl: firstFailExternalUrl,
+	},
 ];

package/src/runner.ts

@@ -12,19 +12,23 @@ import {
 	type PageAuditReport,
 } from './types';
 import { computeReport } from './utils/compute-report';
-import { extractAttachmentIds } from './utils/page-attachments';
+import { fetchRenderedHtml } from './utils/fetch-rendered-html';
+import { extractImageSizeRequests } from './utils/page-attachments';
 import { readKitSnapshot } from './utils/read-kit-snapshot';
 import { buildSnapshotTree } from './utils/v1-snapshot';
 
 export async function runPageAudit( documentId: number ): Promise< PageAuditReport > {
 	const tree = buildSnapshotTree( getElements() );
-	const attachmentIds = extractAttachmentIds( tree );
-	const pageContext = await fetchPageContext( documentId, attachmentIds );
+	const imageSizeRequests = extractImageSizeRequests( tree );
+	const pageContext = await fetchPageContext( documentId, imageSizeRequests );
 
 	const elements: ElementsModelSnapshot = { documentId, tree };
-	const kit: KitSnapshot = await readKitSnapshot( pageContext.kit_id );
+	const [ kit, renderedHtml ]: [ KitSnapshot, string | null ] = await Promise.all( [
+		readKitSnapshot( pageContext.kit_id ),
+		fetchRenderedHtml( pageContext.frontend_url ),
+	] );
 
-	const ctx: AuditContext = { documentId, elements, pageContext, kit };
+	const ctx: AuditContext = { documentId, elements, pageContext, kit, renderedHtml };
 	const registered = getRegisteredAudits();
 
 	const auditResults: AuditRun[] = await Promise.all(

package/src/types.ts

@@ -23,6 +23,7 @@ export type AuditRun = {
 export type AuditFailMetadata = {
 	missingAltImageCount?: number;
 	oversizedImageCount?: number;
+	inefficientImageFormatCount?: number;
 };
 
 export type AuditResult =
@@ -38,15 +39,19 @@ export type AuditViolation = {
 	label: string;
 	detail?: string;
 	angieFix?: boolean;
+	angiePrompt?: string;
 	ctaLabel?: string;
+	secondaryCtaLabel?: string;
+	secondaryCtaUrl?: string;
 };
 
 export type PageContextResponse = {
 	post_title: string | null;
 	post_excerpt: string | null;
 	featured_image_id: number | null;
+	/** Keyed by the composite `buildImageSizeKey` result (`"{attachmentId}:{size}"`), since one attachment can resolve to different files at different sizes. */
 	image_sizes: Record<
-		number,
+		string,
 		{
 			width: number;
 			height: number;
@@ -64,6 +69,9 @@ export type PageContextResponse = {
 	privacy_settings_url: string;
 	ally_plugin_active: boolean;
 	ally_plugin_url: string;
+	ally_accessibility_statement_created: boolean;
+	ally_accessibility_statement_url: string;
+	ally_widget_settings_url: string;
 	cookiez_plugin_active: boolean;
 	cookiez_plugin_url: string;
 	cookiez_plugin_installed: boolean;
@@ -107,6 +115,7 @@ export type AuditContext = {
 	elements: ElementsModelSnapshot;
 	pageContext: PageContextResponse;
 	kit: KitSnapshot;
+	renderedHtml: string | null;
 };
 
 export type PageAuditReport = {

package/src/utils/atomic-background-image-sources.ts

@@ -0,0 +1,56 @@
+import { getElementStyles } from '@elementor/editor-elements';
+import {
+	backgroundImageOverlayPropTypeUtil,
+	backgroundOverlayPropTypeUtil,
+	backgroundPropTypeUtil,
+} from '@elementor/editor-props';
+import { type StyleDefinition } from '@elementor/editor-styles';
+
+import { type ElementSnapshotNode } from '../types';
+import { extractAtomicImageMedia } from './atomic-image-sources';
+import { type ImageLikeMedia } from './image-like-sources';
+import { walkElements } from './walk';
+
+export type AtomicBackgroundImageSourceVisit = {
+	node: ElementSnapshotNode;
+	media: ImageLikeMedia;
+};
+
+export function walkAtomicBackgroundImageSources(
+	tree: ElementSnapshotNode[],
+	visit: ( source: AtomicBackgroundImageSourceVisit ) => void
+): void {
+	walkElements( tree, ( node ) => {
+		const styles = getElementStyles( node.id );
+
+		if ( ! styles ) {
+			return;
+		}
+
+		for ( const media of extractBackgroundImageMedia( styles ) ) {
+			visit( { node, media } );
+		}
+	} );
+}
+
+function extractBackgroundImageMedia( styles: Record< string, StyleDefinition > ): ImageLikeMedia[] {
+	const sources: ImageLikeMedia[] = [];
+
+	for ( const style of Object.values( styles ) ) {
+		for ( const variant of style.variants ) {
+			const background = backgroundPropTypeUtil.extract( variant.props.background );
+			const overlays = backgroundOverlayPropTypeUtil.extract( background?.[ 'background-overlay' ] ) ?? [];
+
+			for ( const overlay of overlays ) {
+				const imageOverlay = backgroundImageOverlayPropTypeUtil.extract( overlay );
+				const media = extractAtomicImageMedia( imageOverlay?.image );
+
+				if ( media ) {
+					sources.push( media );
+				}
+			}
+		}
+	}
+
+	return sources;
+}

package/src/utils/atomic-image-sources.ts

@@ -0,0 +1,62 @@
+import {
+	imageAttachmentIdPropType,
+	imagePropTypeUtil,
+	imageSrcPropTypeUtil,
+	stringPropTypeUtil,
+	urlPropTypeUtil,
+} from '@elementor/editor-props';
+
+import { type ElementSnapshotNode } from '../types';
+import { type ImageLikeMedia } from './image-like-sources';
+import { walkElements } from './walk';
+
+const ATOMIC_IMAGE_PROP_KEYS = [ 'image', 'poster' ] as const;
+
+export type AtomicImageSourceVisit = {
+	node: ElementSnapshotNode;
+	media: ImageLikeMedia;
+};
+
+export function walkAtomicImageSources(
+	tree: ElementSnapshotNode[],
+	visit: ( source: AtomicImageSourceVisit ) => void
+): void {
+	walkElements( tree, ( node ) => {
+		if ( node.elType !== 'widget' ) {
+			return;
+		}
+
+		for ( const key of ATOMIC_IMAGE_PROP_KEYS ) {
+			const media = extractAtomicImageMedia( node.settings[ key ] );
+
+			if ( media ) {
+				visit( { node, media } );
+			}
+		}
+	} );
+}
+
+export function extractAtomicImageMedia( imageProp: unknown ): ImageLikeMedia | null {
+	const image = imagePropTypeUtil.extract( imageProp );
+
+	if ( ! image ) {
+		return null;
+	}
+
+	const src = imageSrcPropTypeUtil.extract( image.src );
+
+	if ( ! src ) {
+		return null;
+	}
+
+	const id = imageAttachmentIdPropType.extract( src.id ) ?? undefined;
+	const url = urlPropTypeUtil.extract( src.url ) ?? undefined;
+
+	if ( ! id && ! url ) {
+		return null;
+	}
+
+	const size = stringPropTypeUtil.extract( image.size ) ?? undefined;
+
+	return { id, url, size };
+}