@elementor/editor-audits 4.3.0-1036

package/src/audits/page-featured-image.ts

@@ -0,0 +1,29 @@
+import { __ } from '@wordpress/i18n';
+
+import { type Audit } from '../types';
+
+export const audit: Audit = {
+	id: 'audits/page-featured-image',
+	title: __( 'Page featured image', 'elementor' ),
+	description: __( 'Featured images are used by social shares and many themes for hero visuals.', 'elementor' ),
+	fixHint: __( 'Open Page Settings and set a featured image.', 'elementor' ),
+	categories: [ 'seo' ],
+	severity: 'info',
+	weight: 5,
+	evaluate: ( ctx ) => {
+		if ( ctx.pageContext.featured_image_id ) {
+			return { status: 'pass' };
+		}
+
+		return {
+			status: 'fail',
+			violations: [
+				{
+					auditId: audit.id,
+					label: __( 'No featured image set.', 'elementor' ),
+					targetHint: 'page-settings',
+				},
+			],
+		};
+	},
+};

package/src/audits/page-title.ts

@@ -0,0 +1,48 @@
+import { __ } from '@wordpress/i18n';
+
+import { type Audit } from '../types';
+
+const MAX_TITLE_LENGTH = 60;
+
+export const audit: Audit = {
+	id: 'audits/page-title',
+	title: __( 'Page title', 'elementor' ),
+	description: __( 'Pages need a clear title for SEO and screen-reader navigation.', 'elementor' ),
+	fixHint: __( 'Open Page Settings and add a title.', 'elementor' ),
+	categories: [ 'seo' ],
+	severity: 'error',
+	weight: 10,
+	evaluate: ( ctx ) => {
+		const title = ctx.pageContext.post_title;
+
+		if ( ! title ) {
+			return {
+				status: 'fail',
+				violations: [
+					{
+						auditId: audit.id,
+						label: __( 'Page has no title.', 'elementor' ),
+						targetHint: 'page-settings',
+						angieFix: true,
+					},
+				],
+			};
+		}
+
+		if ( title.length > MAX_TITLE_LENGTH ) {
+			return {
+				status: 'fail',
+				violations: [
+					{
+						auditId: audit.id,
+						label: __( 'Page title is too long.', 'elementor' ),
+						targetHint: 'page-settings',
+						angieFix: true,
+					},
+				],
+			};
+		}
+
+		return { status: 'pass' };
+	},
+};

package/src/audits/prefer-global-colors.ts

@@ -0,0 +1,52 @@
+import { __, sprintf } from '@wordpress/i18n';
+
+import { type Audit, type AuditViolation } from '../types';
+import { collectHardcodedColors } from '../utils/collect-hardcoded-colors';
+import { findMatchingGlobalByValue } from '../utils/match-global-by-value';
+import { walkElements } from '../utils/walk';
+
+export const audit: Audit = {
+	id: 'audits/prefer-global-colors',
+	title: __( 'Prefer global colors', 'elementor' ),
+	description: __( 'Global colors make the design consistent and easy to update site-wide.', 'elementor' ),
+	fixHint: __( 'Replace the hard-coded value with the matching global color.', 'elementor' ),
+	categories: [ 'best-practices' ],
+	severity: 'info',
+	weight: 3,
+	evaluate: ( ctx ) => {
+		if ( ctx.elements.tree.length === 0 ) {
+			return { status: 'skipped', reason: __( 'No elements', 'elementor' ) };
+		}
+
+		if ( ctx.kit.globals.colors.length === 0 ) {
+			return { status: 'skipped', reason: __( 'No global colors', 'elementor' ) };
+		}
+
+		const violations: AuditViolation[] = [];
+
+		walkElements( ctx.elements.tree, ( node ) => {
+			for ( const { value } of collectHardcodedColors( node.settings ) ) {
+				const global = findMatchingGlobalByValue( value, ctx.kit.globals.colors );
+
+				if ( ! global ) {
+					continue;
+				}
+
+				violations.push( {
+					auditId: audit.id,
+					elementId: node.id,
+					targetHint: 'element-settings',
+					angieFix: true,
+					label: sprintf(
+						/* translators: 1: hard-coded color value, 2: global color title. */
+						__( 'replace "%1$s" with "%2$s" global color', 'elementor' ),
+						value,
+						global.title
+					),
+				} );
+			}
+		} );
+
+		return violations.length === 0 ? { status: 'pass' } : { status: 'fail', violations };
+	},
+};

