Multifield container generates empty HTML or duplicate blocks in Universal Editor

A multifield container in Universal Editor for Edge Delivery (xwalk/xcom) renders empty HTML elements or duplicates block markup when configured with a multi-valued container field. To resolve the issue, migrate to a container and item block pattern.

Description description

Environment

  • Product: Adobe Experience Manager as a Cloud Service (AEMaaCS) – Sites
  • Scenario: Edge Delivery (xwalk/xcom) with Universal Editor

Issue/Symptoms

  • Container-authored items fail to generate the expected HTML output, resulting in empty <div> elements.
  • Adding multiple fields to the multifield component renders duplicate block HTML for a single container instance.
  • Refreshing the editor view temporarily removes duplicate blocks, but duplication reappears after subsequent edits.

Resolution resolution

Follow the steps below to address the issue:

  1. Remove the multi-valued container field from the existing component model to stop duplicate or empty markup generation.

  2. Keep simple fields such as top and bottom text in the parent container block model to maintain layout-level content.

  3. Create a dedicated item block model and define individual fields for each item, such as text or image fields. Example item block and container model structure:

    code language-none
    {
          "definitions": [
            {
              "title": "Multifield Container",
              "id": "multifield-container-component",
              "plugins": {
                "xwalk": {
                  "page": {
                    "resourceType": "core/franklin/components/block/v1/block",
                    "template": {
                      "name": "multifield-container-component",
                      "model": "multifield-container-component",
                      "filter": "multifield-container-component"
                    }
                  }
                }
              }
            },
            {
              "title": "Multifield Container Item",
              "id": "multifield-container-item",
              "plugins": {
                "xwalk": {
                  "page": {
                    "resourceType": "core/franklin/components/block/v1/block",
                    "template": {
                      "name": "multifield-container-item",
                      "model": "multifield-container-item"
                    }
                  }
                }
              }
            }
          ] ,
          "models": [
            {
              "id": "multifield-container-component",
              "fields": [
                {
                  "component": "text",
                  "name": "topText",
                  "label": "Top of container",
                  "valueType": "string"
                },
                {
                  "component": "text",
                  "name": "bottomText",
                  "label": "Bottom of container",
                  "valueType": "string"
                }
              ]
            },
            {
              "id": "multifield-container-item",
              "fields": [
                {
                  "component": "text",
                  "name": "itemText",
                  "label": "Item text",
                  "valueType": "string"
                },
                {
                  "component": "reference",
                  "name": "itemImage",
                  "label": "Item image",
                  "valueType": "string",
                  "multi": false
                },
                {
                  "component": "text",
                  "name": "itemImageAlt",
                  "label": "Item image alt text",
                  "valueType": "string"
                }
              ]
            }
          ] ,
          "filters": [
            {
              "id": "multifield-container-component",
              "components": [ "multifield-container-item"]
            }
          ]
        }
    
  4. Configure filters in Universal Editor to allow item blocks under the parent container block. In this example, the filter ensures that the container accepts only item blocks:

    code language-none
    {      "id": "multifield-container-component",
      "components": [ "multifield-container-item"]
    }
    

    The container definition must reference this filter: "filter": "multifield-container-component", and the filter with id: "multifield-container-component" restricts the container to accept only multifield-container-item.

  5. Update parent components by replacing multifield-based nested containers with child block slots that accept item blocks.

  6. Add block scripts for both container and item blocks if the project setup requires them.

  7. Build and deploy the updated models and components through the standard pipeline.

  8. Re-author content in Universal Editor by adding one item block for each required entry inside the container block.

  9. Validate the output to confirm each block renders once and generates clean, non-duplicated HTML.

Model Behavior - Item block model (multifield-container-item)

  • Each authored entry creates one block instance with:

    • itemText (text)
    • itemImage (reference) - typically resolves to an image when the referenced DAM asset is an image
    • itemImageAlt (text) - used for image alt text

Notes:

  • Universal Editor treats the multi-valued container field pattern (component: "container", multi: true) as early access, which leads to unstable rendering and block duplication in Edge Delivery environments.
  • Setting multi: true to multi: false prevents duplication but restricts authoring to a single container entry.
  • Using a container block with item blocks aligns with supported Universal Editor models and ensures consistent, stable HTML rendering.
recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f