A Decade of Divi

The Compact Explanation

Divi has been around for almost a decade (it was released in December 2013). Just like everything that gets old, we notice that some areas are in needs of improvement. However, after many discussion, it becomes clear that to propel ourself long to the future we need to overhaul Divi's foundation. By "foundation", it can be said that:

• Divi needs to move on from its shortcode based solution. Many of Divi's mechanics are made based on the assumption of how WordPress shortcode works. Many of these was a wonderful solution for its time. However, we added tons of new features over time that shortcode-based mechanics are still capable of doing, but clearly we need a better solution.
• Divi needs to make its visual builder more extendable. we figured major limitation on extendability of visual builder is due to monolithic approach when we developed it. This limitation prevent visual builder to be drastically extended by third party, something that we'd like to happen.

That's how we ends up with Divi 5.0. Existing foundation are great for a decade ago's situation up to current point. However based on the trajectory of the features we attempts to implement it is obvious that we need to overhaul the foundation so that we can sustainably adding more Divi capability for years to come.

Outgrowing Shortcode

The following is more detailed explanation on how Divi's development outgrow shortcode.

At the beginning of Divi, there was a module that uses shortcode:

[et_pb_module font_size="14px"]

Pretty straightforward: The module has an attribute to store its property. The property is editable via field in the module settings' modal. However overtime we enhance Divi and create responsive options, hover options, and sticky options. To handle one field in various condition, now we have:

[et_pb_module
  font_size="14px"
  font_size_tablet="12px"
  font_size_phone="10px"
  font_size_last_edited="on|desktop"
  font_size__hover="11px"
  font_size__hover_last_edited="on"
  font_size__sticky="13px"
  font_size__sticky_last_edited="on"
]

As you see here, the more options we'd like to introduce, the more complex the module's shortcode structure becomes. Complex shortcode structure leads to complex abstraction layer for handling and editing it.

Handling complexities above is managable. The consequence is not: each of the attribute requires field definition to be generated for it so that any change made on module settings can be properly saved into module's shortcode attributes. This might sound simple but it actually has become severe problems because:

1. Divi has so many options per module.
2. Divi has so many modules.

Multiply each field state by hundreds options that a module can have then multiply it again by 46+ official modules that Divi has. This leads to performance bottleneck that we had handled aggressively multiple times. For the time being it works, but if we're looking far into the future where we'd like to add more features to Divi, it is only a matter of time until performance problem came from this bottleneck again.

Make Visual Builder Extendable

Pre Divi 5 Visual Builder (which we'll refer to as Divi 4 from this point forward) is made using the following assumption:

1. Configurations are generated on server.
2. Visual Builder app consumes those configurations and generates all necessary options.
3. Once the Visual Builder is ready, selective parts of it are made available for third party.

Visually it looks like this:

The approach leads to problem where third party only has tiny fraction of capability of what Visual Builder is capable of doing.

Divi 5

Divi 5 aims to address the foundational level problem that have been explained above. UI wise, Divi 5 will be relatively identical compared to Divi 4 except for some improvement that we add here and there. However there are lots of things that will be changed under the hood. This is the purpose of this documentation site: to walk you through the change of Divi 5 and provide guide on how to utlize those change.

More of how Divi 5 handles this will be discussed further on What is Divi 5 article.