Enable dynamic zone in components

[benderillo]

What does it do?

This change enables Dynamic Zone rendering and functioning inside a Component.
Without this change the DynamicZone added manually into the json model file will not render or function in the Admin UI.
See here: and here for details.

NOTE: This is dirty and most likely not production-ready solution but it allows me to have the functionality I need while the official upstream repo is lacking it. According to official comments from the Strapi team, it is unlikely they will have any alternative any time soon.

Why is it needed?

The case for using components over relations

The upstream Strapi implementation restricts use of DynamicZone to the content types only.
However, for the good content creation experience the current version of the entry editor lacks the ability to create child/related entries of other types from within the parent one.
For example, if we have a type Course that has a relation to a type lesson. Ideal flow for a course creator would be to create a Course and while filling in the course details to be able to create and add new lessons without needing to go to the lessons collection first and creating all the lessons first. It should be all in one place experience.
At the moment, you can only choose existing related entries but not create a new one.

If in the future it changes and user will be able to invoke an editor for a related type(entry) dynamically (like adding a component) this would be preferred approach.

Alternative to this would be to use Components. Although, one should keep in mind that they have limitations (such as no filtering can be done on Components).

The case for using DynamicZone inside a Component

Let's say the course wants to organise lessons into chapters. Following the Components approach we would have a Chapter component that includes multiple lessons.
Now the course would have repeatable Chapter component so that the course creator can dynamically create as many chapters as they like while creating a course record.
As we want to dynamically create + add lessons, they should be Components too.
This is acceptable until the point when you have more than one type of lessons and a course creator wants to pick which type of a lesson to add to a course dynamically.
Dynamic choice of an element in Strapi is done via DynamicZone. Therefore, we need a Component to support Dynamic Zone too.

How to test it?

One will have to manually modify a type model definition file (json) to include a dynamic zone there first.
e.g.

{
  "collectionName": "components_default_my_test_components",
  "info": {
    "name": "MyTestComponent",
    "icon": "adjust"
  },
  "options": {},
  "attributes": {
    "title": {
      "type": "string"
    },
    "mydz": {
      "type": "dynamiczone",
      "components": ["default.lesson", "default.questionary"]
    }
  }
}

Then go to Admin UI and create a type that uses the MyTestComponent.
When creating new entries of the new content type, observe that the dynamic zone is correctly rendered and functions.

Related issue(s)/PR(s)

strapi#5798
strapi#6283

[benderillo]

LGTM ;)

[wesleyguirra]

Is this working? I tried to use, but without success.

[benderillo]

It worked as explained in this PR description when I made this change, a while ago.
I have not tried it for really long time as I eventually do not need this feature.

[wesleyguirra]

Understood, the main issue is that the structure of validations seems to be changed.

[RomanBON]

@benderillo Hello! Thank you for your work! Could you explain how to use it?

[benderillo]

@benderillo Hello! Thank you for your work! Could you explain how to use it?

Hi, this change was made for v3.x.x almost 2 years ago and I am not sure it is still functional. As the guy above stated, this most likely no longer works.
Back in a day, you just had to create a component as usual, then go to the json file for its schema and add dynamic zone manually (this is how it used to look, note this dynamic zone allows to choose one of the two components: lesson or questionary)

    "mydz": {
      "type": "dynamiczone",
      "components": ["default.lesson", "default.questionary"]
    }

Then you would go to the content builder UI in strapi and use the component as usual.

[RomanBON]

@benderillo Thank you! But I try to understand how to run your version of code) Your branch enable-dynamic-zone-in-components was removed. By default for quickstart we use yarn create strapi-app my-project --quickstart, but in this case I don't understand 🙂