@elementor/editor-audits 4.4.0-1122 → 4.4.0-1124

package/package.json

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

package/src/audits/images-alt-text.ts

@@ -17,6 +17,7 @@ export const audit: Audit = {
 			return { status: 'skipped', reason: __( 'No images', 'elementor' ) };
 		}
 
+		const isReady = ctx.pageContext.ally_plugin_active;
 		const violations: AuditViolation[] = [];
 		const failedWidgetIds = new Set< string >();
 		let missingAltImageCount = 0;
@@ -35,7 +36,7 @@ export const audit: Audit = {
 					elementId: node.id,
 					targetHint: 'element-settings',
 					label: __( 'Image is missing alt text.', 'elementor' ),
-					externalUrl: ctx.pageContext.ally_plugin_url,
+					externalUrl: isReady ? ctx.pageContext.ally_scan_url : ctx.pageContext.ally_plugin_url,
 					ctaLabel: __( 'Fix with Ally', 'elementor' ),
 				} );
 			}

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

@@ -18,6 +18,7 @@ export const audit: Audit = {
 	severity: 'info',
 	weight: 1,
 	evaluate: ( ctx ) => {
+		const isReady = ctx.pageContext.image_optimization_plugin_active;
 		const offendingElementIds = new Set< string >();
 		let hasAnyImage = false;
 		let inefficientImageFormatCount = 0;
@@ -57,7 +58,9 @@ export const audit: Audit = {
 			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,
+			externalUrl: isReady
+				? ctx.pageContext.image_optimization_settings_url
+				: ctx.pageContext.image_optimization_plugin_url,
 			ctaLabel: __( 'Optimize all', 'elementor' ),
 		} ) );
 

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

@@ -19,6 +19,7 @@ export const audit: Audit = {
 	severity: 'warning',
 	weight: 7,
 	evaluate: ( ctx ) => {
+		const isReady = ctx.pageContext.image_optimization_plugin_active;
 		const widgetMaxKb = new Map< string, number >();
 		let oversizedImageCount = 0;
 		let hasAnyImage = false;
@@ -65,7 +66,9 @@ export const audit: Audit = {
 				__( 'Image is %d KB (over 500 KB).', 'elementor' ),
 				kb
 			),
-			externalUrl: ctx.pageContext.image_optimization_plugin_url,
+			externalUrl: isReady
+				? ctx.pageContext.image_optimization_settings_url
+				: ctx.pageContext.image_optimization_plugin_url,
 			ctaLabel: __( 'Optimize all', 'elementor' ),
 		} ) );
 

package/src/audits/nested-boxed-containers.ts

@@ -35,6 +35,11 @@ export const audit: Audit = {
 					elementId: node.id,
 					targetHint: 'element-settings',
 					label: __( 'Nested boxed container.', 'elementor' ),
+					angieFix: true,
+					angiePrompt: __(
+						'Find containers that have nested containers. Containers can be deep-nested. Update the nested container styling so that when a parent container already uses a boxed setting, any inner container inside it is set to Full Width. Keep the first parent container boxed, remove all boxed styling from the nested inner containers, and preserve the inner container’s content, spacing, alignment, and hierarchy.',
+						'elementor'
+					),
 				} );
 			}
 		} );

package/src/components/fix-violation-with-angie.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { isAngieAvailable, sendPromptToAngie } from '@elementor/editor-mcp';
 import { AngieIcon } from '@elementor/icons';