package/src/audits/prefer-global-fonts.ts

@@ -0,0 +1,50 @@
+import { __, sprintf } from '@wordpress/i18n';
+
+import { type Audit, type AuditViolation } from '../types';
+import { collectHardcodedFonts } from '../utils/collect-hardcoded-fonts';
+import { findMatchingGlobalByValue } from '../utils/match-global-by-value';
+import { walkElements } from '../utils/walk';
+
+export const audit: Audit = {
+	id: 'audits/prefer-global-fonts',
+	title: __( 'Prefer global fonts', 'elementor' ),
+	description: __( 'Global fonts make the design consistent and easy to update site-wide.', 'elementor' ),
+	fixHint: __( 'Replace the hard-coded value with the matching global font.', 'elementor' ),
+	categories: [ 'best-practices', 'performance' ],
+	severity: 'info',
+	weight: 3,
+	evaluate: ( ctx ) => {
+		if ( ctx.elements.tree.length === 0 ) {
+			return { status: 'skipped', reason: __( 'No elements', 'elementor' ) };
+		}
+
+		if ( ctx.kit.globals.fonts.length === 0 ) {
+			return { status: 'skipped', reason: __( 'No global fonts', 'elementor' ) };
+		}
+
+		const violations: AuditViolation[] = [];
+
+		walkElements( ctx.elements.tree, ( node ) => {
+			for ( const { value } of collectHardcodedFonts( node.settings ) ) {
+				const global = findMatchingGlobalByValue( value, ctx.kit.globals.fonts );
+
+				if ( ! global ) {
+					continue;
+				}
+
+				violations.push( {
+					auditId: audit.id,
+					elementId: node.id,
+					targetHint: 'element-settings',
+					label: sprintf(
+						/* translators: %s: global font title. */
+						__( 'replace hardcoded typography with "%s" global font', 'elementor' ),
+						global.title
+					),
+				} );
+			}
+		} );
+
+		return violations.length === 0 ? { status: 'pass' } : { status: 'fail', violations };
+	},
+};

package/src/audits/privacy-policy.ts

@@ -0,0 +1,35 @@
+import { __ } from '@wordpress/i18n';
+
+import { type Audit } from '../types';
+
+export const audit: Audit = {
+	id: 'audits/privacy-policy',
+	title: __( 'Privacy policy', 'elementor' ),
+	description: __(
+		'A privacy policy page is required by privacy regulations such as GDPR (EU) and CCPA (US).',
+		'elementor'
+	),
+	fixHint: __(
+		'Go to Settings > Privacy in the WordPress admin and assign a published privacy policy page.',
+		'elementor'
+	),
+	categories: [ 'compliance' ],
+	severity: 'info',
+	weight: 1,
+	evaluate: ( ctx ) => {
+		if ( ctx.pageContext.privacy_policy_url ) {
+			return { status: 'pass' };
+		}
+
+		return {
+			status: 'fail',
+			violations: [
+				{
+					auditId: audit.id,
+					label: __( 'No privacy policy page is set.', 'elementor' ),
+					externalUrl: ctx.pageContext.privacy_settings_url,
+				},
+			],
+		};
+	},
+};

package/src/audits/robots-noindex.ts

