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

package/dist/index.mjs

@@ -77,17 +77,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 httpService().get(url, {
       params: {
         document_id: documentId,
-        attachment_ids: attachmentIds
+        image_size_requests: imageSizeRequests
       },
       headers: { "X-WP-Nonce": nonce }
     });
@@ -97,7 +97,7 @@ async function requestPageContext(documentId, attachmentIds, allowNonceRetry) {
       throw error;
     }
     await refreshAuditsNonce();
-    return requestPageContext(documentId, attachmentIds, false);
+    return requestPageContext(documentId, imageSizeRequests, false);
   }
 }
 
@@ -282,6 +282,23 @@ function computeReport(documentId, results) {
   };
 }
 
+// src/utils/atomic-background-image-sources.ts
+import { getElementStyles } from "@elementor/editor-elements";
+import {
+  backgroundImageOverlayPropTypeUtil,
+  backgroundOverlayPropTypeUtil,
+  backgroundPropTypeUtil
+} from "@elementor/editor-props";
+
+// src/utils/atomic-image-sources.ts
+import {
+  imageAttachmentIdPropType,
+  imagePropTypeUtil,
+  imageSrcPropTypeUtil,
+  stringPropTypeUtil,
+  urlPropTypeUtil
+} from "@elementor/editor-props";
+
 // src/utils/walk.ts
 function walkElements(tree, visit) {
   const parents = [];
@@ -296,6 +313,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 = imagePropTypeUtil.extract(imageProp);
+  if (!image) {
+    return null;
+  }
+  const src = imageSrcPropTypeUtil.extract(image.src);
+  if (!src) {
+    return null;
+  }
+  const id = imageAttachmentIdPropType.extract(src.id) ?? void 0;
+  const url = urlPropTypeUtil.extract(src.url) ?? void 0;
+  if (!id && !url) {
+    return null;
+  }
+  const size = 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 = 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 = 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;
+}
+
+// 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) {
@@ -324,28 +424,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
@@ -440,8 +550,8 @@ function toSnapshot(element) {
 // src/runner.ts
 async function runPageAudit(documentId) {
   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 = { documentId, tree };
   const kit = await readKitSnapshot(pageContext.kit_id);
   const ctx = { documentId, elements, pageContext, kit };
@@ -2361,7 +2471,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;
@@ -2419,17 +2530,18 @@ var audit10 = {
   severity: "warning",
   weight: 7,
   evaluate: (ctx) => {
-    if (!hasPageImages(ctx.elements.tree)) {
-      return { status: "skipped", reason: __34("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;
       }
@@ -2437,7 +2549,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: __34("No images", "elementor") };
+    }
     const violations = Array.from(widgetMaxKb.entries()).map(([elementId, kb]) => ({
       auditId: audit10.id,
       elementId,