Author: Nick Roach

I’m back with another Divi 5 update! As you may know, we are in the midst of a massive project recreating the Divi Builder, focusing on foundational improvements such as performance and extendability.

I give a quick update every month to keep the community informed about our progress. Last month, I announced the release of Divi 5 Dev Beta, the second of four beta phases that will precede the launch of Divi 5. With the release of Dev Beta and the Divi 5 API complete, we are working towards the Public Alpha, ensuring we finish enough of Divi’s core features to make that first public beta version broadly usable.

What We Accomplished This Month

We accomplished a lot this month, completing the conversion of more Divi modules, such as the Accordion module, Social Follow module, Icon module, Search module, and Code modules. We fixed more bugs, made more improvements, updated more docs, and continued our march toward the Public Alpha phase.

Here are the latest Divi 5 changelog entries. 👇

• Added Map & Map Pin modules for Divi 5
• Added Pricing Tables and Pricing Table module for Divi 5
• Added Slider and Slide modules for Divi 5
• Added Video module for Divi 5
• Implement import premade layouts via the cloud app into the visual builder.
• Fixed the Dynamic Content button so it would also show up on filled text boxes.
• Added UI enhancement for nested option group in module settings modal.
• Generated module.json from typed ts file to ensure module metadata property values are validated.
• Updated PHP snapshot test
• Fixed a bug that prevented Divi stylesheets from loading in the Builder when a child theme was active.
• Fixed portfolio links exiting the visual builder.
• Fixed resetting a custom hover image causes conflicts on the FE.
• Fixed the Help modal size issue where undocking the Help modal caused it to appear larger than its original size.
• Fixed the Divider module’s default weight.
• Fixed the Blurb module’s icon default size.
• Updated CTA and Login button border and text colors to be empty by default.
• Introduced the elementType imageLink into the ModuleElements class that works to render a linked image element.
• Introduced the elementType wrapper into the ModuleElements class that works to render a wrapper element.
• Introduced the elementType image into the ModuleElements class that works to render an image element.
• Fixed the HTML difference between D4 and D5 for the Code module.
• Added Accordion & Accordion Item modules for Divi 5
• Added Social Media & Social Media Item modules for Divi 5
• Added Icon module for Divi 5
• Added Search module for Divi 5
• Added Fullwidth Code module for Divi 5
• Created doc generator for Divi 5 PHP Action and Filter Hooks.
• Updated PHP action hooks doc declaration.
• Updated PHP filter hooks doc declaration.
• Updated docs for PHP API.
• Added UI enhancement for module settings and modal in general.
• Updated tutorial to incorporate the latest improvement in module development.
• Added new Field Library Component: Warning
• Refactor `animationClassnames` implementation
• Added `moduleClassname` and `moduleOrderClassname` properties for module metadata on `module.json`
• Added `ModuleElement.scriptData()` method
• Added `ModuleElement.styleComponents()` method
• Added option to activate enhanced UI
• Fixed an issue when changing animation style causes the module to crash.
• Fixed correct state(Desktop, Tablet etc.) is not selected in the State Picker modal.
• Fixed Incorrect selector for sticky.
• Fixed leftover defaultAttrs and defaultPrintedStyleAttrs references in the documentation site
• Fixed Module Settings Field doesn’t handle responsive / hover / sticky value correctly if field props are not explicitly declared
• Fixed Page Settings Bar’s icons in buttons are not centered in Firefox
• Fixed the issue of importing link options from D4 to D5 in the Blurb module.
• Fixed the issue of importing link options from D4 to D5 in the CTA module.
• Fixed the issue of showing dynamic child item titles in the content panel for the tab module.
• Fixed vertical and horizontal offsets don’t work with the relative position in the Fullwidth Header module.
• Properly enqueue package style after theme style
• Updated documentation page of functions that are used on the dev beta tutorial

Let’s Talk About Shortcodes

I also wanted to take a moment to discuss one of Divi 5’s most significant changes, which is the removal of shortcodes and the migration towards a more modern storage format that aligns with the future of WordPress.

Why Move Away From Shortcodes?

There are several benefits of Divi 5’s move away from shortcodes. First, WordPress will inevitably deprecate shortcodes as more and more users gravitate towards the new editor, and we want to stay ahead of the game.

Shortcodes also have limitations that make it difficult or impossible to accomplish certain things, like infinitely nested elements, and they also come with inherent problems that often rear their ugly heads, such as particular characters within the post content breaking the shortcode logic, which leads to overly-complex solutions to fix the underlying issue.

Shortcodes are also less performant since parsing them can require complex regular expressions. On the other hand, our new storage format is much easier to parse, which will result in a small performance improvement.

Finally, there is the issue with shortcodes being left over in the post content after moving away from Divi, which will no longer be a problem in Divi 5. If you build your website with Divi 5, and then switch to a new theme or builder, you’ll start with a blank slate instead of with unwanted shortcodes in the post content.

How Will Shortcodes be Migrated On Existing Websites?

In order to make this switch, we’ll need to programmatically search through your website and convert shortcodes to the new format. After you upgrade to Divi 5, there will be a migration process that you initiate to complete the conversion. Old Divi 4 shortcodes will still work with Divi 5, but they will come with a performance cost, and we recommend that everyone migrate their websites and update their third-party Divi modules so that your entire website is using the Divi 5 framework.

