@elementor/editor-audits 4.3.4 → 4.3.5

package/src/components/rescan-button.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useFloatingPanelZIndex } from '@elementor/editor-floating-panels';
+import { ReloadIcon } from '@elementor/icons';
+import { Badge, Button, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { AUDIT_PANEL_ID } from '../constants';
+
+type Props = {
+	hasScanned: boolean;
+	isStale: boolean;
+	disabled: boolean;
+	onClick: () => void;
+};
+
+export default function RescanButton( { hasScanned, isStale, disabled, onClick }: Props ) {
+	const panelZIndex = useFloatingPanelZIndex( AUDIT_PANEL_ID );
+
+	return (
+		<Tooltip
+			title={ __( 'Page content changed - rescan advised', 'elementor' ) }
+			disableHoverListener={ ! isStale }
+			PopperProps={ { sx: { zIndex: panelZIndex } } }
+		>
+			<Badge variant="dot" color="warning" invisible={ ! isStale } overlap="rectangular">
+				<Button
+					variant="contained"
+					size="small"
+					startIcon={ hasScanned ? <ReloadIcon fontSize="small" /> : undefined }
+					onClick={ onClick }
+					disabled={ disabled }
+				>
+					{ hasScanned ? __( 'Rescan', 'elementor' ) : __( 'Run page audit', 'elementor' ) }
+				</Button>
+			</Badge>
+		</Tooltip>
+	);
+}

package/src/components/severity-icons.tsx

@@ -20,7 +20,11 @@ type Props = {
 	severity: AuditSeverity;
 };
 
+const INFO_ICON_VERTICAL_NUDGE = 'translateY(-2px)';
+
 export default function SeverityIcon( { severity }: Props ) {
 	const { Icon, color } = SEVERITY_CONFIG[ severity ];
-	return <Icon fontSize="small" color={ color } />;
+	const sx = 'info' === severity ? { transform: INFO_ICON_VERTICAL_NUDGE } : undefined;
+
+	return <Icon fontSize="small" color={ color } sx={ sx } />;
 }

package/src/components/severity-summary-cards.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Box, Typography } from '@elementor/ui';
+
+import { type AuditSeverity, type PageAuditReport } from '../types';
+import { ALL_SEVERITIES, countSeverities, severityPluralLabel } from '../utils/severity-counts';
+import SeverityIcon from './severity-icons';
+
+type Props = {
+	report: PageAuditReport;
+};
+
+export default function SeveritySummaryCards( { report }: Props ) {
+	const counts = countSeverities( report );
+
+	return (
+		<Box display="flex" gap={ 1.5 }>
+			{ ALL_SEVERITIES.map( ( severity ) => (
+				<SeverityCard key={ severity } severity={ severity } count={ counts[ severity ] } />
+			) ) }
+		</Box>
+	);
+}
+
+type SeverityCardProps = {
+	severity: AuditSeverity;
+	count: number;
+};
+
+function SeverityCard( { severity, count }: SeverityCardProps ) {
+	return (
+		<Box
+			display="flex"
+			flex={ 1 }
+			flexDirection="column"
+			gap={ 1 }
+			bgcolor="action.hover"
+			borderRadius={ 1.5 }
+			px={ 1.5 }
+			py={ 1 }
+		>
+			<SeverityIcon severity={ severity } />
+			<Box display="flex" flexDirection="column">
+				<Typography variant="h5" fontWeight={ 700 } component="span">
+					{ count }
+				</Typography>
+				<Typography variant="caption" color="text.secondary">
+					{ severityPluralLabel( severity ) }
+				</Typography>
+			</Box>
+		</Box>
+	);
+}

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

@@ -1,13 +1,15 @@
 import * as React from 'react';
+import { WandIcon } from '@elementor/icons';
 import { Button } from '@elementor/ui';
 
 type Props = {
 	ctaLabel: string;
 	externalUrl: string;
 	variant?: 'outlined' | 'text';
+	withIcon?: boolean;
 };
 
