Build rich layout pages or complex data structures on the fly with Dynamic Zones. Create components and reuse them in the same or different Content Types.
December 18, 2019
Strapi facilitates content management for all users. Our goal is to empower you to create any project you have in mind. For this reason, we are thrilled to announce the release of Strapi beta.18 with a highly requested feature, that will unleash your creativity even more!
A HUGE thanks to the 300+ individuals who have already contributed to the Strapi project, the team is super grateful for your help! We’d like to give a special shout out to @0LL1, @chriswinch, @Froelund and @derrickmehaffy. Well done guys!
As always the full changelog can be found in the repository here.
To be able to build dynamic pages or create complex data structures, it's often very helpful to create sections such as sliders and quotes or data structures such as meta fields so that you can reuse them whenever needed.
It is now possible with the Dynamic Zones! And in a way so flexible, that the only limit is your imagination!
Let's dive into it.
In this version, we are introducing a new data structure: the Components. Components allow you to create nested fields to organize your information, repeat this data structure to build arrays or to reuse this data structure across multiple Content-Types.
In other words, it means that you can pick on the fly any component, reorder them as you wish in the repeatable zone and create original content structure.
Let's explain this in detail.
##Building a blog post data structure with the Dynamic Zones
For the sake of this example, we will create the data structure for a blog using Components and Dynamic Zones.
In this example, let's say that I'm Tim Cook, and I'm writing an article on my blog about the Release of the new MacBook Pro. Why not?
I want to add the following rich layouts to my article: a quote linking to my bio on Wikipedia and a slider, with 3 pictures of MacBooks Pro.
Let's start by creating the Content-Type Blog Post.
This post will have the following fields:
Then, we'll create our first Component.
As said earlier, Components allow you to group fields to organize your structure. In our example, we will use Components to create differents elements needed for our blog post :
So first, let's create the Meta Component.
Then, the Quote Component.
Last but not least, the Slider Component.
Now that we created the needed Components, let's create a Dynamic Zone that will include them to build the content of our blog post. We will first add the Quote and Slider Components that we just created, then a Rich Text Component, that we will create on the fly in the Dynamic Zone.
Now, that we created the data structure, let's head to the Content Manager and manage our content.
In this video, you can see that adding a Component to a Dynamic Zone is super fast and easy.
A Dynamic Zone allows your editors to choose among any types of rich layouts. You just have to create and add them, it's as simple as that. Your Content Manager just has to pick them in the list and add them.
It works for any section with any combination of text, or image like sliders, quotes, testimonials, etc. The list is infinite and the only limit is your imagination!
Your writers have total control to add section by section the different part to build the post and to order them however they want.
And just in case you were wondering: you can also reorder the nested Components in a Component as you see fit!
You may have noticed a little change in the Plugin section of the left menu: the Content Manager is gone.
The configuration of the Content Types' layouts can now be done through the Configure the View button directly in the Content Type Builder. Drag and drop your fields to reorder them and save, and you can visualize the result immediately in the List view of your Content Type.
If you are already building your project with Strapi, we recommend that you upgrade to the latest version in order to benefit from these new features! Follow the detailed instructions in our migration guide.
If you are new to Strapi, just give it a try!
Take a look at the Getting Started guide to jump on board, or get started with the following command line:
yarn create strapi-app my-app --quickstart
Check out our public product roadmap to see what features we’ll be working on next.
Don’t take our word for it. Have a look at the tweet posted last week by Michele Riva, the creator of JSMonday and proud contributor of Strapi: