@elementor/editor-audits 4.4.0-1105 → 4.4.0-1106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-audits",
-  "version": "4.4.0-1105",
+  "version": "4.4.0-1106",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,19 +39,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.4.0-1105",
-    "@elementor/editor-mcp": "4.4.0-1105",
-    "@elementor/editor-app-bar": "4.4.0-1105",
-    "@elementor/editor-elements": "4.4.0-1105",
-    "@elementor/editor-floating-panels": "4.4.0-1105",
-    "@elementor/editor-notifications": "4.4.0-1105",
-    "@elementor/editor-v1-adapters": "4.4.0-1105",
-    "@elementor/events": "4.4.0-1105",
-    "@elementor/http-client": "4.4.0-1105",
+    "@elementor/editor": "4.4.0-1106",
+    "@elementor/editor-mcp": "4.4.0-1106",
+    "@elementor/editor-app-bar": "4.4.0-1106",
+    "@elementor/editor-elements": "4.4.0-1106",
+    "@elementor/editor-floating-panels": "4.4.0-1106",
+    "@elementor/editor-notifications": "4.4.0-1106",
+    "@elementor/editor-props": "4.4.0-1106",
+    "@elementor/editor-styles": "4.4.0-1106",
+    "@elementor/editor-v1-adapters": "4.4.0-1106",
+    "@elementor/events": "4.4.0-1106",
+    "@elementor/http-client": "4.4.0-1106",
     "@elementor/icons": "~1.77.0",
-    "@elementor/locations": "4.4.0-1105",
-    "@elementor/session": "4.4.0-1105",
-    "@elementor/store": "4.4.0-1105",
+    "@elementor/locations": "4.4.0-1106",
+    "@elementor/session": "4.4.0-1106",
+    "@elementor/store": "4.4.0-1106",
     "@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/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/runner.ts

@@ -12,14 +12,14 @@ import {
 	type PageAuditReport,
 } from './types';
 import { computeReport } from './utils/compute-report';
-import { extractAttachmentIds } from './utils/page-attachments';
+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 );

package/src/types.ts

@@ -46,8 +46,9 @@ 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;

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

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

@@ -0,0 +1,32 @@
+import { type ElementSnapshotNode } from '../types';
+import { type ImageLikeMedia } from './image-like-sources';
+import { walkElements } from './walk';
+
+const BACKGROUND_IMAGE_SETTING_KEYS = [
+	'background_image',
+	'background_hover_image',
+	'background_overlay_image',
+	'background_overlay_hover_image',
+	'_background_image',
+	'_background_hover_image',
+] as const;
+
+export type BackgroundImageSourceVisit = {
+	node: ElementSnapshotNode;
+	media: ImageLikeMedia;
+};
+
+export function walkBackgroundImageSources(
+	tree: ElementSnapshotNode[],
+	visit: ( source: BackgroundImageSourceVisit ) => void
+): void {
+	walkElements( tree, ( node ) => {
+		for ( const key of BACKGROUND_IMAGE_SETTING_KEYS ) {
+			const media = node.settings[ key ] as ImageLikeMedia | undefined;
+
+			if ( media?.id || media?.url ) {
+				visit( { node, media } );
+			}
+		}
+	} );
+}

package/src/utils/image-alt.ts

@@ -1,5 +1,6 @@
 import { type PageContextResponse } from '../types';
 import { type ImageLikeMedia } from './image-like-sources';
+import { buildImageSizeKey } from './image-size-key';
 
 export function hasMeaningfulAlt( media: ImageLikeMedia, pageContext: PageContextResponse ): boolean {
 	if ( ! media.id && ! media.url ) {
@@ -7,7 +8,8 @@ export function hasMeaningfulAlt( media: ImageLikeMedia, pageContext: PageContex
 	}
 
 	if ( media.id ) {
-		const alt = pageContext.image_sizes[ media.id ]?.alt ?? '';
+		const key = buildImageSizeKey( { id: media.id, size: media.size } );
+		const alt = pageContext.image_sizes[ key ]?.alt ?? '';
 		return alt.trim().length > 0;
 	}
 

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

@@ -7,6 +7,7 @@ export type ImageLikeMedia = {
 	id?: number;
 	url?: string;
 	alt?: string;
+	size?: string;
 };
 
 export type ImageLikeSourceVisit = {
@@ -51,7 +52,7 @@ function collectMediaFromNode( node: ElementSnapshotNode ): ImageLikeMedia[] {
 	const image = node.settings.image as ImageLikeMedia | undefined;
 
 	if ( image?.id || image?.url ) {
-		sources.push( image );
+		sources.push( { ...image, size: node.settings.image_size as string | undefined } );
 	}
 
 	const gallery = ( node.settings.carousel ?? node.settings.gallery ?? node.settings.wp_gallery ) as
@@ -59,9 +60,11 @@ function collectMediaFromNode( node: ElementSnapshotNode ): ImageLikeMedia[] {
 		| undefined;
 
 	if ( Array.isArray( gallery ) ) {
+		const gallerySize = node.settings.thumbnail_size as string | undefined;
+
 		for ( const item of gallery ) {
 			if ( item?.id || item?.url ) {
-				sources.push( item );
+				sources.push( { ...item, size: gallerySize } );
 			}
 		}
 	}

package/src/utils/image-size-key.ts

@@ -0,0 +1,8 @@
+export type ImageSizeRequest = {
+	id: number;
+	size?: string;
+};
+
+export function buildImageSizeKey( { id, size }: ImageSizeRequest ): string {
+	return `${ id }:${ size || 'full' }`;
+}

package/src/utils/page-attachments.ts

@@ -1,14 +1,23 @@
 import { type ElementSnapshotNode } from '../types';
-import { walkImageLikeSources } from './image-like-sources';
+import { walkAtomicBackgroundImageSources } from './atomic-background-image-sources';
+import { walkAtomicImageSources } from './atomic-image-sources';
+import { walkBackgroundImageSources } from './background-image-sources';
+import { type ImageLikeMedia, walkImageLikeSources } from './image-like-sources';
+import { buildImageSizeKey } from './image-size-key';
 
-export function extractAttachmentIds( tree: ElementSnapshotNode[] ): number[] {
-	const ids = new Set< number >();
+export function extractImageSizeRequests( tree: ElementSnapshotNode[] ): string[] {
+	const keys = new Set< string >();
 
-	walkImageLikeSources( tree, ( { media } ) => {
+	const collect = ( media: ImageLikeMedia ) => {
 		if ( media.id ) {
-			ids.add( media.id );
+			keys.add( buildImageSizeKey( { id: media.id, size: media.size } ) );
 		}
-	} );
+	};
 
-	return Array.from( ids ).sort( ( a, b ) => a - b );
+	walkImageLikeSources( tree, ( { media } ) => collect( media ) );
+	walkBackgroundImageSources( tree, ( { media } ) => collect( media ) );
+	walkAtomicImageSources( tree, ( { media } ) => collect( media ) );
+	walkAtomicBackgroundImageSources( tree, ( { media } ) => collect( media ) );
+
+	return Array.from( keys ).sort();
 }