Divi 5 Progress Update: Exploring Divi 5’s Extendability

I’m back with another Divi 5 progress update. If you aren’t familiar with Divi 5, check out our original announcement post. To put it briefly, we are recreating the builder in Divi 5 from the ground up, focusing on performance, stability, scalability, and extendability. It won’t come with many new features, but it will be way faster and more capable, and it will give our team and the community the tools we need to hit the ground running with fantastic new modules and features.

Last month, I gave a demo of the Divi 5 Visual Builder to showcase its lightning-fast speed, so if you missed that video, be sure to check it out.

I’ll discuss Divi 5’s extendability and give a quick demonstration in this month’s update. But first, let’s talk about what our team has been up to over the past month.

What We Accomplished This Month

We made a lot of progress last month. We are nearing the launch of Divi 5 Dev Beta, the next phase of the Divi 5 beta program, and I hope to announce its release in my next update.

While on the home stretch, we remain focused on simplifying the module creation process so that creators from the community and our team can build Divi 5 modules more quickly. The work we put in during this phase will pay dividends in the proceeding phases, with the ultimate goal being to get your hands on Divi 5 sooner.

Changelog Entries:

• Refactored all currently built modules to incorporate a new and improved element-based attribute system.
• Added saveInlineEditorValue Util Function In packages/module-utils To Store Value From Inline Text Editor
• Added canEditInline Util Function In packages/module-utils To Check If the Module Attribute Can Be Edited Inline
• Added onPaste Handler Event To The Inline Text Editor to Process Clipboard Data
• Replaced Inline Text Editor Event Based classNames With data-* Selectors (e.g: et-vb-editable-element–empty, et-vb-editable-element–html) In The Builder.
• Updated CSS For Inline Text Editor With data-* Selectors (e.g: [data-et-vb-editable-element]).
• Updated Inline Text Editor to Check Whether Module is Editable and The User have ProperPpermission to Edit
• Refactored Keyboard Shortcut Store To Disable Shortcuts When Inline Text Editor Is In Editing Mode
• Added Inline Text Editor functionality To Audio Module For Title
• Added Inline Text Editor functionality To Blurb Module For Title
• Added Inline Text Editor functionality To Bar Counter Module For Title
• Added Inline Text Editor functionality To Circle Counter Module For Title
• Added Inline Text Editor functionality To Code Module For code (HTML) Content
• Added Inline Text Editor functionality To Countdown Timer Module For Title
• Added Inline Text Editor functionality To Fullwidth Header Module For Title and Subhead
• Added Inline Text Editor functionality To Fullwidth Code Module For code (HTML) Content
• Added Inline Text Editor functionality To Login Module For Title
• Added Inline Text Editor functionality To Number Counter Module For Title
• Added Inline Text Editor functionality To Person (Team Member) Module For Name and Position
• Added Inline Text Editor functionality To Pricing Table Module for Title, Subtitle, Currency, Sum and Frequency
• Added Inline Text Editor functionality To Slider Module For Slide Heading
• Added Inline Text Editor functionality To Tabs Module For Tab Title
• Added Inline Text Editor functionality To Testimonial Module for Author, Job Title and Company Name
• Added Inline Text Editor functionality To Toggle Module for Title
• Added Inline Text Editor functionality To Wireframe View for Module Admin Labels
• Updated Inline Text Editor functionality To Set Default Text When Module Attribute Is Edited With Empty Value (e.g Admin Labels in Wireframe View Mode)
• Added Test Cases To Ensure Editing Mode For Inline Text Editor Doesn’t Get Activated For Locked Module
• Added Tests For In All The Modules That Use The Inline Text Editor To Ensure It Works As Expected.
• Added Base InlineRichTextEditorContainer And InlineRichTextEditor Components In The Builder For Inline Editing Of Rich Text.
• Introduced the ElementInnerContent class, a simplified version of the MultiViewElement class.
• Improved MultiViewScriptData class.
• Added custom filter and hook in Responsive Content FE script.
• Introduced MultiViewElement class.
• Dynamic Content: New Dynamic Content value format: `$variable(JSON_VALUE)$`.
• Dynamic Content: Introduced new attributes conversion functionality for Dynamic Content attributes.
• Dynamic Content: Introduced initial Dynamic Content rendering in frontend part.
• New approach on processing Dynamic Content values. The Dynamic Content values will be processed on the block parser before the document is parsed into list of block structures.
• Back ported the code to resolve the Dynamic Content built-in and custom field values based on the field name and settings.
• Back ported the code to generate the Dynamic Content built-in and custom fields based on different conditions.
• Dynamic Content: Introduced initial Dynamic Content rendering in VB
• Dynamic Content: Integrated Dynamic Content functionality into `ModuleElements` class.
• Dynamic Content: Implemented Dynamic Background Image functionality in VB.
• Dynamic Content: Introduced initial Dynamic Content UI on Module Settings in VB. Right now this is available as prototype on testimonial module’s input text with support on `site_title` Dynamic Content Option only.
• Inline RichText Editor: Added core TinyMCE editing capabilities to the Rich Text inline editor component
• Inline RichText Editor: Updated the Rich Text inline editor to retrieve editable content and save edited content.
• Module Attribute Refactor: Refactor Icon module’s attributes.
• Module Attribute Refactor: Refactor Social Media module’s attributes.
• Module Attribute Refactor: Refactor Video module’s attributes.
• Module Attribute Refactor: Refactor Search module’s attributes.
• Module Attribute Refactor: Refactor Full Width Code module’s attributes.
• Module Attribute Refactor: Refactor Pricing Tables module’s attributes.
• Module Attribute Refactor: Refactor Accordion module’s attributes.
• Module Attribute Refactor: Refactor Full Width Map module’s attributes.
• Module Attribute Refactor: Refactor Full Width Slider module’s attributes.
• Module Attribute Refactor: Refactor Map module’s attributes.
• Community Reported Bugs: Implementing Module Credit mechanism. Add Credit on module.json to display module credit.
• Community Reported Bugs: Enable selected tag on field description
• Transition Options: Added Transition Style Component for all modules which used ElementStyle.
• Module Elements: Introducing ModuleElements class to simplify elements creation on Audio, Blurb, CTA, and Testimonial modules.

