What is Divi 5

Definition

Divi 5 is foundational update that rewrites Divi's core technologies, re-imagined for the future and built using all of the knowledge and experience our team has acquired over the last nine years building Divi.

Development of Divi 5

It will be easier to explain how Divi 5 is developed by retrospectively explain how Divi 4 was developed first. In the simplest term possible, Divi 4 was built feature-by-feature basis. If we have to explain it visually, it'll look like this:

Due to its feature-by-feature development basis, things sometimes overlap. It might don't look like a big deal but overtime this overlapping compounds and slow down future development.

Thus in Divi 5, we carefully assess what Divi 4 has capable of doing (and the issue it has), what is the vision for the future of Divi, and split them into modular component that fits in between each other with as least possible friction. Visually, it'll look like this:

Divi 5 doesn't have all capabilities that Divi 4 yet, but we are going to get there; Ideally with stronger foundation so that anything we added afterward are more scalable and sustainable.

info

If you want to see how Divi 4 component being deconstructed and being rebuild, see Explanations page.

Differences

How Divi 5 Differs from Divi 4?

Serialized Block Format instead of Shortcode

Instead of using shortcode, the layout that is saved on Divi 5 will be saved as serialized block format; this is the same format that is used by Gutenberg to save its content into the database. This format enables nested element and more importantly attribute in object type which enable saving structured data.

Case in point, instead of saving font_size attribute like this:

[et_pb_cta
  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"
]

The same value in Divi 5 will be saved like this:

// NOTE: Attributes is formatted for readability.
// In practice, it'll be one liner.

<!-- wp:divi/cta {
  "bodyFont": {
    "body": {
      "font": {
        "desktop": {
          "value": {
            "size": "16px"
          },
          "hover": {
            "size": "15px"
          },
          "sticky": {
            "size": "14px"
          }
        },
        "tablet": {
          "value": {
            "size": "14px"
          }
        },
        "phone": {
          "value": {
            "size": "12px"
          }
        }
      }
    }
  }
} /-->

As you can see, the attribute is actually formatted in Divi 5. We called it attribute format and the core of it is this: Divi's attribute is multi-breakpoint and multi-state by default. Therefore, formatted attribute looks like this:

const valueAttr = {
  BREAKPOINT_1: {
    state:       'value',
    hover:       'value-hover',
    sticky:      'value-sticky',
    OTHER_STATE: 'value-other-state'
  }
}

In many case, the value is grouped as object like this:

const spacingAttr = {
  desktop: {
    state: {
      margin: {
        top:    '15px',
        bottom: '15px',
      },
      padding: {
        left:  '15px',
        right: '15px',
      }
    }
  }
}

What's the benefit of this change of storage format? Significantly simplified rendering logic. Rendering spacing style in multiple breakpoint and state now can be as easy as this:

<SpacingStyle
  attr={{
    desktop: {
      state: {
        margin: {
          top:    '15px',
          bottom: '15px',
        },
      },
      hover: {
        margin: {
          top:    '25px',
          bottom: '25px',
        },
      }
    }
  }}
  selector=".et_pb_cta"
>

info

For detailed explanation related to Attribute Format, please see this documentation.

Extendable Visual Builder

Divi 5 aims to be make Visual Builder more extendable. To achieve this, each component is made to be modular and arranged using monorepo architecture where component is exposed over global variable.

Compared to how Divi 4 used to work, visually this is how Divi 4 Visual Builder is arranged:

As you have seen above, in Divi 4 generally there are two events for extending Visual Builder:

1. Filtering configuration value that is generated on server.
2. Take selected exposed components / functions, use them, and enqueue the script to extend Visual Builder.

So far, these created limited extension possibility. In a nutshell: third party can only reuse existing component and add their own configuration. We'd like to improve this in Divi 5. Visually, this is how visual builder is arranged in Divi 5:

Compared to how Divi 4 Visual Builder is arranged above, this is how Divi 5 Visual Builder is arranged:

The result of this arrangement is more components that are available for third party. It is our goal to make the same components that is used by Divi's official module available for third party so that third party has better opportunity to extend Divi. We also aim to make custom component can be used better in Visual Builder.

On top of this, Divi 5 also provides hooks and filters whenever it is deemed necessary.

Written in Typescript

Unlike Divi 4 that was written in Javascript and JSX, Divi 5 Visual Builder is written in Typescript and TSX. We found the typing feature of Typescript gives more solid ground, prevents bugs, and make refactoring can be done in confident.

Better Code Organization

One thing that happened in Divi 4 is feature gets added over time sometimes the code organization across the code isn't really clear. In Divi 5 we attempted our best to organize the code better. What's the benefit of this? It should be easier for third party to analyze how certain thing works therefore easier for third party to extend them.

Similarities

What are Divi 5 Similarities compared to Divi 4?

Frontend Module renderer

The initial version of Divi 5 replicates how Block Editor works in a way that the rendered content is actually saved on the database. However, after much discussion we realized out that Divi is dynamic by nature (preset, global color, global modules, dynamic content, etc) which makes saving rendered content not align to how Divi works.

Therefore, module in Divi 5 is still using PHP-based renderer just like how it works in Divi 4. The difference, we tried our best to keep the PHP renderer as similar as its Javascript / Typescript counterpart.