If you are building a new website in Divi 5, on the other hand, everything will use the new framework by default. Old layouts in your library or old layouts that you have exported from Divi 4 will be automatically converted to the Divi 5 format on import.

Stay Tuned For More Updates

That’s all for this month’s Divi 5 update. In other news, we have an update to Divi AI coming out in the next few weeks that will allow you to generate code with AI, making it easier than ever to customize Divi and its modules. For those of you who like to break free of Divi’s design settings and write your own CSS, I think you are going to find this update incredibly useful.

Stay tuned for that, and I’ll see you in the next update. Follow us by email and subscribe to our YouTube channel for all the latest news.

The post Divi 5 And The Move Away From Shortcodes appeared first on Elegant Themes Blog.

I’m back with another Divi 5 update, and this time I am pleased to announce the release of Divi 5 Dev Beta, the next phase in the Divi 5 beta program. The Divi 5 foundation is complete, our development documentation is filling out nicely, and we have used the Dev Alpha phase to collect feedback and solidify the Divi 5 API.

With the launch of Dev Beta, we will invite many more developers to join the beta program so they can begin transitioning their Divi modules to the official Divi 5 framework and work on new and exciting features that can be ready for the launch of Divi 5.

Meanwhile, our team will be focused on progressing to the next phase: Divi 5 Public Alpha, the first public beta phase.

What We Accomplished Since My Last Update

We got a lot of work done over the past six weeks, completing the Divi 5 API and squashing over 180 bugs. I am a little late with my update this month, but we wanted to ensure we wrapped up the Divi 5 Dev Beta and cleaned up as many bugs as possible before progressing to the next phase. If you are interested in the nitty gritty, here is the full changelog:

Changelog Entries:

• Refactored props and moved sticky responsive hover props to features props.
• Fixed portfolio module with categories imported as layout from D4.
• Fixed portfolio module sizing options not working correctly.
• Fixed Portfolio module FE warnings if no featured image is set.
• Updated module conversion tutorial.
• Fixed the styles not being applied on the button inside the Login Module.
• Fixed the Blurb module text alignment issue on the front end.
• Fixed the issue with the icon not displaying on the Frontend of the Fullwidth Image module.
• Fixed the issue where the Layout Name field of Add To Library modal was not required to save the layout.
• Fixed Tabs module border overflow issue.
• Fixes issue where the user can’t use Border Radius unit other than px.
• Updated inline JSDoc throughout the codebase.
• Renamed hooks and transients to use the new D5 naming convention for hooks and transients.
• Updated background Style Declaration to render based on Gradient enabled value.
• Updated Gradient field container/component to inherit value and render preview accordingly.
• Fixed a bug that was causing Button’s hover background color to not show up in Builder or Frontend.
• Background gradients in Tablet and Phone views will now inherit “direction” values when they do not have their own specified.
• Optimized and refactored Transition Style with Element Style to abstract font and text-shadow CSS properties from its parent function into their own respective methods.
• Add a Transition option to module attributes by default.
• Updated webpack config to generate CSS files for Visual-Builder Packages.
• Updated build process to copy font files in the build directory for @font-face entry.
• Updated Storybook to use webpack 5.
• Added get_package_list, get_package_asset, and enqueue_package_style PHP functions.
• Refactored AssetsUtility to automatically enqueue CSS for Visual-Builder Packages when JS for Visual-Builder Packages enqueued.
• Renamed FormatAttr<> type into FormatBreakpointStateAttr<>.
• Implement style method of ModuleElements of various Divi Modules.
• Renamed module.decoration.filter into module.decoration.filters To Make It Consistent Between All Modules.
• Implemented Dynamic Content to existing modules that have frontend rendering already.
• Refactor the component so that the field inside of it can be flexibly modified.
• Fixed missing et_pb_css_mix_blend_mode_passthrough class to Column module Frontend.
• Fixed the issue of the class name not being added to VB and FE for the Regular section.
• Fixed the issue of the responsive content of the Person module.
• Fixed an issue where Upload Preview was showing for all upload file types.
• Fixed an issue with Portfolio where no projects show an empty page in Frontend.
• Fixed margin left and right options override the alignment of the Divider module.
• Fixed the row module’s “Equalize Column Heights” setting to work as expected.
• Fixed Bar counter percent field not showing text value.
• Fixed incorrect Border Color and Text Color default values of the Button module.
• Fixed custom padding value doesn’t work in Row Inner.
• Updated module background image CSS declarations to include repeat settings.
• Added Background Image settings (height, width, vertical offset, horizontal offset) to D4>D5 Conversion’s attributes map.
• Fixed A Bug That Was Causing The Inline Rich Text Editor to Not Activated Properly On Some Cases.
• Fixed A Bug That Was Causing a Fatal Error With Modified Title Of The Blurb Module.
• Fixed A Bug That Was Causing the Title Of The Tab Module Not Being Saved From the Inline Text Editor.
• Refactored Circle Counter rendering so that the background video will appear on top of the background color or gradient.
• Fixed a case where the background color for the Text module had different output between Builder and Frontend.
• Fixed an issue with the conversion of the section backgrounds attributes during import.
• The keyboard shortcut for saving in Linux and Windows is fixed.
• Animation for Resize button icon for the help modal is fixed in docked mode.
• When “Builder Interface Animations” is disabled, the help modal’s animations are disabled too.
• The video list navigation’s disappearing issue on resizing the docked modal is fixed.
• Fixed incorrect space between Undock and Close buttons, which increases as the modal size is increased
• Resize button icon for the help modal is now centered in docked mode.
• Fixed responsive icon not working in Testimonial module VB.
• Fixed the difference in the Hover State Styles selector
• Fixed the Responsive Content functionality in the Login module.
• Fix hover selectors in FE if the selector has a pseudo-element.
• Fixed the issue of setting up the default Circle Background Opacity value in the circle counter module, same as D4.
• Fixed hover selectors in VB if the selector has pseudo element.
• Fixed wrong important values of margin and padding modules.
• Fixed a missing class name issue in the Audio module Frontend.
• Fixed Icons not rendering properly in Testimonial Module Frontend.
• Fixed error when duplicating child modules
• Fixed Image module sizing options not working
• Fixed Toggle title styles in the Toggle module are not working correctly in both VB and FE.
• Fixed the issue of toggle open icon styles in FE for the toggle module.
• Fixed empty button behavior in FE.
• Fixed disable State option in Hover mode.
• Fixed disabled_on conversion issue.
• Fixed Add to Library button will not display unless the User Role is re-saved.
• Fixed the issue where clicking on the blank space within the label in the components group would trigger the first option instead of being inactive.
• Fixed the Add To Library modal cut-off when it’s opened from a certain position.
• Fixed incorrect button icon animation for hover.
• Fixed responsive content functionality not work in the FE button component.
• Fixed the overflow issue of the full-width image, which has a border-radius set.
• Fixed a bug in the Code setting field, unable to delete the value on responsive mode.
• Fixed the issue of input placeholder value, which is not getting removed after removing the text in it.
• Fixed settings modal’s scrolling when scrolling over responsive disabled elements.
• Resolved the issue causing glitchy behavior on touch-enabled devices for responsive content.
• Fixed the fatal error caused by saving an empty desktop breakpoint value.
• The input field’s value will be inherited from the upper breakpoint.
• Fixed Dynamic Content options list dropdown overlap with TinyMCE element.
• Fixed script-based feature (eg. animation) that doesn’t work on the shortcode module.
• Dynamic Content: Added tests for various functionalities of Dynamic Content UI.
• Dynamic Content: Added URL type support to Dynamic Content in the Testimonial module.
• Dynamic Content: Define the id property on each Dynamic Content option registration.
• Dynamic Content: Refactored and migrated Dynamic Content To.
• Dynamic Content: Rename some field terms used in the options in Dynamic Content.
• Dynamic Content: Introduced a new way to register Dynamic Content option settings and rendering part.
• ModuleElements: Implement ModuleElements on modules that are available on Divi 5.
• Module Attribute Refactor: Refactor Module Attribute for IconAttr and Social Media Follow Modules
• Fixed Custom CSS conversion issue.
• Transition Style: Transition Style component refactoring.
• Position Options: Fix the issue of the Position Options style being rendered when no attribute is given by allowing the style component to have the defaultPrintedStyleAttr property that is inferred from the module’s module.json

