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.