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

package/dist/index.d.mts

@@ -46,7 +46,8 @@ type PageContextResponse = {
     post_title: string | null;
     post_excerpt: string | null;
     featured_image_id: number | null;
-    image_sizes: Record<number, {
+    /** Keyed by the composite `buildImageSizeKey` result (`"{attachmentId}:{size}"`), since one attachment can resolve to different files at different sizes. */
+    image_sizes: Record<string, {
         width: number;
         height: number;
         filesize_bytes: number;

package/dist/index.d.ts

@@ -46,7 +46,8 @@ type PageContextResponse = {
     post_title: string | null;
     post_excerpt: string | null;
     featured_image_id: number | null;
-    image_sizes: Record<number, {
+    /** Keyed by the composite `buildImageSizeKey` result (`"{attachmentId}:{size}"`), since one attachment can resolve to different files at different sizes. */
+    image_sizes: Record<string, {
         width: number;
         height: number;
         filesize_bytes: number;

package/dist/index.js

@@ -52,18 +52,18 @@ var import_editor_floating_panels2 = require("@elementor/editor-floating-panels"
 
 // src/components/audit-panel.tsx
 var React25 = __toESM(require("react"));
-var import_editor_elements5 = require("@elementor/editor-elements");
+var import_editor_elements6 = require("@elementor/editor-elements");
 var import_editor_floating_panels = require("@elementor/editor-floating-panels");
 var import_ui24 = require("@elementor/ui");
 var import_i18n23 = require("@wordpress/i18n");
 
 // src/hooks/use-audit-report.ts
 var import_react = require("react");
-var import_editor_elements2 = require("@elementor/editor-elements");
+var import_editor_elements3 = require("@elementor/editor-elements");
 var import_store2 = require("@elementor/store");
 
 // src/runner.ts
-var import_editor_elements = require("@elementor/editor-elements");
+var import_editor_elements2 = require("@elementor/editor-elements");
 
 // src/api/page-context-client.ts
 var import_http_client = require("@elementor/http-client");
@@ -115,17 +115,17 @@ async function requestFreshNonce() {
 }
 
 // src/api/page-context-client.ts
-async function fetchPageContext(documentId, attachmentIds) {
-  return requestPageContext(documentId, attachmentIds, true);
+async function fetchPageContext(documentId, imageSizeRequests) {
+  return requestPageContext(documentId, imageSizeRequests, true);
 }
-async function requestPageContext(documentId, attachmentIds, allowNonceRetry) {
+async function requestPageContext(documentId, imageSizeRequests, allowNonceRetry) {
   const { restNamespace, nonce } = getWindowConfig();
   const url = `${restNamespace}/audits/page-context`;
   try {
     const response = await (0, import_http_client.httpService)().get(url, {
       params: {
         document_id: documentId,
-        attachment_ids: attachmentIds
+        image_size_requests: imageSizeRequests
       },
       headers: { "X-WP-Nonce": nonce }
     });
@@ -135,7 +135,7 @@ async function requestPageContext(documentId, attachmentIds, allowNonceRetry) {
       throw error;
     }
     await refreshAuditsNonce();
-    return requestPageContext(documentId, attachmentIds, false);
+    return requestPageContext(documentId, imageSizeRequests, false);
   }
 }
 
@@ -320,6 +320,13 @@ function computeReport(documentId, results) {
   };
 }
 
+// src/utils/atomic-background-image-sources.ts
+var import_editor_elements = require("@elementor/editor-elements");
+var import_editor_props2 = require("@elementor/editor-props");
+
+// src/utils/atomic-image-sources.ts
+var import_editor_props = require("@elementor/editor-props");
+
 // src/utils/walk.ts
 function walkElements(tree, visit) {
   const parents = [];
@@ -334,6 +341,89 @@ function recurse(nodes, parents, visit) {
   }
 }
 
+// src/utils/atomic-image-sources.ts
+var ATOMIC_IMAGE_PROP_KEYS = ["image", "poster"];
+function walkAtomicImageSources(tree, visit) {
+  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 });
+      }
+    }
+  });
+}
+function extractAtomicImageMedia(imageProp) {
+  const image = import_editor_props.imagePropTypeUtil.extract(imageProp);
+  if (!image) {
+    return null;
+  }
+  const src = import_editor_props.imageSrcPropTypeUtil.extract(image.src);
+  if (!src) {
+    return null;
+  }
+  const id = import_editor_props.imageAttachmentIdPropType.extract(src.id) ?? void 0;
+  const url = import_editor_props.urlPropTypeUtil.extract(src.url) ?? void 0;
+  if (!id && !url) {
+    return null;
+  }
+  const size = import_editor_props.stringPropTypeUtil.extract(image.size) ?? void 0;
+  return { id, url, size };
+}
+
+// src/utils/atomic-background-image-sources.ts
+function walkAtomicBackgroundImageSources(tree, visit) {
+  walkElements(tree, (node) => {
+    const styles = (0, import_editor_elements.getElementStyles)(node.id);
+    if (!styles) {
+      return;
+    }
+    for (const media of extractBackgroundImageMedia(styles)) {
+      visit({ node, media });
+    }
+  });
+}
+function extractBackgroundImageMedia(styles) {
+  const sources = [];
+  for (const style of Object.values(styles)) {
+    for (const variant of style.variants) {
+      const background = import_editor_props2.backgroundPropTypeUtil.extract(variant.props.background);
+      const overlays = import_editor_props2.backgroundOverlayPropTypeUtil.extract(background?.["background-overlay"]) ?? [];
+      for (const overlay of overlays) {
+        const imageOverlay = import_editor_props2.backgroundImageOverlayPropTypeUtil.extract(overlay);
+        const media = extractAtomicImageMedia(imageOverlay?.image);
+        if (media) {
+          sources.push(media);
+        }
+      }
+    }
+  }
+  return sources;
+}
+
+// src/utils/background-image-sources.ts
+var BACKGROUND_IMAGE_SETTING_KEYS = [
+  "background_image",
+  "background_hover_image",
+  "background_overlay_image",
+  "background_overlay_hover_image",
+  "_background_image",
+  "_background_hover_image"
+];
+function walkBackgroundImageSources(tree, visit) {
+  walkElements(tree, (node) => {
+    for (const key of BACKGROUND_IMAGE_SETTING_KEYS) {
+      const media = node.settings[key];
+      if (media?.id || media?.url) {
+        visit({ node, media });
+      }
+    }
+  });
+}
+
 // src/utils/image-like-sources.ts
 var IMAGE_LIKE_WIDGETS = /* @__PURE__ */ new Set(["image", "image-box", "image-carousel", "gallery", "image-gallery"]);
 function hasPageImages(tree) {
@@ -362,28 +452,38 @@ function collectMediaFromNode(node) {
   const sources = [];
   const image = node.settings.image;
   if (image?.id || image?.url) {
-    sources.push(image);
+    sources.push({ ...image, size: node.settings.image_size });
   }
   const gallery = node.settings.carousel ?? node.settings.gallery ?? node.settings.wp_gallery;
   if (Array.isArray(gallery)) {
+    const gallerySize = node.settings.thumbnail_size;
     for (const item of gallery) {
       if (item?.id || item?.url) {
-        sources.push(item);
+        sources.push({ ...item, size: gallerySize });
       }
     }
   }
   return sources;
 }
 
+// src/utils/image-size-key.ts
+function buildImageSizeKey({ id, size }) {
+  return `${id}:${size || "full"}`;
+}
+
 // src/utils/page-attachments.ts
-function extractAttachmentIds(tree) {
-  const ids = /* @__PURE__ */ new Set();
-  walkImageLikeSources(tree, ({ media }) => {
+function extractImageSizeRequests(tree) {
+  const keys = /* @__PURE__ */ new Set();
+  const collect = (media) => {
     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();
 }
 
 // src/utils/read-kit-snapshot.ts
@@ -477,9 +577,9 @@ function toSnapshot(element) {
 
 // src/runner.ts
 async function runPageAudit(documentId) {
-  const tree = buildSnapshotTree((0, import_editor_elements.getElements)());
-  const attachmentIds = extractAttachmentIds(tree);
-  const pageContext = await fetchPageContext(documentId, attachmentIds);
+  const tree = buildSnapshotTree((0, import_editor_elements2.getElements)());
+  const imageSizeRequests = extractImageSizeRequests(tree);
+  const pageContext = await fetchPageContext(documentId, imageSizeRequests);
   const elements = { documentId, tree };
   const kit = await readKitSnapshot(pageContext.kit_id);
   const ctx = { documentId, elements, pageContext, kit };
@@ -563,7 +663,7 @@ function useAuditReport() {
   const report = (0, import_store2.__useSelector)((state) => selectReport(state));
   const error = (0, import_store2.__useSelector)((state) => selectError(state));
   const dispatch = (0, import_store2.__useDispatch)();
-  const documentId = (0, import_editor_elements2.getCurrentDocumentId)() ?? 0;
+  const documentId = (0, import_editor_elements3.getCurrentDocumentId)() ?? 0;
   (0, import_react.useEffect)(() => {
     if (!documentId || report?.documentId === documentId) {
       return;
@@ -820,20 +920,20 @@ function SubpageHeader({ title, onBack, backLabel, icon }) {
 // src/components/violation-row.tsx
 var React11 = __toESM(require("react"));
 var import_react4 = require("react");
-var import_editor_elements4 = require("@elementor/editor-elements");
+var import_editor_elements5 = require("@elementor/editor-elements");
 var import_icons7 = require("@elementor/icons");
 var import_ui10 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
 
 // src/hooks/focus-violation.ts
-var import_editor_elements3 = require("@elementor/editor-elements");
+var import_editor_elements4 = require("@elementor/editor-elements");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var SCROLL_TO_VIEW_DELAY_MS = 200;
 function focusViolation(violation) {
   if (violation.elementId) {
-    const container = (0, import_editor_elements3.getContainer)(violation.elementId);
+    const container = (0, import_editor_elements4.getContainer)(violation.elementId);
     if (container) {
-      (0, import_editor_elements3.selectElement)(violation.elementId);
+      (0, import_editor_elements4.selectElement)(violation.elementId);
       const domElement = container.view?.getDomElement?.();
       if (domElement) {
         window.elementor?.helpers?.scrollToView?.(domElement, SCROLL_TO_VIEW_DELAY_MS);
@@ -1036,8 +1136,8 @@ function ViolationRow({ audit: audit23, skipReason, violations }) {
     /* @__PURE__ */ React11.createElement(import_ui10.AlertTitle, null, /* @__PURE__ */ React11.createElement(import_ui10.Typography, { variant: "caption", component: "p", color: "text.primary", fontWeight: "bold" }, (0, import_i18n11.__)("How to resolve", "elementor"))),
     /* @__PURE__ */ React11.createElement(import_ui10.Typography, { variant: "caption", component: "p", color: "text.secondary" }, audit23.fixHint)
   )), violations && violations.length > 0 && /* @__PURE__ */ React11.createElement(import_ui10.Box, { role: "list", sx: { paddingBlockEnd: 1, paddingInlineStart: 2 } }, violations.map((violation, idx) => {
-    const widgetIcon = violation.elementId ? (0, import_editor_elements4.getElementIcon)(violation.elementId) : null;
-    const elementTitle = violation.elementId ? (0, import_editor_elements4.getElementTitle)(violation.elementId) : null;
+    const widgetIcon = violation.elementId ? (0, import_editor_elements5.getElementIcon)(violation.elementId) : null;
+    const elementTitle = violation.elementId ? (0, import_editor_elements5.getElementTitle)(violation.elementId) : null;
     const rowLabel = elementTitle ? `${elementTitle} - ${violation.label}` : violation.label;
     return /* @__PURE__ */ React11.createElement(
       import_ui10.Box,
@@ -1768,7 +1868,7 @@ function ReportShell({ report }) {
 // src/components/audit-panel.tsx
 function AuditPanel() {
   const { status, report, error, run } = useAuditReport();
-  const currentDocumentId = (0, import_editor_elements5.getCurrentDocumentId)() ?? 0;
+  const currentDocumentId = (0, import_editor_elements6.getCurrentDocumentId)() ?? 0;
   const onRun = () => run(currentDocumentId);
   const lastScanLabel = report ? new Date(report.runAt).toLocaleTimeString() : null;
   return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(
@@ -1899,7 +1999,7 @@ var audit2 = {
 };
 
 // src/audits/deep-nesting.ts
-var import_editor_elements6 = require("@elementor/editor-elements");
+var import_editor_elements7 = require("@elementor/editor-elements");
 var import_i18n27 = require("@wordpress/i18n");
 var MAX_NESTING_DEPTH = 6;
 function isNestingElement(node, widgetsCache) {
@@ -1923,7 +2023,7 @@ var audit3 = {
     if (ctx.elements.tree.length === 0) {
       return { status: "skipped", reason: (0, import_i18n27.__)("No elements", "elementor") };
     }
-    const widgetsCache = (0, import_editor_elements6.getWidgetsCache)();
+    const widgetsCache = (0, import_editor_elements7.getWidgetsCache)();
     const violations = [];
     walkElements(ctx.elements.tree, (node, parents) => {
       if (!isNestingElement(node, widgetsCache)) {
@@ -1974,7 +2074,7 @@ var audit4 = {
 };
 
 // src/audits/deprecated-widgets.ts
-var import_editor_elements7 = require("@elementor/editor-elements");
+var import_editor_elements8 = require("@elementor/editor-elements");
 var import_i18n29 = require("@wordpress/i18n");
 var DEPRECATION_CONTROL_NAME = "deprecation_message";
 var audit5 = {
@@ -1989,7 +2089,7 @@ var audit5 = {
   severity: "warning",
   weight: 7,
   evaluate: (ctx) => {
-    const widgetsCache = (0, import_editor_elements7.getWidgetsCache)();
+    const widgetsCache = (0, import_editor_elements8.getWidgetsCache)();
     if (!widgetsCache) {
       return { status: "skipped", reason: "widgets-cache-unavailable" };
     }
@@ -2387,7 +2487,8 @@ function hasMeaningfulAlt(media, pageContext) {
     return true;
   }
   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;
   }
   return (media.alt ?? "").trim().length > 0;
@@ -2445,17 +2546,18 @@ var audit10 = {
   severity: "warning",
   weight: 7,
   evaluate: (ctx) => {
-    if (!hasPageImages(ctx.elements.tree)) {
-      return { status: "skipped", reason: (0, import_i18n34.__)("No images", "elementor") };
-    }
     const widgetMaxKb = /* @__PURE__ */ new Map();
     let oversizedImageCount = 0;
-    walkImageLikeSources(ctx.elements.tree, ({ node, media }) => {
+    let hasAnyImage = false;
+    const evaluateSource = (node, media) => {
+      if (media.id || media.url) {
+        hasAnyImage = true;
+      }
       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;
       }
@@ -2463,7 +2565,14 @@ var audit10 = {
       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: (0, import_i18n34.__)("No images", "elementor") };
+    }
     const violations = Array.from(widgetMaxKb.entries()).map(([elementId, kb]) => ({
       auditId: audit10.id,
       elementId,
@@ -3003,7 +3112,7 @@ var audit21 = {
 };
 
 // src/audits/too-many-widgets.ts
-var import_editor_elements8 = require("@elementor/editor-elements");
+var import_editor_elements9 = require("@elementor/editor-elements");
 var import_i18n46 = require("@wordpress/i18n");
 var WIDGET_COUNT_THRESHOLD = 100;
 function isCountableWidget(node, widgetsCache) {
@@ -3024,7 +3133,7 @@ var audit22 = {
     if (ctx.elements.tree.length === 0) {
       return { status: "skipped", reason: (0, import_i18n46.__)("No elements", "elementor") };
     }
-    const widgetsCache = (0, import_editor_elements8.getWidgetsCache)();
+    const widgetsCache = (0, import_editor_elements9.getWidgetsCache)();
     let widgetCount = 0;
     walkElements(ctx.elements.tree, (node) => {
       if (isCountableWidget(node, widgetsCache)) {