What’s Next For Divi 5?

With the Dev Alpha and Dev Beta phases in our rearview mirror, it’s now full-speed ahead towards Public Alpha, the first user-facing beta version. Between now and the release of the Public Alpha, we will fill in missing features, fix bugs, and ensure we finish enough of the project to warrant a public release.

If you aren’t familiar with Divi 5, let me give you a quick refresher. 👉 Divi 5 is a complete rewrite of the Divi Builder focused on the fundamentals. We aren’t adding many, if any, new features but instead are focused on performance, stability, scalability, and extendability. We squeezed everything we could out of Divi 4, and now we are building the new foundation we need to propel Divi into the future. To get there, we essentially need to recreate every piece of the Divi Builder one piece at a time.

We are now working towards the release of Divi 5 Public Alpha. This will be a functional and hopefully bug-free version of Divi 5 but with some of the least popular Divi modules and features missing. You’ll be able to test out Divi 5 and even use this version if the missing features aren’t something you miss.

After the Public Alpha is released, we will work towards the Public Beta, which will include all of Divi’s current features and serve as a release candidate for Divi 5, pending the fix of any bugs found by our beta testers.

Join The Divi 5 Dev Beta

If you are a developer creating custom Divi modules for the community, you can apply to join the Divi 5 Dev Beta. If you already applied to the Dev Alpha but weren’t accepted, there’s no need to apply again. Just keep on an eye on your email inbox for an invite.

Reminder: This phase of the beta program is only intended for developers of Divi modules. Once we have added a few more features, polished the UI, and cleaned up any remaining bugs, we will release the Divi 5 Public Alpa, the first beta version intended for general testing.

Stay Tuned For More Updates

I give a Divi 5 update every month, so be sure to subscribe to our newsletter and our YouTube channel to stay current! Divi 5 is a big project, but I’ll be here every step of the way, pulling back the curtains and giving you insight into our progress.