@@ -0,0 +1,35 @@
+import { __ } from '@wordpress/i18n';
+
+import { type Audit } from '../types';
+
+export const audit: Audit = {
+	id: 'audits/robots-noindex',
+	title: __( 'Search engine visibility', 'elementor' ),
+	description: __(
+		'When search engine visibility is checked in WordPress Settings -> Reading -> Search Engine Visibility, search engines are discouraged from indexing the website.',
+		'elementor'
+	),
+	fixHint: __(
+		'Go to Settings → Reading in the WordPress admin and uncheck "Discourage search engines from indexing this site" when the website should be indexed.',
+		'elementor'
+	),
+	categories: [ 'seo' ],
+	severity: 'error',
+	weight: 7,
+	evaluate: ( ctx ) => {
+		if ( ! ctx.pageContext.is_noindex ) {
+			return { status: 'pass' };
+		}
+
+		return {
+			status: 'fail',
+			violations: [
+				{
+					auditId: audit.id,
+					label: __( 'Search engines are discouraged from indexing this website.', 'elementor' ),
+					externalUrl: ctx.pageContext.reading_settings_url,
+				},
+			],
+		};
+	},
+};

package/src/audits/sections-and-columns.ts

@@ -0,0 +1,39 @@
+import { __ } from '@wordpress/i18n';
+
+import { type Audit, type AuditViolation } from '../types';
+import { walkElements } from '../utils/walk';
+
+export const audit: Audit = {
+	id: 'audits/sections-and-columns',
+	title: __( 'Sections and columns', 'elementor' ),
+	description: __(
+		'Sections and columns are legacy elements. Containers render fewer DOM nodes and are more flexible.',
+		'elementor'
+	),
+	fixHint: __( 'Use the Container Converter to replace each section/column with a container.', 'elementor' ),
+	categories: [ 'best-practices', 'performance' ],
+	severity: 'warning',
+	weight: 7,
+	evaluate: ( ctx ) => {
+		if ( ctx.elements.tree.length === 0 ) {
+			return { status: 'skipped', reason: __( 'No elements', 'elementor' ) };
+		}
+
+		const violations: AuditViolation[] = [];
+
+		walkElements( ctx.elements.tree, ( node ) => {
+			if ( node.elType === 'section' || node.elType === 'column' ) {
+				violations.push( {
+					auditId: audit.id,
+					elementId: node.id,
+					label:
+						node.elType === 'section'
+							? __( 'Section element', 'elementor' )
+							: __( 'Column element', 'elementor' ),
+				} );
+			}
+		} );
+
+		return violations.length === 0 ? { status: 'pass' } : { status: 'fail', violations };
+	},
+};

package/src/audits/site-identity.ts

@@ -0,0 +1,62 @@
+import { __ } from '@wordpress/i18n';
+
+import { type Audit, type AuditViolation } from '../types';
+
+export const audit: Audit = {
+	id: 'audits/site-identity',
+	title: __( 'Site identity', 'elementor' ),
+	description: __(
+		'Site name, description, logo, and favicon establish your brand and appear in search results and browser tabs.',
+		'elementor'
+	),
+	fixHint: __( 'Open Site Settings → Site Identity and complete all the missing fields.', 'elementor' ),
+	categories: [ 'best-practices', 'seo' ],
+	severity: 'info',
+	weight: 7,
+	evaluate: ( ctx ) => {
+		const { site_identity: identity } = ctx.pageContext;
+		const violations: AuditViolation[] = [];
+
+		if ( ! identity.site_name_set ) {
+			violations.push( {
+				auditId: audit.id,
+				label: __( 'Site name is missing or still uses the default.', 'elementor' ),
+				targetHint: 'site-identity-settings',
+			} );
+		}
+
+		if ( ! identity.site_description_set ) {
+			violations.push( {
+				auditId: audit.id,
+				label: __( 'Site description is missing or still uses the default.', 'elementor' ),
+				targetHint: 'site-identity-settings',
+				angieFix: true,
+			} );
+		}
+
+		if ( ! identity.site_logo_set ) {
+			violations.push( {
+				auditId: audit.id,
+				label: __( 'Site logo is not set.', 'elementor' ),
+				targetHint: 'site-identity-settings',
+			} );
+		}
+
+		if ( ! identity.site_favicon_set ) {
+			violations.push( {
+				auditId: audit.id,
+				label: __( 'Site favicon is not set.', 'elementor' ),
+				targetHint: 'site-identity-settings',
+			} );
+		}
+
+		if ( violations.length === 0 ) {
+			return { status: 'pass' };
+		}
+
+		return {
+			status: 'fail',
+			violations,
+		};
+	},
+};

