Nesting blocks in Universal Editor – Section > Tabs > Tab > Carousel not working

[VijayRa10]

Hi everyone,
I'm trying to create a nested block structure in Universal Editor using the following JSON definition:

{
  "definitions": [
    {
      "title": "Tabs",
      "id": "tabs",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block",
            "template": {
              "name": "Tabs",
              "model": "tabs",
              "filter": "tabs"
            }
          }
        }
      }
    },
    {
      "title": "Tab",
      "id": "tab",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block/item",
            "template": {
              "name": "Tab",
              "model": "tab",
              "filter": "tab"
            }
          }
        }
      }
    }
  ],
  "models": [],
  "filters": [
    {
      "id": "tabs",
      "components": ["tab"]
    },
    {
      "id": "tab",
      "components": ["teaser", "carousel"]
    }
  ]
}

My goal is to achieve this structure:

- Section
- Tabs [container]
 - Tab [container]
   - Carousel (or other blocks like text, title, etc) [component]

However, I'm not getting the option to add components inside the tab block in the editor UI. Is there a limitation with nesting blocks like this in the Universal Editor, or am I missing a configuration detail?

[AmitVishwakarma]

Hi @VijayRa10 ,

To make nested structures like Tabs > Tab > Carousel work in the Universal Editor, ensure:

Both tabs and tab have "container": true in the models array

Your filters allow tab inside tabs, and components like carousel inside tab

The resourceType and template.model are consistently mapped

Example:

"models": [
  { "id": "tabs", "container": true },
  { "id": "tab", "container": true }
],
"filters": [
  { "id": "tabs", "components": ["tab"] },
  { "id": "tab", "components": ["carousel", "teaser", "text", "title"] }
]

Hope this helps

[MatthewDa19 · Accepted solution]

@AmitVishwakarma LOL ChatGPT!
You could’ve at least cut down or reworded the answer instead of just copying and pasting it. We're not here for answers like that - it doesn’t add any real value. We can figure that out ourselves too.

[SantoshSai]

Hi @VijayRa10,

Try this

{
  "definitions": [
    {
      "title": "Tabs",
      "id": "tabs",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block",
            "template": {
              "name": "Tabs",
              "model": "tabs",
              "filter": "tabs"
            }
          }
        }
      }
    },
    {
      "title": "Tab",
      "id": "tab",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block/item",
            "template": {
              "name": "Tab",
              "model": "tab",
              "filter": "tab"
            }
          }
        }
      }
    }
  ],
  "models": [
    {
      "id": "tabs",
      "components": ["tab"]
    },
    {
      "id": "tab",
      "components": ["teaser", "carousel"]
    }
  ],
  "filters": [
    {
      "id": "tabs",
      "components": ["tab"]
    },
    {
      "id": "tab",
      "components": ["teaser", "carousel"]
    }
  ]
}

[aanchal-sikka]

@VijayRa10 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[VijayRa10]

hey @aanchal-sikka  No, the suggested solutions appear to be generated by ChatGPT and are not applicable within the context of Adobe Edge Delivery Services (EDS).

[shravani_priya_bachu]

Hi @VijayRa10 Have you found any solution to this?
Please share it here, if you have found any.