Leave a comment if you have any questions, and I’ll see you in the next update.

The post Announcing Divi 5 Dev Beta appeared first on Elegant Themes Blog.

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.

We are in the midst of a massive project, Divi 5, and I like to update the community every month on our progress. Last month, we dug deep into the five stages of the Divi 5 beta program to better understand how we are approaching such a big project in the most advantageous way for Divi users. We are in Phase 1, Dev Alpha, and we are getting closer to launching Dev Beta, at which point the new Divi 5 API will be solidified. We will invite more developers to join the program while we work towards the first public release later this year.

In this month’s update, we’ll talk about the updates we made to Divi 5. I’ll also show you how fast Divi 5 is, and then I’ll give you a sneak peek of our upcoming Divi AI feature! Let’s dig in.

What We Accomplished This Month

We got a lot done this month! There are many little things that we are filling in, one by one, as we inch closer to our first public release, where the UI will need to be polished and a solid set of Divi features will need to be finished. We worked on section dividers, background videos, condition options, responsive content and fixed a few bugs.

Most of our work focused on solidifying the Divi 5 API, which is what the Dev Beta versions are about. The general trend here is that we are building a foundation to make it easier for our team and the development community to create great Divi modules and features. We need to get this part right so everything else falls into place how we want it to.

We worked on unifying and simplifying Divi 5’s new REST API. We finished several new functions and their implementations, which aim to significantly reduce the time it takes to create a Divi module. Again, we are putting in extra work at the foundation level so that the rest of the Divi 5 project will go faster, and all the modules and features we add after Divi 5 will be developed more quickly.

We also refactored Divi’s shortcode conversion method, which will play an essential role in backward compatibility.

If you are interested in the finer details, here are the most recent changelogs entries:

Divi 5.0.0-dev-alpha.4

• Fix render for background fields in the Shortcode module settings modal
• Fix shortcode module setting fields visibility with regex pattern conditions.
• Added frontend rendering of Section Dividers options.
• Fixed hover options not working properly in the visual builder and front-end for module options that have multiple selectors.
• Refactored @divi/scripts package and add tests
• Published types packages to npm in preparation for release to the public

Divi 5.0.0-dev-alpha.5

• Allow the Shortcode module to send another request when the previous request is aborted automatically.
• Render the sticky options button when the current Shortcode module is sticky.
• Render the sticky options button when the current Shortcode module is inside a sticky module.
• Removed unused default value Record<number, string | Record<string, string>> type in Shortcode module.
• Fixed incorrect Woo Shortcode module elements showing up on a single product page. Affected Shortcode modules: Woo Product Notice, Woo Product Images, Woo Add To Cart, Woo Product Stock, Woo Product Price, Woo Related Products, Woo Product Upsell, and Woo Products.
• Rename the Unsupported module into the Shortcode module along with the module slug, REST API route, label, test cases, and storybook.
• Added Background Video fields in Module Background Options.
• Refactored rendering of Background Video in Visual Builder without REST API calls.
• Added rendering of Background Video Module Options in Frontend.
• Added ScriptData to initialize Background Video in Frontend.
• Added support for Background Video Module Options in Sticky state.
• Updated visibility of Divider fields in Module Options to hide additional options if a Divider Style has not been selected.
• Updated visibility of the Divider Horizontal Repeat setting in Module Options to be hidden for Divider Style options that explicitly reject repetition.
• Updated visibility of the Divider Arrangement setting in Module Options to be hidden in Fullwidth Section settings (where only the default value “below” is allowed).
• Updated the Divider Style field preview in Module Options to reflect any horizontal and/or vertical flip currently applied to the divider.
• Updated the Divider Height field in Module Options to allow saving of percent (“%”) values in addition to the default pixel (“px”) unit.
• Updated the Divider Horizontal Repeat setting in Module Options only to accept positive number values (“1x” or higher).
• Added Conditions options foundation including initial conditions for Author, Logged In, and User Role, remaining Conditions to be added incrementally in future releases.
• Added ElementComponents component, the equivalent of <ElementStyle /> but for rendered HTML elements.
• Added elementClassnames() function, the equivalent of <ElementStyle /> but for functions that output class names.
• Fixed Font Heading Level error.
• Fixed PHP Warnings triggered in Portfolio Module.
• The proper REST permission callback has been added to all registered REST routes.
• A new RoleEditor class has been introduced to determine Divi roles, including tests for the functionality that was refactored from D4 to D5.
• The .sendRequest() features, such as automatic ET and WP nonce addition and stream response support, have been added to fetch().
• The fetch() has been completely refactored for better maintainability and scalability, allowing for the introduction of new and complex conditions and features e.g. .sendRequest()’s options.
• All REST API calls, fetch(), loggedFetch(), and .sendRequest(), have been unified, and now only loggedFetch() is used.
• Refactored conversion mechanism for modules.

Divi 5.0.0-dev-alpha.6

