@decocms/blocks 7.26.0 → 7.26.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/blocks",
-  "version": "7.26.0",
+  "version": "7.26.2",
   "type": "module",
   "engines": {
     "node": ">=24"

package/src/cms/resolve.test.ts

@@ -23,6 +23,7 @@ vi.mock("./registry", () => ({
 import {
   clearCommerceLoaders,
   DEFAULT_FOLD_THRESHOLD,
+  extractSeoFromProps,
   getAsyncRenderingConfig,
   isEagerRequest,
   registerCommerceLoader,
@@ -632,6 +633,105 @@ describe("resolvePageSeoBlock — bot-aware commerce SEO", () => {
 // deferredSections array that loadDeferredSection would then try to resolve
 // without the per-request commerce app context.
 
+describe("extractSeoFromProps — commerce jsonLD structured data", () => {
+  const plp = (overrides: Record<string, unknown> = {}) => ({
+    "@type": "ProductListingPage",
+    breadcrumb: {
+      "@type": "BreadcrumbList",
+      itemListElement: [
+        { "@type": "ListItem", position: 1, item: "https://x.com/a" },
+        { "@type": "ListItem", position: 2, item: "https://x.com/a/b" },
+      ],
+    },
+    products: [{ "@type": "Product", name: "P1" }],
+    seo: { title: "PLP Title", description: "PLP Desc" },
+    ...overrides,
+  });
+
+  it("derives title/description/canonical and emits the ItemList JSON-LD (PLP)", () => {
+    // The casaevideo.com.br/eletroportateis regression: a page.seo pointing at
+    // commerce/sections/Seo/SeoPLPV2.tsx resolved its jsonLD but emitted no
+    // schema.org. There is no section component in start to run this transform.
+    const seo = extractSeoFromProps({
+      __resolveType: "commerce/sections/Seo/SeoPLPV2.tsx",
+      jsonLD: plp(),
+    });
+    expect(seo.title).toBe("PLP Title");
+    expect(seo.description).toBe("PLP Desc");
+    // Highest-position breadcrumb item wins.
+    expect(seo.canonical).toBe("https://x.com/a/b");
+    expect(seo.noIndexing).toBe(false);
+    expect(seo.jsonLDs).toHaveLength(1);
+    expect(seo.jsonLDs?.[0]).toMatchObject({ "@type": "ProductListingPage" });
+  });
+
+  it("emits the product image and JSON-LD for a PDP", () => {
+    const seo = extractSeoFromProps({
+      __resolveType: "commerce/sections/Seo/SeoPDPV2.tsx",
+      jsonLD: {
+        "@type": "ProductDetailsPage",
+        breadcrumbList: { "@type": "BreadcrumbList", itemListElement: [] },
+        product: {
+          "@type": "Product",
+          name: "Widget",
+          image: [{ url: "https://x.com/w.jpg" }],
+        },
+        seo: { title: "Widget", description: "A widget" },
+      },
+    });
+    expect(seo.title).toBe("Widget");
+    expect(seo.image).toBe("https://x.com/w.jpg");
+    expect(seo.jsonLDs?.[0]).toMatchObject({ "@type": "ProductDetailsPage" });
+  });
+
+  it("lets manual override fields win over the jsonLD-derived ones", () => {
+    const seo = extractSeoFromProps({
+      jsonLD: plp(),
+      title: "Manual Title",
+      canonical: "https://x.com/manual",
+    });
+    expect(seo.title).toBe("Manual Title");
+    expect(seo.canonical).toBe("https://x.com/manual");
+    expect(seo.jsonLDs).toHaveLength(1);
+  });
+
+  it("omits structured data when ignoreStructuredData is set", () => {
+    const seo = extractSeoFromProps({
+      jsonLD: plp(),
+      configJsonLD: { ignoreStructuredData: true },
+    });
+    expect(seo.jsonLDs).toBeUndefined();
+    // Metadata is still derived — only the ItemList is suppressed.
+    expect(seo.title).toBe("PLP Title");
+  });
+
+  it("marks an empty listing noIndexing and emits no ItemList", () => {
+    const seo = extractSeoFromProps({ jsonLD: plp({ products: [] }) });
+    expect(seo.noIndexing).toBe(true);
+    expect(seo.jsonLDs).toBeUndefined();
+  });
+
+  it("does not touch a section that already emitted jsonLDs", () => {
+    const existing = [{ "@type": "WebSite" }];
+    const seo = extractSeoFromProps({ jsonLD: plp(), jsonLDs: existing });
+    expect(seo.jsonLDs).toBe(existing);
+  });
+
+  it("removeVideos clones rather than mutating the source jsonLD", () => {
+    const source = plp({
+      products: [{ "@type": "Product", name: "P1", video: [{ "@type": "VideoObject" }] }],
+    });
+    const seo = extractSeoFromProps({
+      jsonLD: source,
+      configJsonLD: { removeVideos: true },
+    });
+    expect(seo.jsonLDs?.[0].products[0].video).toBeUndefined();
+    // Source untouched — it may be shared with a body section.
+    // biome-ignore lint/suspicious/noExplicitAny: test fixture
+    expect((source.products[0] as any).video).toBeDefined();
+  });
+});
+
 describe("resolveDecoPage — #277 client-side navigation disables deferral", () => {
   const lazySec = {
     __resolveType: WELL_KNOWN_TYPES.LAZY,

package/src/cms/resolve.ts

@@ -1693,6 +1693,110 @@ export function isSeoSection(key: string): boolean {
   return seoSectionKeys.has(key);
 }
 
+/**
+ * Canonical URL from a schema.org BreadcrumbList — the `item` of its
+ * highest-position entry. Inlined from `@decocms/apps-commerce/utils/canonical`
+ * because `blocks` cannot depend on `apps-commerce` (apps-commerce depends on
+ * blocks, so the edge would be circular).
+ */
+function canonicalFromBreadcrumb(breadcrumb: unknown): string | undefined {
+  const items = (
+    breadcrumb as { itemListElement?: { position: number; item: string }[] } | undefined
+  )?.itemListElement;
+  if (!Array.isArray(items) || items.length === 0) return undefined;
+  return items.reduce((acc, curr) => (acc.position < curr.position ? curr : acc)).item;
+}
+
+/**
+ * Shallow-prune a commerce `jsonLD` before emitting it as structured data.
+ * Clones only when a prune option is set (the common path emits as-is), so a
+ * jsonLD shared with a body section is never mutated out from under it.
+ */
+function pruneCommerceJsonLD(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  jsonLD: Record<string, any>,
+  opts: { removeVideos: boolean; omitVariants: boolean },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): Record<string, any> {
+  if (!opts.removeVideos && !opts.omitVariants) return jsonLD;
+  const clone = structuredClone(jsonLD);
+  if (opts.removeVideos && Array.isArray(clone.products)) {
+    for (const product of clone.products) {
+      product.video = undefined;
+      for (const variant of product.isVariantOf?.hasVariant ?? []) variant.video = undefined;
+    }
+  }
+  if (opts.omitVariants && clone.product?.isVariantOf?.hasVariant) {
+    clone.product.isVariantOf.hasVariant = [];
+  }
+  return clone;
+}
+
+/**
+ * Derive SEO metadata from a commerce `jsonLD` data source (a resolved
+ * ProductListingPage / ProductDetailsPage), mirroring the deco-cx
+ * `commerce/sections/Seo/Seo{PLP,PDP}V2.tsx` section loaders.
+ *
+ * Those legacy sections have no component in @decocms/start (the commerce apps
+ * ship loaders/types, not sections), so nothing else runs this transform.
+ * Without it, PLP/PDP pages whose `page.seo` points at those types emit a
+ * <title>/canonical (from top-level override props) but NO schema.org
+ * structured data — the casaevideo.com.br/eletroportateis regression.
+ *
+ * Manual override fields already read into `seo` always win; this only fills
+ * gaps and appends the JSON-LD. The caller guards on `seo.jsonLDs` so a real
+ * site SEO section that already computed structured data is never touched.
+ */
+function deriveCommerceSeoFromJsonLD(seo: PageSeo, props: Record<string, unknown>): void {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const jsonLD = props.jsonLD as Record<string, any> | undefined;
+  if (!jsonLD) return;
+  const type = jsonLD["@type"];
+  if (type !== "ProductListingPage" && type !== "ProductDetailsPage") return;
+
+  const jsonLDSeo = jsonLD.seo as
+    | { title?: string; description?: string; canonical?: string; noIndexing?: boolean }
+    | null
+    | undefined;
+
+  if (!seo.title && jsonLDSeo?.title) seo.title = jsonLDSeo.title;
+  if (!seo.description && jsonLDSeo?.description) seo.description = jsonLDSeo.description;
+  if (!seo.canonical) {
+    seo.canonical =
+      jsonLDSeo?.canonical ||
+      canonicalFromBreadcrumb(
+        type === "ProductListingPage" ? jsonLD.breadcrumb : jsonLD.breadcrumbList,
+      );
+  }
+  if (type === "ProductDetailsPage" && !seo.image) {
+    seo.image = jsonLD.product?.image?.[0]?.url;
+  }
+
+  const isEmpty =
+    type === "ProductListingPage"
+      ? !Array.isArray(jsonLD.products) || jsonLD.products.length === 0
+      : !jsonLD.product;
+  if (seo.noIndexing === undefined) {
+    seo.noIndexing = isEmpty || jsonLDSeo?.noIndexing || false;
+  }
+
+  // Structured data — opt out via `ignoreStructuredData` (top-level on PDP,
+  // under `configJsonLD` on PLP). An empty page contributes no ItemList.
+  const configJsonLD = props.configJsonLD as
+    | { ignoreStructuredData?: boolean; removeVideos?: boolean }
+    | undefined;
+  const ignore =
+    props.ignoreStructuredData === true || configJsonLD?.ignoreStructuredData === true;
+  if (ignore || isEmpty) return;
+
+  seo.jsonLDs = [
+    pruneCommerceJsonLD(jsonLD, {
+      removeVideos: configJsonLD?.removeVideos === true,
+      omitVariants: props.omitVariants === true,
+    }),
+  ];
+}
+
 /**
  * Pick standard SEO fields from a props object.
  * Works for both framework SEO types (SeoV2) and site SEO sections (SEOPDP).
@@ -1709,6 +1813,10 @@ export function extractSeoFromProps(props: Record<string, unknown>): PageSeo {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     seo.jsonLDs = props.jsonLDs as Record<string, any>[];
   }
+  // Legacy commerce PLP/PDP sections carry a `jsonLD` data source with no
+  // component to turn it into structured data — derive it here (only when a
+  // real SEO section hasn't already emitted `jsonLDs`).
+  if (!seo.jsonLDs) deriveCommerceSeoFromJsonLD(seo, props);
   return seo;
 }
 

package/src/cms/schema.test.ts

@@ -238,6 +238,70 @@ describe("composeMeta framework option", () => {
   });
 });
 
+describe("commerce SEO section schemas", () => {
+  const b64Ref = (key: string) => ({ $ref: `#/definitions/${b64(key)}` });
+
+  it("emits editable props for the product-listing SEO section (plp mode)", () => {
+    const def = definitionFor("commerce/sections/Seo/SeoPLPV2.tsx");
+    // Without a schema here, resolveSchema() returns null and the Studio SEO
+    // editor renders no fields — the "não tem props" bug.
+    expect(def).toBeDefined();
+    const props = def.properties;
+    expect(props).toHaveProperty("title");
+    expect(props).toHaveProperty("description");
+    expect(props).toHaveProperty("noIndexing");
+    // PLP-specific structured-data config (see seo-form-mode.ts PLP_SEO_FIELD_KEYS).
+    expect(props.configJsonLD.properties).toHaveProperty("removeVideos");
+    expect(props.configJsonLD.properties).toHaveProperty("ignoreStructuredData");
+    // The data source is set once at creation and stays hidden in the SEO panel;
+    // it round-trips via the form rather than being re-picked here.
+    expect(props.jsonLD.hide).toBe(true);
+  });
+
+  it("emits editable props for the product-details SEO section (pdp mode)", () => {
+    const def = definitionFor("commerce/sections/Seo/SeoPDPV2.tsx");
+    expect(def).toBeDefined();
+    const props = def.properties;
+    expect(props).toHaveProperty("title");
+    expect(props).toHaveProperty("description");
+    expect(props).toHaveProperty("noIndexing");
+    // PDP-specific fields (see seo-form-mode.ts PDP_SEO_FIELD_KEYS).
+    expect(props).toHaveProperty("omitVariants");
+    expect(props).toHaveProperty("ignoreStructuredData");
+    expect(props.jsonLD.hide).toBe(true);
+  });
+
+  it("always registers the defs + manifest blocks so existing pages resolve", () => {
+    const meta = composeMeta(emptySiteMeta());
+    for (const key of [
+      "commerce/sections/Seo/SeoPLPV2.tsx",
+      "commerce/sections/Seo/SeoPDPV2.tsx",
+    ]) {
+      expect(meta.manifest.blocks.sections).toHaveProperty(key);
+      expect(meta.schema.definitions).toHaveProperty(b64(key));
+    }
+  });
+
+  it("offers them as page.seo options only on a commerce site", () => {
+    // "commerce site" = product-list loaders registered (the signal
+    // buildFrameworkSections gates the picker on). The key must match
+    // inferLoaderTags so it is tagged "product-list".
+    registerAppSchemas({
+      namespace: "vtex",
+      loaders: {
+        "vtex/loaders/test/ProductListForSeoPicker.ts": { type: "object", properties: {} },
+      },
+    });
+    const meta = composeMeta(emptySiteMeta());
+    for (const key of [
+      "commerce/sections/Seo/SeoPLPV2.tsx",
+      "commerce/sections/Seo/SeoPDPV2.tsx",
+    ]) {
+      expect(meta.schema.root.sections.anyOf).toContainEqual(b64Ref(key));
+    }
+  });
+});
+
 describe("composeMeta idempotency", () => {
   it("returns an already-composed meta unchanged (no double-compose)", () => {
     const once = composeMeta(emptySiteMeta());

package/src/cms/schema.ts

@@ -736,6 +736,12 @@ function buildFrameworkSections(sectionAnyOf: any[]) {
   const manifestBlocks: Record<string, any> = {};
   const extraAnyOf: any[] = [];
 
+  // A site is "commerce" when it registered product-list loaders (same signal
+  // wrapResolvableProperties uses). Gates whether the commerce SEO section types
+  // below are offered as pickable page.seo options — a blog site should not see
+  // "Product listing SEO" in the SEO type dropdown.
+  const hasCommerce = getProductListLoaderKeys().length > 0;
+
   // --- website/sections/Rendering/Lazy.tsx ---
   const LAZY_TYPE = "website/sections/Rendering/Lazy.tsx";
   const lazyKey = toBase64(LAZY_TYPE);
@@ -833,6 +839,89 @@ function buildFrameworkSections(sectionAnyOf: any[]) {
   };
   extraAnyOf.push({ $ref: `#/definitions/${seoV2Key}` });
 
+  // --- commerce/sections/Seo/SeoPLPV2.tsx ---
+  // Product-listing SEO. Its schema is synthesized here (like the website Seo
+  // sections) because the commerce apps ship loaders/types, not sections — so
+  // there is no manifest to emit these props from. The Studio's SEO editor
+  // already knows this type as its "plp" mode (see seo-form-mode.ts); it just
+  // needs the props schema to render the override fields. `jsonLD` is the
+  // data-source block-ref set once when the page is created; it round-trips via
+  // the form (kept `hide`) rather than being re-picked in the SEO panel.
+  //
+  // The def + manifest block are always registered so the SEO editor can resolve
+  // a schema for pages already on these types. They are added to `extraAnyOf`
+  // (offered as a selectable page.seo type) only on commerce sites, so a blog
+  // does not get "Product listing SEO" in its SEO type dropdown.
+  const SEO_PLP_V2_TYPE = "commerce/sections/Seo/SeoPLPV2.tsx";
+  const seoPlpV2Key = toBase64(SEO_PLP_V2_TYPE);
+  definitions[seoPlpV2Key] = {
+    title: SEO_PLP_V2_TYPE,
+    type: "object",
+    required: ["__resolveType"],
+    properties: {
+      __resolveType: {
+        type: "string",
+        enum: [SEO_PLP_V2_TYPE],
+        default: SEO_PLP_V2_TYPE,
+      },
+      jsonLD: {
+        type: "object",
+        title: "Data Source",
+        additionalProperties: true,
+        hide: true,
+      },
+      title: { type: "string", title: "Title Override" },
+      description: { type: "string", title: "Description Override" },
+      noIndexing: { type: "boolean", title: "Disable indexing" },
+      configJsonLD: {
+        type: "object",
+        title: "Structured Data",
+        properties: {
+          removeVideos: { type: "boolean", title: "Remove videos" },
+          ignoreStructuredData: { type: "boolean", title: "Ignore Structured Data" },
+        },
+      },
+    },
+  };
+  manifestBlocks[SEO_PLP_V2_TYPE] = {
+    $ref: `#/definitions/${seoPlpV2Key}`,
+    namespace: "commerce",
+  };
+  if (hasCommerce) extraAnyOf.push({ $ref: `#/definitions/${seoPlpV2Key}` });
+
+  // --- commerce/sections/Seo/SeoPDPV2.tsx ---
+  // Product-details SEO. Studio "pdp" mode counterpart of the PLP section above.
+  const SEO_PDP_V2_TYPE = "commerce/sections/Seo/SeoPDPV2.tsx";
+  const seoPdpV2Key = toBase64(SEO_PDP_V2_TYPE);
+  definitions[seoPdpV2Key] = {
+    title: SEO_PDP_V2_TYPE,
+    type: "object",
+    required: ["__resolveType"],
+    properties: {
+      __resolveType: {
+        type: "string",
+        enum: [SEO_PDP_V2_TYPE],
+        default: SEO_PDP_V2_TYPE,
+      },
+      jsonLD: {
+        type: "object",
+        title: "Data Source",
+        additionalProperties: true,
+        hide: true,
+      },
+      omitVariants: { type: "boolean", title: "Omit variants" },
+      title: { type: "string", title: "Title Override" },
+      description: { type: "string", title: "Description Override" },
+      noIndexing: { type: "boolean", title: "Disable indexing" },
+      ignoreStructuredData: { type: "boolean", title: "Ignore Structured Data" },
+    },
+  };
+  manifestBlocks[SEO_PDP_V2_TYPE] = {
+    $ref: `#/definitions/${seoPdpV2Key}`,
+    namespace: "commerce",
+  };
+  if (hasCommerce) extraAnyOf.push({ $ref: `#/definitions/${seoPdpV2Key}` });
+
   // --- website/flags/multivariate/section.ts ---
   const MV_SECTION_TYPE = "website/flags/multivariate/section.ts";
   const mvSectionKey = toBase64(MV_SECTION_TYPE);