package/src/audits/too-many-widgets.ts

@@ -0,0 +1,43 @@
+import { __ } from '@wordpress/i18n';
+
+import { type Audit } from '../types';
+import { walkElements } from '../utils/walk';
+
+const WIDGET_COUNT_THRESHOLD = 100;
+
+export const audit: Audit = {
+	id: 'audits/too-many-widgets',
+	title: __( 'Too many widgets', 'elementor' ),
+	description: __( 'Excessive DOM size caused by too many widgets degrades rendering performance.', 'elementor' ),
+	fixHint: __( 'Reduce the number of widgets on the page by removing or combining elements.', 'elementor' ),
+	categories: [ 'best-practices', 'performance' ],
+	severity: 'warning',
+	weight: 5,
+	evaluate: ( ctx ) => {
+		if ( ctx.elements.tree.length === 0 ) {
+			return { status: 'skipped', reason: __( 'No elements', 'elementor' ) };
+		}
+
+		let widgetCount = 0;
+
+		walkElements( ctx.elements.tree, ( node ) => {
+			if ( node.elType === 'widget' ) {
+				widgetCount++;
+			}
+		} );
+
+		if ( widgetCount <= WIDGET_COUNT_THRESHOLD ) {
+			return { status: 'pass' };
+		}
+
+		return {
+			status: 'fail',
+			violations: [
+				{
+					auditId: audit.id,
+					label: __( 'Page has too many widgets.', 'elementor' ),
+				},
+			],
+		};
+	},
+};