• Improved and streamlined REST API registration, logic, schemas, and tests. Renamed divi/ajax package to divi/rest package.
• Added InlineTextEditorContainer and InlineTextEditor components for Inline Text Editor.
• Added onBlur, onClick, onDoubleClick, onKeyDown, onKeyUp, onMouseDown, and onMouseUp handlers for the Inline Text Editor.
• Added a saving mechanism to update attribute value from the Inline Text Editor field.
• Added event handlers to activate and deactivate editing mode for the Inline Text Editor.
• Added ClassNames based on activation/deactivation and other states like __empty, __editing, __html.
• Added CSS/Inline Style for the Inline Text Editor.
• Refactored WindowEventEmitterInstance to add mousedown event listener.
• Introduced responsive content PHP helper.
• Introduced responsive content JS helper.
• Added responsive content functionality in the FE scripts.
• Added responsive content implementation in Name, Position, Image, and Content elements of the Team Member module
• Added responsive content implementation in the Use Percentage, Percent, and Title elements of the Bar Counters module
• Added responsive content implementation in the Button Text element of the Button module.
• Added responsive content implementation in the Title and Content elements of the Toggle module.
• Added responsive content implementation in the Text Inner element of the Text module.
• Added responsive content implementation in the Title element of the Countdown Timer module.
• Added responsive content implementation in Title, Image, Artist Name, and Album Name elements of the Audio module.
• Added responsive content implementation in the Content element of the Code module.
• Added responsive content implementation in the Title, Content, and Button elements of the CTA module.
• Added responsive content implementation in the Image module.
• Added responsive content implementation in the Title element of the Circle Counter module.
• Added responsive content implementation in the Title element of the Number Counter module.
• Added responsive content implementation in the Title and Content elements of the Tabs module.
• Added responsive content implementation in the Title and Content elements of the Login module.
• Added responsive content implementation in the Show Divider option of the Divider module.
• Added responsive content implementation in Title, Subhead, Content, Logo Image, Header Image, Button One Text, and Button Two Text elements of the Fullwidth Header module.
• Added responsive content implementation in the Fullwidth Image module.
• Added responsive content implementation in the Title and Content elements of the Portfolio module.
• Relocate Shortcode module-related code to the Shortcode Module package.
• Add font heading style renderer on the ElementStyle component.

The Speed of Divi 5

Before we wrap up today’s post, I want to discuss speed. As you may know, we aren’t planning to add many, if any, new features to Divi 5. However, one of the most significant changes that will come with this new version is a massive increase in speed, especially in the Visual Builder, where we all spend so much time.

Even though the Divi 5 UI isn’t finished, and the builder is missing features, I still wanted to give you a sneak peek at the difference in performance that I keep talking about. So please withhold judgment about how things look in this video, which will change, and just focus on the speed of the interactions!

You will immediately notice everything appears instantly as elements are hovered over on the page. Opening the settings popup is equally snappy, as is adjusting design settings. It’s a night and day difference across the board. Also, it doesn’t matter how big and complex the page becomes. The Visual Builder can handle it, and it remains fast.

Achieving this level of speed wasn’t possible in Divi 4, and it’s one of the reasons that this Divi 5 re-architecture is so important.

Coming Soon: Divi AI

That’s everything for this month’s Divi 5 update. However, I do have one more teaser for you. While almost our entire team is focused on Divi 5, we still have a small group of people working on Divi 4 features that won’t affect Divi 5 development, and right now, we are working on something very exciting.

It’s called Divi AI, and it leverages large language models to help you create content, such as text and images, for your Divi websites right inside the builder! Since it’s integrated into Divi, we can teach things about the builder and your website to help it create or improve your content in a way that makes sense and feels incredibly intuitive.

Check out today’s Youtube video for a sneak peek at Divi AI.

Stay Tuned For More Updates

That’s all for our May progress report. If you have any questions, be sure to leave a comment. Stay tuned for next month’s update, and I’ll see you in the next one!

The post Divi 5 May Progress Update: Previewing The Speed Of Divi 5 appeared first on Elegant Themes Blog.

Every month, I update the community about our progress on Divi 5. Divi 5 is the next big version of Divi that will introduce a new foundation for the builder, focusing on improving performance, stability, scalability, and extendability. It won’t come with many new features. It will, however, give our team and the development community the tools to push forward into the future. It will also make Divi much faster, among many other things!

If you want to learn more about Divi 5, check out my original announcement.

What We Accomplished Since My Last Update

Last month, we announced the release of Divi 5 Dev Alpha, the first phase in the Divi 5 beta program. This phase is focused on solidifying the new API and working with Divi creators to make sure we give them the tools they need to create great modules and convert their existing modules to take advantage of what the new version of Divi has to offer.

Over the past month, we released many significant updates to our new Divi developer documentation, including long-form tutorials that walk you through creating Divi 5 modules and converting Divi 4 modules to the new API. This new developer documentation is incredibly in-depth and will eventually dig into every function and hook in the new version of Divi.

We improved backward compatibility with Divi 4 modules and are working towards our initial promise that nothing will break when you update to Divi 5. We also fixed random bugs found by participants in the beta program related to features and functionality already existing in Divi 5. That’s one of the great parts of releasing these very early alpha versions; by the time we get to the final release, there will be no surprises.

The most significant update in this release was work involving Divi’s element style components, which significantly streamlines the process of assigning design settings to individual module parts, making creating Divi modules faster for our team and the team community. It also opens the door for nested option groups.

Finally, we filled in many user-facing features, including the Global Elements, Divi Help Modal, Save to Library functionality, Section Divider settings, and more.

