Multiple, nested, repeatable Components

Hello,

im trying to create a flexible blog strucutre for my client, but it seems to be impossible, to create a component strucutre of multiple, nested, repeatable components.

The strucutre would look like this:

Blog
    Day (Day Repeatable)
        Workout Content (Repeatable)
        Workout Content...
        Workout Content...
        Relax Content (Repeable)
        Relax Content...
    Day...
    Day...

Does that make sense?

1 Blog has N “Day” is doable, but I cannot add Workout Content nor Relax Content to Day now, since the admin ui does not even list those in the “choose existing component” dropdown.

This is a major blocker for my use case: Allowing the client to add a dynamic amount of pre configured content blocks to their blog.

Any ideas?
Thanks and kind regards

Luca

Hello,
As I remember, you can achieve this with dynamic zones.

Add Day as a repeatable component and inside Day add repeatable Dynamic Zone with 2 components: Workout & Relax

1 Like

I cannot add a Dynamic Zone in “Day”.
See attachedf Screenshot (Tag means Day in German).

My fault. I forgot you can’t add dynamic zones to components.

So I achieved your needs:

Here is the BLOG structure:

2 Likes

anything special that you did?

strapi did not allow me, to add multiple repeatable components nested in each other - they just did not appear in the dropdown selection.

No, nothing special, just created the Blog (Content type), inside it i’ve added a reapetable component Day and inside Day I’ve added another 2 reapetable components Workout and Relax

alright, thanks - ill try it again later :slight_smile:

No prob, after that share here the results please. If you still can’t achieve that results we will look deeper in your case.

Ok that works, but do you know, why on earth, I cannot nest multiple components into each other?
Most of the time, the “add field” button does not offer the possibility to add another component. That would make it so much easier to create nice and reusable content blocks.

Within the admin panel, we limit the nesting to two as any more can cause very severe performance problems. You can hack it together by doing it manually in the backend but this is not a supported solution and you do so at your own risk.

If you need that level of complexity I recommend using relations

2 Likes

Hello,

I think I have the same problem. Can you maybe check if its the same issue?

I want to create three different components:

button
card
section

I want to use the button in the card-component and the card-component in the section-component.

But this is not possible. If the card has the button component I can not select it inside the section-component. This is just possible when the card has no button.

It seems that this behaviour is because these components are nested.

As long the card-component is not used inside the section-component I can add other components to it.

Unfortunately I don’t understand the suggested solution for this. I can’t use dynamic zones or relations because my elements are components. So how can I solve it in my case?

Is there a solution for this without hacking it in a not supported way? Is there a way to increase the nesting-limit to three?

And another question:

Is there anything in the documentation about this?

Thanks for some help!

Best regards,

Timo

I now just added the component manually to the card-component json-file:

"button": {
  "type": "component",
  "repeatable": false,
  "component": "elements.button"
}

Seems that everything works fine in the frontend. So is this the way to solve this?

1 Like

Any sources for how we can hack this together?
Really need this for a project. Assumed strapi would have handled this before i started (bad i know)

This is a very basic concept of design. Atom, molecule and organism. I cannot design a single page section with the current nesting limit. Is there a way to enable or override to at least 3 and make it somehow usable without manual hacks? Thanks for your attention.

2 Likes

No way to do this unfortunately (unless you want to build it yourself possibly), If you are not already too deep into the project I would say to avoid strapi. If this is something you need to do then you will find a ton more limitations along the way. Try prisma or playbooks

If you need that deep level of nest I suggest using relations and not components. What you are attempting to do with components at this level is not what we intended them to be used for.

I also believe that nesting should be possible. It’s a common usecase to nest components and in my opionion it is no argument to restrict it only for reasons of performance. It is worse when a user can’t do what he wants to do… And developers end up hacking their own solution is even worse.

2 Likes

we limit the nesting to two

Two is very constraining. Even increasing the nesting limit to 3 or 4 would really help here.

I don’t need dynamic zones in the more atomic (deeper) components, I just want modular composition of components so we can separate concerns and efficiently compose pieces of our design system.

Flattening component hierarchies to achieve 2 levels requires repeating things across components and makes it harder to build and maintain your components and content.

Can you improve performance to allow at least slightly deeper component nesting?

1 Like

Yes 3 or 4 levels would be better but it should be developers decision how many levels he needs. And what does poor performance mean? 100ms? 2 seconds longer? It’s a basic feature of a cms vs. Insufficiency of the system to deliver it. In my opinion it must be solved in order to be a real option for many projects. For now it’s a show stopper.