package/src/components/audit-feedback.tsx

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { notify } from '@elementor/editor-notifications';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import { useMixpanel } from '@elementor/events';
+import { httpService } from '@elementor/http-client';
+import { MessageLinesIcon } from '@elementor/icons';
+import {
+	Button,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	IconButton,
+	Stack,
+	TextField,
+	Tooltip,
+	Typography,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import {
+	FEEDBACK_CANCELLED_EVENT,
+	FEEDBACK_CLICKED_EVENT,
+	FEEDBACK_CLOSED_EVENT,
+	FEEDBACK_ENTRY_POINT,
+	FEEDBACK_EXPERIMENT_NAME,
+	FEEDBACK_SENT_EVENT,
+} from '../constants';
+
+const FEEDBACK_SUBJECT = 'Page Audit Tool';
+const FEEDBACK_SUBJECT_LABEL = __( 'Page Audit Tool', 'elementor' );
+const SUCCESS_NOTIFICATION_ID = 'audit-feedback-success';
+const ERROR_NOTIFICATION_ID = 'audit-feedback-error';
+const DIALOG_TITLE_ID = 'audit-feedback-dialog-title';
+const DIALOG_DESCRIPTION_ID = 'audit-feedback-dialog-description';
+
+const isUserConnected = () =>
+	Boolean( window.elementorCommon?.config?.library_connect?.is_connected || window.elementorPro?.config?.isActive );
+
+const notifySuccess = () =>
+	notify( {
+		id: SUCCESS_NOTIFICATION_ID,
+		type: 'success',
+		message: __( 'Feedback sent. Thanks for helping us out.', 'elementor' ),
+	} );
+
+const notifyError = () =>
+	notify( {
+		id: ERROR_NOTIFICATION_ID,
+		type: 'error',
+		message: __( 'Something went wrong. Please try sending your feedback again.', 'elementor' ),
+	} );
+
+export default function AuditFeedback() {
+	const [ isOpen, setIsOpen ] = useState( false );
+	const [ feedbackText, setFeedbackText ] = useState( '' );
+	const [ isSubmitting, setIsSubmitting ] = useState( false );
+	const { dispatchEvent: trackEvent = ( ...args: unknown[] ) => void args } = useMixpanel();
+
+	if ( ! isExperimentActive( FEEDBACK_EXPERIMENT_NAME ) ) {
+		return null;
+	}
+
+	const connected = isUserConnected();
+	const connectUrl = window.elementor?.config?.user?.top_bar?.connect_url;
+
+	if ( ! connected && ! connectUrl ) {
+		return null;
+	}
+
+	const triggerLabel = __( 'Give feedback', 'elementor' );
+
+	const handleOpen = () => {
+		if ( ! connected ) {
+			window.open( connectUrl, '_blank', 'noopener' );
+			trackEvent( FEEDBACK_CLICKED_EVENT, { entry_point: FEEDBACK_ENTRY_POINT, connected: false } );
+			return;
+		}
+
+		setIsOpen( true );
+		trackEvent( FEEDBACK_CLICKED_EVENT, { entry_point: FEEDBACK_ENTRY_POINT, connected: true } );
+	};
+
+	const dismiss = ( eventName: string ) => {
+		setIsOpen( false );
+		setFeedbackText( '' );
+		trackEvent( eventName, { entry_point: FEEDBACK_ENTRY_POINT } );
+	};
+
+	const handleCancel = () => dismiss( FEEDBACK_CANCELLED_EVENT );
+	const handleClose = () => dismiss( FEEDBACK_CLOSED_EVENT );
+
+	const handleSubmit = () => {
+		setIsSubmitting( true );
+
+		httpService()
+			.post( 'elementor/v1/feedback/submit', {
+				subject: FEEDBACK_SUBJECT,
+				description: feedbackText.trim(),
+			} )
+			.then( ( response ) => {
+				if ( ! response.data.success ) {
+					notifyError();
+					return;
+				}
+
+				setIsOpen( false );
+				setFeedbackText( '' );
+				notifySuccess();
+				trackEvent( FEEDBACK_SENT_EVENT, { entry_point: FEEDBACK_ENTRY_POINT } );
+			} )
+			.catch( notifyError )
+			.finally( () => setIsSubmitting( false ) );
+	};
+
+	return (
+		<>
+			<Tooltip title={ triggerLabel } placement="top">
+				<IconButton size="small" aria-label={ triggerLabel } onClick={ handleOpen }>
+					<MessageLinesIcon fontSize="small" />
+				</IconButton>
+			</Tooltip>
+			<Dialog
+				open={ isOpen }
+				onClose={ handleClose }
+				aria-labelledby={ DIALOG_TITLE_ID }
+				aria-describedby={ DIALOG_DESCRIPTION_ID }
+				PaperProps={ { sx: { borderRadius: 1 } } }
+			>
+				<DialogHeader logo={ false } onClose={ handleClose }>
+					<DialogTitle id={ DIALOG_TITLE_ID }>
+						{ __( 'Let us know what you think', 'elementor' ) }
+					</DialogTitle>
+				</DialogHeader>
+				<DialogContent dividers>
+					<Stack direction="column" gap={ 2 }>
+						<TextField value={ FEEDBACK_SUBJECT_LABEL } disabled fullWidth size="small" />
+						<TextField
+							placeholder={ __(
+								'Tell us what you had in mind, what we can improve or fix to make this feature better.',
+								'elementor'
+							) }
+							fullWidth
+							multiline
+							rows={ 4 }
+							disabled={ isSubmitting }
+							onChange={ ( event: React.ChangeEvent< HTMLInputElement > ) =>
+								setFeedbackText( event.target.value )
+							}
+							value={ feedbackText }
+						/>
+						<Typography id={ DIALOG_DESCRIPTION_ID } variant="caption" color="text.secondary">
+							{ __(
+								"We appreciate your feedback! While we review all submissions, we can't guarantee that every suggestion will result in a change or update.",
+								'elementor'
+							) }
+						</Typography>
+					</Stack>
+				</DialogContent>
+				<DialogActions>
+					<Button variant="text" color="secondary" onClick={ handleCancel }>
+						{ __( 'Cancel', 'elementor' ) }
+					</Button>
+					<Button
+						variant="contained"
+						color="primary"
+						disabled={ isSubmitting || feedbackText.trim().length === 0 }
+						onClick={ handleSubmit }
+					>
+						{ __( 'Send', 'elementor' ) }
+					</Button>
+				</DialogActions>
+			</Dialog>
+		</>
+	);
+}

package/src/components/audit-panel.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { getCurrentDocumentId } from '@elementor/editor-elements';
+import { FloatingPanelBody, FloatingPanelFooter, FloatingPanelHeader } from '@elementor/editor-floating-panels';
+import { Box, Button, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useAuditReport } from '../hooks/use-audit-report';
+import AuditFeedback from './audit-feedback';
+import ErrorPage from './pages/error-page';
+import LoadingPage from './pages/loading-page';
+import WelcomePage from './pages/welcome-page';
+import ReportShell from './report-shell';
+
+export default function AuditPanel() {
+	const { status, report, error, run } = useAuditReport();
+
+	const currentDocumentId = getCurrentDocumentId() ?? 0;
+	const onRun = () => run( currentDocumentId );
+	const lastScanLabel = report ? new Date( report.runAt ).toLocaleTimeString() : null;
+
+	return (
+		<>
+			<FloatingPanelHeader
+				panelId="audit-panel"
+				title={ __( 'Page Audit', 'elementor' ) }
+				badge={ __( 'Beta', 'elementor' ) }
+				titleVariant="subtitle2"
+			/>
+			<FloatingPanelBody>
+				{ status === 'idle' && <WelcomePage /> }
+				{ status === 'loading' && <LoadingPage /> }
+				{ status === 'error' && <ErrorPage message={ error ?? '' } onRetry={ onRun } /> }
+				{ status === 'ready' && report && <ReportShell report={ report } /> }
+			</FloatingPanelBody>
+			<FloatingPanelFooter>
+				{ lastScanLabel ? (
+					<Typography variant="caption" sx={ { flex: 1 } }>
+						{ __( 'Last scan:', 'elementor' ) } { lastScanLabel }
+					</Typography>
+				) : (
+					<Box sx={ { flex: 1 } } />
+				) }
+				{ lastScanLabel && <AuditFeedback /> }
+				<Button
+					variant="contained"
+					size="small"
+					onClick={ onRun }
+					disabled={ status === 'loading' || currentDocumentId === 0 }
+				>
+					{ lastScanLabel ? __( 'Re-scan', 'elementor' ) : __( 'Run page audit', 'elementor' ) }
+				</Button>
+			</FloatingPanelFooter>
+		</>
+	);
+}

package/src/components/category-icons.ts

@@ -0,0 +1,17 @@
+import {
+	ElementorAccessibilityIcon,
+	FilterIcon,
+	HeartHandShakeIcon,
+	Settings2Icon,
+	ShieldHalfFilledIcon,
+} from '@elementor/icons';
+
+import type { AuditCategory } from '../types';
+
+export const CATEGORY_ICONS: Record< AuditCategory, typeof Settings2Icon > = {
+	'best-practices': Settings2Icon,
+	seo: FilterIcon,
+	accessibility: ElementorAccessibilityIcon,
+	performance: ShieldHalfFilledIcon,
+	compliance: HeartHandShakeIcon,
+};