A Deep Dive Into Divi 5’s Progression

I want to take some time to explain the five phases of the Divi 5 beta program and how we are approaching Divi 5 development so that you can put our monthly progress updates into perspective.

First, let’s put this project as a whole into perspective. What is Divi 5?

Well…we are essentially recreating everything related to the builder from scratch! Iterating on the Divi 4 codebase isn’t sustainable forever, and it’s time to build a new foundation. So, how do we approach such an enormous project with such a daunting roadmap?

That’s where the five phases of Divi 5 come in.

The Five Phases Of Divi 5

We are building Divi 5 piece by piece in a modular fashion, starting from a functional base. Every two weeks, Divi 5 gets a new version (we are currently on version 3), and a few new pieces of the puzzle are filled in. Everything that gets merged into Divi 5 is finished, and even now, Divi 5 works! It’s just missing features.

This allows us to get Divi 5 into the hands of the community sooner because even though it’s missing features, it works, and it’s fast. You may even find that using an upcoming public beta version of Divi 5 is preferable to using Divi 4 if the missing features aren’t features you use.

The first two phases of Divi 5 are Dev Alpha and Dev Beta. These versions will only be available to developers while we focus on solidifying the module API and getting feedback on the technology stack; all the while, we’ll also be filling in features in preparation for the upcoming public phases.

The third and fourth phases of Divi 5, Public Alpha and Public Beta, will be the versions we release to everyone. These versions will be like a “Divi Lite” version of Divi 5. They won’t be feature-complete, but they will have enough features to make them worth testing and using. From there, we’ll keep filling in more features as we work towards the final version, which will be a regular update in the WordPress Dashboard on all Divi websites.

While it’s hard to estimate when we will reach each phase, our goal is to get into the public beta stages this year so that everyone can get their hands on Divi 5 and come along for the ride as it gets better and better with each update. Divi 5 and Divi 4 will exist in tandem during the beta phases, receiving their own regular updates, and you will get to decide which version is right for you.

Stay Tuned For More Updates

I hope this post gives you a clear picture of how we plan to manage this massive project in the most advantageous way for Divi users. Even though this is a big project, you won’t have to wait until the end to get your hands on Divi 5 and enjoy its benefits.

Right now, we’re focused on ensuring the backend is solid during these first two development phases, and we’re working towards the public beta phases as fast as possible.

We’re also working on some great non-Divi 5 features that I think are exciting, so stay tuned for those as well. If you have any questions, be sure to leave a comment. Stay tuned for next month’s update, and I’ll see you in the next one!

The post Divi 5 April Progress Update: Strengthening The Foundation appeared first on Elegant Themes Blog.

Today, we are releasing Divi 5 Dev Alpha. This is the first step on our journey towards the public release of Divi version 5. It’s also my first update in what will become a series of monthly videos and blog posts that will keep you up-to-speed on our progress. If you are a Divi developer, keep reading to find out how to access the alpha.

If this is the first time you’re hearing about Divi 5, you might be a little confused! I gave a high level overview of Divi 5 in my previous post, so be sure to check that out first.

What Is Divi 5? A Quick Refresher

To recap briefly, Divi version 5 is a foundational update to Divi’s core technologies and API. It’s focused on improving performance, stability, scalability and extend-ability. It won’t be introducing new features, but it will be blazing fast, it will open up amazing opportunities for third party development, and it will provide our team with the foundation we need to spring forward into the future.

We our building ourselves the foundation we need to sprint forward once again and release great new features at a consistent pace.

The Divi 5 Release Schedule

We are approaching the release of Divi 5 much differently that any previous version of Divi. This is due to the scope of the project and the agile nature of our development process.  Divi 5 will be released in five phases. With each new phase, the product will become increasingly feature-complete and will be released to a larger part of our community.

As we approach the public beta phase, you may even find it appropriate to use Divi version 5 on new websites if you find that the improvements offered in Divi 5 outweigh whatever features may be missing in the current build. Let’s take a look at the five phases of Divi 5:

1. Phase 1: Dev Alpha – In this version of Divi 5, the new API will be almost finished and a moderate portion of Divi’s features will have been developed on the new API. We will inviting developers to explore the API and give us feedback on Divi’s new foundation.
2. Phase 2: Dev Beta – In this version of Divi 5, the API will be finished and a large portion of Divi’s features will be ready. We will continue to work with the development community to iron out any API-related bugs.
3. Phase 3: Public Alpha – At this phase, the API will be finalized and a majority of Divi’s features will have been developed on the new foundation. Some features will be missing, but most of Divi’s core features and modules will be available. At this phase, we will invite a large part of our customer base to test Divi 5.
4. Phase 4: Public Beta – At this phase, 100% of Divi’s features will have been developed on the new Divi 5 foundation. We will have fixed all bugs found during the public alpha, and we will continue to address feedback as we roll out the beta to the entire Divi community.
5. Phase 5: Official Release – At this phase, we will officially release Divi 5 as a normal update in the WordPress dashboard. Everyone will be able to upgrade to Divi 5 without any disruption to their websites.

How To Get Access To The Dev Alpha