-import { IconButton, Tooltip } from '@elementor/ui';
+import { Button, IconButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { ANGIE_FIX_ENTRY_POINT, CREATE_WIDGET_EVENT } from '../constants';
@@ -9,9 +9,10 @@ import { ANGIE_FIX_ENTRY_POINT, CREATE_WIDGET_EVENT } from '../constants';
 type Props = {
 	prompt: string;
 	panelZIndex: number;
+	variant?: 'icon' | 'button';
 };
 
-export default function FixViolationWithAngie( { prompt, panelZIndex }: Props ) {
+export default function FixViolationWithAngie( { prompt, panelZIndex, variant = 'icon' }: Props ) {
 	const label = __( 'Fix with Angie', 'elementor' );
 	const href = `#angie-prompt=${ encodeURIComponent( prompt ) }`;
 
@@ -34,6 +35,22 @@ export default function FixViolationWithAngie( { prompt, panelZIndex }: Props )
 		);
 	};
 
+	if ( variant === 'button' ) {
+		return (
+			<Button
+				component="a"
+				href={ href }
+				size="small"
+				color="secondary"
+				variant="outlined"
+				startIcon={ <AngieIcon fontSize="tiny" aria-hidden={ true } /> }
+				onClick={ handleClick }
+			>
+				{ label }
+			</Button>
+		);
+	}
+
 	return (
 		<Tooltip title={ label } placement="top" PopperProps={ { sx: { zIndex: panelZIndex } } }>
 			<IconButton component="a" href={ href } size="small" aria-label={ label } onClick={ handleClick }>

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/violation-row.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getElementIcon, getElementTitle } from '@elementor/editor-elements';
 import { useFloatingPanelZIndex } from '@elementor/editor-floating-panels';
-import { CheckIcon, ChevronDownIcon, HelpIcon, InfoCircleIcon, WandIcon } from '@elementor/icons';
+import { CheckIcon, ChevronDownIcon, HelpIcon, InfoCircleIcon } from '@elementor/icons';
 import { Alert, Box, Collapse, IconButton, Tooltip, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -51,35 +51,67 @@ function StatusIndicator( { audit, violations }: Pick< Props, 'audit' | 'violati
 	return <CheckIcon fontSize="small" color="success" />;
 }
 
-function GuidanceAction( { violation }: { violation: AuditViolation } ) {
+function GuidanceAction( {
+	violation,
+	sharedAngiePrompt,
+	panelZIndex,
+}: {
+	violation: AuditViolation;
+	sharedAngiePrompt?: string;
+	panelZIndex: number;
+} ) {
 	const hasPrimaryCta = !! ( violation.ctaLabel && violation.externalUrl );
 
-	if ( ! hasPrimaryCta ) {
+	if ( ! hasPrimaryCta && ! sharedAngiePrompt ) {
 		return null;
 	}
 
 	return (
 		<Box display="flex" alignItems="center" gap={ 1 } mt={ 1 }>
-			<ViolationCtaButton
-				ctaLabel={ violation.ctaLabel as string }
-				externalUrl={ violation.externalUrl as string }
-				withIcon
-			/>
-			{ violation.secondaryCtaLabel && violation.secondaryCtaUrl && (
+			{ 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 ) {
@@ -136,7 +168,13 @@ export default function ViolationRow( { audit, expanded, onToggleExpand, skipRea
 							<Typography variant="caption" component="p" color="text.secondary">
 								{ audit.description }
 							</Typography>
-							{ primaryViolation && <GuidanceAction violation={ primaryViolation } /> }
+							{ primaryViolation && (
+								<GuidanceAction
+									violation={ primaryViolation }
+									sharedAngiePrompt={ sharedAngiePrompt }
+									panelZIndex={ panelZIndex }
+								/>
+							) }
 						</Alert>
 					</Tooltip>
 				</Box>
@@ -145,9 +183,11 @@ export default function ViolationRow( { audit, expanded, onToggleExpand, skipRea
 						{ 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
@@ -165,24 +205,33 @@ export default function ViolationRow( { audit, expanded, onToggleExpand, skipRea
 										borderRadius: 1,
 										cursor: 'pointer',
 										'&:hover': { bgcolor: 'action.hover' },
+										'&: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 ) }
-											panelZIndex={ panelZIndex }
-										/>
-									) : (
-										<WandIcon fontSize="tiny" aria-hidden={ true } />
+									{ showsOwnFixAction && (
+										<Box
+											className="violation-row-fix-action"
+											sx={ { opacity: 0, transition: 'opacity .15s' } }
+										>
+											<FixViolationWithAngie
+												prompt={
+													violation.angiePrompt ?? buildAngiePrompt( angiePromptContext )
+												}
+												panelZIndex={ panelZIndex }
+											/>
+										</Box>
 									) }
 								</Box>
 							);

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;