-export default function ViolationCtaButton( { ctaLabel, externalUrl, variant = 'outlined' }: Props ) {
+export default function ViolationCtaButton( { ctaLabel, externalUrl, variant = 'outlined', withIcon = false }: Props ) {
 	const handleClick = ( event: React.MouseEvent< HTMLButtonElement > ) => {
 		event.stopPropagation();
 		event.preventDefault();
@@ -16,7 +18,13 @@ export default function ViolationCtaButton( { ctaLabel, externalUrl, variant = '
 	};
 
 	return (
-		<Button variant={ variant } color="secondary" size="small" onClick={ handleClick }>
+		<Button
+			variant={ variant }
+			color="secondary"
+			size="small"
+			startIcon={ withIcon ? <WandIcon fontSize="tiny" aria-hidden={ true } /> : undefined }
+			onClick={ handleClick }
+		>
 			{ ctaLabel }
 		</Button>
 	);

package/src/components/violation-icons.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FileSettingsIcon, SettingsIcon, ShieldCheckIcon } from '@elementor/icons';
+import { FileSettingsIcon, SettingsIcon } from '@elementor/icons';
 import { Box } from '@elementor/ui';
 
 import { type AuditViolation } from '../types';
@@ -29,5 +29,5 @@ export default function ViolationIcon( { violation, widgetIcon }: Props ) {
 		return <SettingsIcon fontSize="inherit" aria-hidden={ true } />;
 	}
 
-	return <ShieldCheckIcon fontSize="inherit" aria-hidden={ true } />;
+	return <SettingsIcon fontSize="inherit" aria-hidden={ true } />;
 }

package/src/components/violation-row.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { useState } from 'react';
 import { getElementIcon, getElementTitle } from '@elementor/editor-elements';
-import { AlertCircleIcon, BulbIcon, CheckIcon, ChevronDownIcon, EyeIcon, HelpIcon } from '@elementor/icons';
-import { Alert, AlertTitle, Box, Collapse, IconButton, Tooltip, Typography } from '@elementor/ui';
+import { useFloatingPanelZIndex } from '@elementor/editor-floating-panels';
+import { CheckIcon, ChevronDownIcon, HelpIcon, InfoCircleIcon } from '@elementor/icons';
+import { Alert, Box, Collapse, IconButton, Tooltip, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { AUDIT_PANEL_ID } from '../constants';
 import { focusViolation } from '../hooks/focus-violation';
 import { type AuditMeta, type AuditViolation } from '../types';
 import { buildAngiePrompt } from '../utils/build-angie-prompt';
@@ -17,6 +18,8 @@ import ViolationIcon from './violation-icons';
 
 type Props = {
 	audit: AuditMeta;
+	expanded: boolean;
+	onToggleExpand: () => void;
 	skipReason?: string;
 	violations?: AuditViolation[];
 };
@@ -35,12 +38,12 @@ function StatusIndicator( { audit, violations }: Pick< Props, 'audit' | 'violati
 	if ( violations ) {
 		return (
 			<>
+				<SeverityIcon severity={ audit.severity } />
 				{ isScoredAudit( audit ) && (
 					<Typography variant="caption" color="text.secondary" fontWeight="bold">
 						{ violations.length }
 					</Typography>
 				) }
-				<SeverityIcon severity={ audit.severity } />
 			</>
 		);
 	}
@@ -48,10 +51,73 @@ function StatusIndicator( { audit, violations }: Pick< Props, 'audit' | 'violati
 	return <CheckIcon fontSize="small" color="success" />;
 }
 
-export default function ViolationRow( { audit, skipReason, violations }: Props ) {
-	const [ expanded, setExpanded ] = useState( false );
+function GuidanceAction( {
+	violation,
+	sharedAngiePrompt,
+	panelZIndex,
+}: {
+	violation: AuditViolation;
+	sharedAngiePrompt?: string;
+	panelZIndex: number;
+} ) {
+	const hasPrimaryCta = !! ( violation.ctaLabel && violation.externalUrl );
 
-	const toggleExpanded = () => setExpanded( ( value ) => ! value );
+	if ( ! hasPrimaryCta && ! sharedAngiePrompt ) {
+		return null;
+	}
+
+	return (
+		<Box display="flex" alignItems="center" gap={ 1 } mt={ 1 }>
+			{ hasPrimaryCta && (
+				<ViolationCtaButton
+					ctaLabel={ violation.ctaLabel as string }
+					externalUrl={ violation.externalUrl as string }
+					withIcon
+				/>
+			) }
+			{ hasPrimaryCta && violation.secondaryCtaLabel && violation.secondaryCtaUrl && (
+				<ViolationCtaButton
+					ctaLabel={ violation.secondaryCtaLabel }
+					externalUrl={ violation.secondaryCtaUrl }
+					variant="text"
+				/>
+			) }
+			{ sharedAngiePrompt && (
+				<FixViolationWithAngie prompt={ sharedAngiePrompt } panelZIndex={ panelZIndex } variant="button" />
+			) }
+		</Box>
+	);
+}
+
+function getSharedAngiePrompt( violations?: AuditViolation[] ): string | undefined {
+	if ( ! violations || violations.length < 2 ) {
+		return undefined;
+	}
+
+	const [ first, ...rest ] = violations;
+
+	if ( ! first.angieFix || ! first.angiePrompt ) {
+		return undefined;
+	}
+
+	const allShareTheSameFix = rest.every(
+		( violation ) => violation.angieFix && violation.angiePrompt === first.angiePrompt
+	);
+
+	return allShareTheSameFix ? first.angiePrompt : undefined;
+}
+
+export default function ViolationRow( { audit, expanded, onToggleExpand, skipReason, violations }: Props ) {
+	const primaryViolation = violations?.[ 0 ];
+	const isGuidanceFocusable = !! primaryViolation;
+	const panelZIndex = useFloatingPanelZIndex( AUDIT_PANEL_ID );
+	const sharedAngiePrompt = getSharedAngiePrompt( violations );
+
+	const handleGuidanceClick = () => {
+		if ( isGuidanceFocusable && primaryViolation ) {
+			focusViolation( primaryViolation );
+		}
+	};
 
 	return (
 		<Box sx={ { borderBottom: 1, borderColor: 'divider', paddingBlock: 0.5 } }>
@@ -65,9 +131,9 @@ export default function ViolationRow( { audit, skipReason, violations }: Props )
 						gap: 0.5,
 						minWidth: 0,
 					} }
-					onClick={ toggleExpanded }
+					onClick={ onToggleExpand }
 				>
-					<Typography variant="body2" sx={ { flex: 1 } }>
+					<Typography variant="subtitle2" color="text.secondary" sx={ { flex: 1 } }>
 						{ audit.title }
 					</Typography>
 					{ ! skipReason && <StatusIndicator audit={ audit } violations={ violations } /> }
@@ -76,7 +142,7 @@ export default function ViolationRow( { audit, skipReason, violations }: Props )
 				<IconButton
 					size="small"
 					aria-label={ expanded ? __( 'Collapse', 'elementor' ) : __( 'Expand', 'elementor' ) }
-					onClick={ toggleExpanded }
+					onClick={ onToggleExpand }
 				>
 					<ChevronDownIcon
 						fontSize="small"
@@ -88,44 +154,40 @@ export default function ViolationRow( { audit, skipReason, violations }: Props )
 				</IconButton>
 			</Box>
 			<Collapse in={ expanded }>
-				<Box sx={ { display: 'flex', flexDirection: 'column', gap: 1, paddingBlock: 1 } }>
-					<Alert
-						severity="secondary"
-						sx={ { p: 1 } }
-						icon={ <AlertCircleIcon fontSize="small" color="secondary" aria-hidden={ true } /> }
-					>
-						<AlertTitle>
-							<Typography variant="caption" component="p" color="text.primary" fontWeight="bold">
-								{ __( "What's the issue", 'elementor' ) }
+				<Box paddingBlock={ 1 }>
+					<Tooltip title={ audit.fixHint } placement="top">
+						<Alert
+							severity="secondary"
+							sx={ { p: 1, cursor: isGuidanceFocusable ? 'pointer' : undefined } }
+							icon={ <InfoCircleIcon fontSize="small" aria-hidden={ true } /> }
+							role={ isGuidanceFocusable ? 'button' : undefined }
+							tabIndex={ isGuidanceFocusable ? 0 : undefined }
+							onClick={ isGuidanceFocusable ? handleGuidanceClick : undefined }
+							onKeyDown={ isGuidanceFocusable ? onKeyboardClick( handleGuidanceClick ) : undefined }
+						>
+							<Typography variant="caption" component="p" color="text.secondary">
+								{ audit.description }
 							</Typography>
-						</AlertTitle>
-						<Typography variant="caption" component="p" color="text.secondary">
-							{ audit.description }
-						</Typography>
-					</Alert>
-					<Alert
-						severity="info"
-						sx={ { p: 1 } }
-						icon={ <BulbIcon fontSize="small" color="info" aria-hidden={ true } /> }
-					>
-						<AlertTitle>
-							<Typography variant="caption" component="p" color="text.primary" fontWeight="bold">
-								{ __( 'How to resolve', 'elementor' ) }
-							</Typography>
-						</AlertTitle>
-						<Typography variant="caption" component="p" color="text.secondary">
-							{ audit.fixHint }
-						</Typography>
-					</Alert>
+							{ primaryViolation && (
+								<GuidanceAction
+									violation={ primaryViolation }
+									sharedAngiePrompt={ sharedAngiePrompt }
+									panelZIndex={ panelZIndex }
+								/>
+							) }
+						</Alert>
+					</Tooltip>
 				</Box>
 				{ violations && violations.length > 0 && (
-					<Box role="list" sx={ { paddingBlockEnd: 1, paddingInlineStart: 2 } }>
+					<Box role="list" sx={ { paddingBlockEnd: 1 } }>
 						{ violations.map( ( violation, idx ) => {
 							const widgetIcon = violation.elementId ? getElementIcon( violation.elementId ) : null;
 							const elementTitle = violation.elementId ? getElementTitle( violation.elementId ) : null;
-							const rowLabel = elementTitle
+							const displayLabel = elementTitle ?? violation.label;
+							const angiePromptContext = elementTitle
 								? `${ elementTitle } - ${ violation.label }`
 								: violation.label;
+							const showsOwnFixAction = !! violation.angieFix && ! sharedAngiePrompt;
 
 							return (
 								<Box
@@ -139,50 +201,37 @@ export default function ViolationRow( { audit, skipReason, violations }: Props )
 										alignItems: 'center',
 										gap: 1,
 										paddingBlock: 0.5,
-										paddingInline: 2,
+										paddingInline: 1,
 										borderRadius: 1,
 										cursor: 'pointer',
-										'& .violation-hover-icon': { opacity: 0, transition: 'opacity .15s' },
 										'&:hover': { bgcolor: 'action.hover' },
-										'&:hover .violation-hover-icon, &:focus-visible .violation-hover-icon': {
-											opacity: 1,
-										},
+										'&:hover .violation-row-fix-action, &:focus-visible .violation-row-fix-action':
+											{
+												opacity: 1,
+											},
 									} }
 								>
 									<ViolationIcon violation={ violation } widgetIcon={ widgetIcon } />
 									<Box sx={ { flex: 1 } }>
-										<Typography variant="caption">{ rowLabel }</Typography>
+										<Typography variant="caption">{ displayLabel }</Typography>
 										{ violation.detail && (
 											<Typography variant="caption" color="text.secondary">
 												{ violation.detail }
 											</Typography>
 										) }
 									</Box>
-									{ violation.angieFix && (
-										<FixViolationWithAngie
-											prompt={ violation.angiePrompt ?? buildAngiePrompt( rowLabel ) }
-										/>
-									) }
-									{ violation.ctaLabel && violation.externalUrl ? (
-										<Box sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
-											<ViolationCtaButton
-												ctaLabel={ violation.ctaLabel }
-												externalUrl={ violation.externalUrl }
+									{ showsOwnFixAction && (
+										<Box
+											className="violation-row-fix-action"
+											sx={ { opacity: 0, transition: 'opacity .15s' } }
+										>
+											<FixViolationWithAngie
+												prompt={
+													violation.angiePrompt ?? buildAngiePrompt( angiePromptContext )
+												}
+												panelZIndex={ panelZIndex }
 											/>
-											{ violation.secondaryCtaLabel && violation.secondaryCtaUrl && (
-												<ViolationCtaButton
-													ctaLabel={ violation.secondaryCtaLabel }
-													externalUrl={ violation.secondaryCtaUrl }
-													variant="text"
-												/>
-											) }
 										</Box>
-									) : (
-										<EyeIcon
-											className="violation-hover-icon"
-											fontSize="tiny"
-											aria-hidden={ true }
-										/>
 									) }
 								</Box>
 							);

package/src/hooks/use-audit-report.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
-import { getCurrentDocumentId } from '@elementor/editor-elements';
+import { getHostDocumentId } from '@elementor/editor-elements';
 import { __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';
 
 import { runPageAudit } from '../runner';
-import { type GlobalState, selectError, selectReport, selectStatus, slice } from '../store';
+import { type GlobalState, selectError, selectIsStale, selectReport, selectStatus, slice } from '../store';
 import { getPersistedReport, persistReport } from '../utils/report-storage';
 import { SessionExpiredError } from '../utils/session-expiration';
 
@@ -11,8 +11,9 @@ export function useAuditReport() {
 	const status = useSelector( ( state: GlobalState ) => selectStatus( state ) );
 	const report = useSelector( ( state: GlobalState ) => selectReport( state ) );
 	const error = useSelector( ( state: GlobalState ) => selectError( state ) );
+	const isStale = useSelector( ( state: GlobalState ) => selectIsStale( state ) );
 	const dispatch = useDispatch();
-	const documentId = getCurrentDocumentId() ?? 0;
+	const documentId = getHostDocumentId() ?? 0;
 
 	useEffect( () => {
 		if ( ! documentId || report?.documentId === documentId ) {
@@ -45,5 +46,5 @@ export function useAuditReport() {
 		}
 	};
 
-	return { status, report, error, run };
+	return { status, report, error, isStale, run };
 }

package/src/hooks/use-audit-toggle-props.ts

@@ -1,7 +1,7 @@
 import { type ToggleActionProps } from '@elementor/editor-app-bar';
-import { ShieldCheckIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
+import AuditToggleIcon from '../components/audit-toggle-icon';
 import { auditPanel } from '../editor-panel';
 
 export function useAuditToggleProps(): ToggleActionProps {
@@ -10,7 +10,7 @@ export function useAuditToggleProps(): ToggleActionProps {
 
 	return {
 		title: __( 'Audit Page', 'elementor' ),
-		icon: ShieldCheckIcon,
+		icon: AuditToggleIcon,
 		selected: isOpen,
 		onClick: () => toggle(),
 	};

package/src/hooks/use-single-expanded-card.ts

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+export function useSingleExpandedCard( initialId: string | null = null ) {
+	const [ expandedId, setExpandedId ] = useState< string | null >( initialId );
+
+	const toggle = ( id: string ) => {
+		setExpandedId( ( current ) => ( current === id ? null : id ) );
+	};
+
+	return { expandedId, toggle };
+}

package/src/init.ts

@@ -5,10 +5,12 @@ import { registerAppBarAuditsToggle } from './editor-app-bar';
 import { auditPanel } from './editor-panel';
 import { registerAllAudits } from './register-audits';
 import { slice } from './store/slice';
+import { syncReportStaleness } from './sync-report-staleness';
 
 export function init(): void {
 	registerSlice( slice );
 	registerAllAudits();
 	registerFloatingPanel( auditPanel.panel );
 	registerAppBarAuditsToggle();
+	syncReportStaleness();
 }

package/src/register-audits.ts

@@ -22,7 +22,6 @@ import * as robotsNoindex from './audits/robots-noindex';
 import * as scanForCookies from './audits/scan-for-cookies';
 import * as sectionsAndColumns from './audits/sections-and-columns';
 import * as siteIdentity from './audits/site-identity';
-import * as tooManyWidgets from './audits/too-many-widgets';
 import { registerAudit } from './registry';
 import { type Audit } from './types';
 
@@ -33,7 +32,6 @@ const AUDITS: Audit[] = [
 
 	hiddenElements.audit,
 	deprecatedWidgets.audit,
-	tooManyWidgets.audit,
 	sectionsAndColumns.audit,
 	deepNesting.audit,
 	nestedBoxedContainers.audit,

package/src/register-promotions.ts

@@ -80,27 +80,4 @@ 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

@@ -1,4 +1,4 @@
-import { getElements } from '@elementor/editor-elements';
+import { getHostDocumentElements, getHostDocumentId } from '@elementor/editor-elements';
 
 import { fetchPageContext } from './api/page-context-client';
 import { getRegisteredAudits } from './registry';
@@ -18,7 +18,11 @@ 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() );
+	if ( documentId !== getHostDocumentId() ) {
+		throw new Error( 'runPageAudit: documentId must match the host document.' );
+	}
+
+	const tree = buildSnapshotTree( getHostDocumentElements() );
 	const imageSizeRequests = extractImageSizeRequests( tree );
 	const pageContext = await fetchPageContext( documentId, imageSizeRequests );
 

package/src/store/selectors.ts

@@ -13,3 +13,7 @@ export function selectReport( state: GlobalState ) {
 export function selectError( state: GlobalState ) {
 	return state.audits.error;
 }
+
+export function selectIsStale( state: GlobalState ) {
+	return state.audits.isStale;
+}

package/src/store/slice.ts

@@ -6,9 +6,10 @@ type SliceState = {
 	status: 'idle' | 'loading' | 'error' | 'ready';
 	report: PageAuditReport | null;
 	error: string | null;
+	isStale: boolean;
 };
 
-const initialState: SliceState = { status: 'idle', report: null, error: null };
+const initialState: SliceState = { status: 'idle', report: null, error: null, isStale: false };
 
 export const slice = __createSlice( {
 	name: 'audits',
@@ -21,6 +22,7 @@ export const slice = __createSlice( {
 		runSucceeded( state, action: PayloadAction< PageAuditReport > ) {
 			state.status = 'ready';
 			state.report = action.payload;
+			state.isStale = false;
 		},
 		runFailed( state, action: PayloadAction< string > ) {
 			state.status = 'error';
@@ -33,11 +35,18 @@ export const slice = __createSlice( {
 			state.status = 'ready';
 			state.report = action.payload;
 			state.error = null;
+			state.isStale = false;
 		},
 		reportCleared( state ) {
 			state.status = 'idle';
 			state.report = null;
 			state.error = null;
+			state.isStale = false;
+		},
+		reportStale( state ) {
+			if ( state.report ) {
+				state.isStale = true;
+			}
 		},
 	},
 } );

package/src/sync-report-staleness.ts

@@ -0,0 +1,14 @@
+import { __privateListenTo as listenTo, commandEndEvent, type CommandEvent } from '@elementor/editor-v1-adapters';
+import { __dispatch as dispatch } from '@elementor/store';
+
+import { slice } from './store/slice';
+
+export function syncReportStaleness() {
+	listenTo( commandEndEvent( 'document/save/set-is-modified' ), ( e ) => {
+		const event = e as CommandEvent< { status: boolean } >;
+
+		if ( event.args?.status ) {
+			dispatch( slice.actions.reportStale() );
+		}
+	} );
+}

package/src/types.ts

@@ -72,6 +72,7 @@ export type PageContextResponse = {
 	ally_accessibility_statement_created: boolean;
 	ally_accessibility_statement_url: string;
 	ally_widget_settings_url: string;
+	ally_scan_url: string;
 	cookiez_plugin_active: boolean;
 	cookiez_plugin_url: string;
 	cookiez_plugin_installed: boolean;
@@ -80,6 +81,7 @@ export type PageContextResponse = {
 	cookiez_consent_mode_settings_url: string;
 	image_optimization_plugin_active: boolean;
 	image_optimization_plugin_url: string;
+	image_optimization_settings_url: string;
 	frontend_url: string | null;
 	site_identity: {
 		site_name_set: boolean;

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

@@ -0,0 +1,17 @@
+import { type ElementSnapshotNode } from '../types';
+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';
+
+export type ImageSourceVisit = {
+	node: ElementSnapshotNode;
+	media: ImageLikeMedia;
+};
+
+export function walkAllImageSources( tree: ElementSnapshotNode[], visit: ( source: ImageSourceVisit ) => void ): void {
+	walkImageLikeSources( tree, visit );
+	walkBackgroundImageSources( tree, visit );
+	walkAtomicImageSources( tree, visit );
+	walkAtomicBackgroundImageSources( tree, visit );
+}