Illustrating Divi 5’s Extendability

One of the most essential aspects of Divi 5 is its extendability. When I talk about extendability, I am talking about Divi 5 being nimble and capable from an API perspective and the many unique features we can create thanks to those improvements. I have also spoken about aligning Divi 5 with the future of WordPress, removing shortcodes, and integrating many of the WordPress block packages into Divi 5.

What does all of this mean for the future of Divi?

I asked the manager of our dev team to find a little free time to whip up a quick demo that illustrates these aspects so that I could share something fun in this update that is visually representative of Divi 5’s extendability. He came up with the Automatic Block Module. A module that turns every Gutenberg block into a Divi module, supercharging them with Divi’s wide range of design settings and allowing you to mix modules and blocks on the same page!

The block module grabs HTML elements from the block and dynamically generates option groups that give you complete control over its design. You can also generate new option groups on the fly, targeting and customizing any element.

While we created this block module for fun, and it’s neither finished nor polished, it is a wonderful demonstration of what we can do with Divi 5, and with relative ease, thanks to the new foundation we are creating.

Not only is it easy for us, but for you and the development community too, thanks to the open nature of the API. We may even finish up this Block Module and add it to Divi 5 as an official feature. But for now, we remain focused on progressing through the beta phases.

Divi AI Is Almost Finished!

That wraps up this month’s Divi 5 update. In other news, our first version of Divi AI is nearly finished, which will allow you to generate extraordinary images out of thin air and write and improve content with AI while you work in the Visual Builder. I’ve been having a lot of fun playing with the unfinished version and I am looking forward to wrapping it up and shipping it soon!

Stay Tuned For More Updates

I promised to give Divi 5 progress updates every month, and that’s what I plan to do! I can’t promise that every update will be exciting, but rest assured we are working as hard as we can to finish this huge project. Each day we get a little closer and the Divi 5 foundation gets a little stronger. We will soon be launching the Divi 5 Dev Beta, which means the foundation will be complete. From there, it’s full steam ahead on the user-facing features that you will get to test out in the Public Alpha later this year.

Leave a comment if you have any questions. See you in the next update!

The post Divi 5 Progress Update: Exploring Divi 5’s Extendability appeared first on Elegant Themes Blog.