The two initial development versions (including today’s version) will be limited releases available to active Divi creators, such as those in the Divi Marketplace. It will allow creators to get up-to-speed on Divi’s new API so that they can be begin transitioning their products and working on new features that can be ready to go when Divi 5 is released to the public.

The Dev Alpha version we are releasing today is a limited version of Divi 5 with a relatively complete version of the API. It’s missing features. It’s not intended to be used.  However, the foundation is solid, we’re ready for feedback, and we want the community to be involved!

If you are an active Divi creator (meaning you have developed your own Divi modules or features), and you would like access to the Dev Alpha, fill out this form to request access.

Stay Tuned For Monthly Updates

Divi 5 is a huge project that the majority of our team has already been working on for the better part of two years. With the release of Dev Alpha, we’ve jumped over the first major hurdle! Once we have progressed through the initial development versions, we’ll be opening up the Public Alpha and Public Beta to larger parts of the community. Everyone will get to use it, test it, and we’ll be making sure that everything is in tip top shape before the final release.

Be sure to follow and subscribe so that you don’t miss our ongoing Divi 5 updates. We will be shipping new Divi 5 versions every 2 weeks and I’ll being going over our progress each month. See you in the next one!

The post Announcing Divi 5 Dev Alpha appeared first on Elegant Themes Blog.

Today I am going to talk about some of the big Divi updates that we have been working on. This is going to be a long post with a lot of information! If you just want the cliff notes, here they are:

• We are working on Divi 5.0, a rewrite of Divi’s core technologies that will serve as our springboard into the future.
• Divi 5.0 is a foundational update focused on performance, stability, scalability and extend-ability.
• It will ship with a new API that will empower our team and the Divi development community to build better features, faster, and with fewer bugs.
• In the meantime, we are expanding our team to provide you with even more value during this transition.

Now for all the details 👇

We Are Building A New Foundation For Divi

About a year ago we began transitioning our development team over to a multi-year project, Divi 5.0. Right now the majority of our team is focused on this momentous endeavor that will define the future of Divi.

You might have noticed that Divi’s feature development pace has slowed down over the past year. That’s because as each new feature for the current version of Divi was finished, the team members involved were transitioned to the Divi 5.0 team. A project with a much longer time horizon.

Divi 5.0 is what we are calling the “Foundation Update.” It’s a complete rewrite of 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.

Now, as Divi inches towards its 10th birthday, it’s time to take a step back and build a new foundation that we can propel ourselves forward from once again into the next decade.

Divi 5.0 is focused on performance, stability, scalability and extend-ability. It’s going to be a lot faster. It’s going to be future-proof and built for the direction that WordPress is heading. It’s going to ship with an API that gives developers incredible freedom. It’s also going to be backwards compatible and non-disruptive to Divi users.

In fact, when you update to Divi 5.0, you won’t notice much of a change from a UI perspective. We aren’t adding a bunch of new features in Divi 5.0. That’s not the goal. At first glance, the Divi Builder is going to look and function the same way that it does now (with maybe a few cool new things snuck in here and there), but everything behind the scenes is going to be vastly improved, and those improvements will manifest themselves in several significant ways.

Improved Performance And Scalability

Performance and scalability are the focus of Divi 5.0. We are greatly improving the snappiness of the Visual Builder, the speed of front-end page loads, and the ability of Divi to handle very large and complex designs.

Recreating the Visual Builder gives us the opportunity to make fundamental changes to how interactions work and the way the application renders updates as you design your website, speeding things up from every angle. We are committed to making the Visual Builder extremely fast and for it to never get bogged down, no matter what you throw at it.

The speed of your website will also improve with Divi 5.0. We are recreating Divi’s backend framework, cleaning up years of technical debt, changing Divi’s storage format and improving its rendering mechanism. This new version of Divi will be able to processes design settings much more quickly.

No More Shortcodes

One of the biggest changes that will come with Divi 5.0 is the migration away from shortcodes and towards a more modern storage format. Migrating away from shortcodes has several benefits.

1. It will allow for faster and more streamlined processing of your Divi pages and all of their design settings.
2. It will result in fewer bugs born from the complexity involved in the way shortcodes and shortcode attributes are nested in the post content.
3. It will make it easier for us to build a system for enabling nested content of our own (such as rows within rows).

Most importantly, this change will bring Divi into alignment with the future of WordPress, which is evolving in a new direction.

The New Builder API

Probably the most exciting part of Divi 5.0 is a paradigm shift in the way we are approaching its development. It’s going to open up so many new possibilities for third party developers. The new Divi Builder will be completely customizable. Developers will be able to use the Divi API to create anything they want. Not only will developers be able to create new and amazing modules, but they will also be able to create new types of settings and completely new features of their own. In order to explain the difference between the current Divi API and the Divi 5.0 API (from one non-developer to another), let me make an analogy.

Let’s imagine that the Visual Builder is a house. We built that house and it was set in stone. Later on down the road, we wanted to give people the option to build their own modules, or in the case of this analogy, the ability to customize their house. Since the house was already set in stone, the ways that we could allow for customization were limited. We were only able to open up small specific ways to customize the house. We hammered a nail into one wall and said, “Here is a place where you can customize. You can hang a picture from that nail, just make sure the picture is the right size and that there is a wire that is compatible with the nail from which it hangs.”

That’s nice, but there isn’t very much room for innovation! Novel ideas are hindered by the rigid structure of Divi’s current API.

In the new version of the Divi Builder, we aren’t just going to give you a nail on the wall. We are going to give you the blueprints, the lumber, the hammer and the nails. In the current version of the Divi Builder, you can hang your own pictures on the wall. In the new version of the Divi Builder, you will be able to remodel the ground floor or even add a second story.

Empowering The Community

We are taking all of the “third party developers” in the community and elevating them to “1st party developers.” The tools you will have to customize the builder will be the exact same tools our team uses to build the builder in the first place. Our own interests as the creators of Divi and the interests of the development community, will be one and the same.

The future of Divi is as the foundation of a broader ecosystem. We want that ecosystem to thrive, just like WordPress has. In fact, developers familiar with creating blocks for WordPress will find a lot of similarities in the Divi 5.0 module API. WordPress blocks will be more easily adapted to Divi and WordPress developers will be able to jump head first into building things for our community. We are building this new version of Divi to work in harmony with WordPress.

If you are a developer, you are going to love these changes. If you aren’t a developer, you are going to love all the amazing modules and tools that developers from the community will be able to create for you.

Empowering Our Team

The new API won’t just be useful for developers in the community, it’s going to be useful for our own team as well. That’s because Divi will be built using the API that we create. Furthermore, we are building this new version of Divi with extend-ability as a core value. We are recreating everything we created in the past, but we are doing so while thinking much more deeply about how each feature might change and expand in unforeseen ways, allowing for less friction in future development.

Divi 5.0 is an investment into our own future. We are building ourselves the tools we need to build great software. While it will take a time to finish, once it’s done, it will be the springboard that allows us to sprint forward again, creating wonderful new features much faster than before, and with many fewer bugs along the way.

We are setting ourselves up so that we can outpace the competition and fulfill more of your requests.

Exciting New Projects Along The Way

While we work on Divi 5.0, we won’t be releasing a bunch of new features for the Divi Builder. If we did, they would need to be recreated all over again by the Divi 5.0 team, resulting in a never-ending development cycle 😵‍. That’s why our feature development pace has slowed down recently. But don’t worry…we aren’t going to leave you hanging! We plan to do the opposite.

This year we doubled down on Divi, hired more developers and expanded our team so that we could work on new Divi-integrated tools and resources on our website that will add even more value to your membership and improve your web design workflow. We are going to keep building things that will make Divi better, without disrupting Divi 5.0 development.

In fact, we already launched a couple of these new projects. The first example was Divi Cloud and the second example was Divi Teams. These features are different than other Divi features. They are independent applications that work with Divi and make Divi better, but they can be developed on their own and are supported by their own freemium models.

You are going to be surprised and delighted with the new stuff we continue to launch this year and next year, even while Divi 5.0 is in development. We are going to keep releasing new things that make Divi better, but we are going to focus on things around the builder and things that integrate with the builder, rather than on the builder itself. Once Divi 5.0 is released, it’s full steam ahead on all fronts!

When Will Divi 5.0 Be Ready?

You might be asking yourself, “when is Divi 5.0 going to be released?” That’s a question that is hard to answer at this stage of development. We have already been working on Divi 5.0 for over a year, and there is a lot left to finish. Our goal is to release a beta version sometime next year that everyone will be able to test. After that, the official release will completely depend on user feedback. This is a very big update and we won’t be rushing into it. You can expect Divi 5.0 to take a while to finish, but for that wait to be worth it. In the meantime, you can trust that we are planning for the future and that we have your best interests at heart.

Our tentative plan is to release Divi 5.0 in several stages:

1. Phase 1: Developer Alpha – This will be an unfinished version of the Divi 5.0 API. It will give developers a glimpse into the future of Divi so that they can start making plans on how their current Divi extensions will need to be adapted.
2. Phase 2: Developer Beta – This will be an unfinished version of Divi 5.0 with a finished version of the Divi 5.0 API. This will allow developers to start updating their extensions early, way before the official Divi 5.0 release.
3. Phase 3: Public Alpha – We will start the public alpha with a “lite” version of Divi 5.0. This will be a fully-functional version of Divi 5.0, but it will be lacking some of Divi’s current features and modules. It will allow a large portion of our community to use Divi 5.0 and give us feedback. This will be suitable for building new Divi sites and for testing, but it won’t be suitable for use on existing Divi websites due to its lack of features.
4. Phase 4: Public Beta – The public beta will start once all Divi features have been added to the public alpha and all feedback from the alpha has been addressed. This will be the finished version of Divi 5.0, pending any bug fixes found during the beta.
5. Phase 5: Official Release – We will officially release Divi 5.0, as a normal update in the WordPress dashboard, once all feedback from the public beta has been addressed.

We’re Still Here, Working Harder Than Ever

Don’t worry, there is a good reason we have been a bit quiet lately. We have had our heads down, working harder than ever on a new foundation for Divi, and on new projects built by new teams that will stretch us in exciting new directions. If you have any questions, please leave a comment! I’ll be reading every single comment and I look forward to chatting with you.

The post Let’s Talk About Divi 5.0 And The Future Of Divi appeared first on Elegant Themes Blog.