Divi 5 Public Alpha 20: We’re On The Home Stretch

The Divi 5 Public Alpha is available for use on new websites. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 20. We release new Divi 5 versions every two weeks, and it gets better each time.

If you haven’t tested Divi 5 yet, try it and let us know what you think.

What’s New In Public Alpha 20?

Since Public Alpha 19, we implemented 135 bug fixes and improvements, finished Loop Builder, and made significant progress on the new modules I sneak-peeked a couple of months ago.

All of the features slated for the Public Beta are finished, except for Woo Modules, which are nearing completion. Almost the entire team is now in bug-bash mode, preparing for the release of the Public Beta.

We’re on the home stretch!

Feature Progress

We’ve been sprinting forward incredibly quickly, launching 17 new features in the past six months. Now, we are transitioning from feature development to bug fixing and migration testing in preparation for the Public Beta.

Here’s what’s new on the feature front since the last minor version of Divi 5.

Loop Builder

We finished this feature and released it in Divi 5 Public Alpha 19.1. 🎉

Divi’s loop builder is unique in its freedom; you can loop anything without being restricted to a static loop module or container. Build your looping element, then customize your query using various convenient options and meta queries. It supports custom post types, including WooCommerce, custom fields created with ACF, and even ACF repeater fields.

It’s an incredible feature!

Three New Modules

I recently gave a sneak peek of several upcoming features and new modules. Those new modules, including the Group Carousel module, are finished and going through final testing.

We’ll release them very soon!

WooCommerce Modules

So far, we have finished developing 17 WooCommerce modules, including all product modules used to build custom product pages and category pages. This accounts for the majority of all WooCommerce modules. We plan to release this first batch of modules early next week.

We’ll wrap up the remaining modules shortly after, while the rest of the team fixes bugs in preparation for the launch of the Public Beta.

If all goes well, everything is lining up for a Public Beta launch in a month or so.

Changelog

Here is a list of all the changes implemented in Public Alpha 20.

• Fixed an issue where moving disabled 3rd-party modules would cause the settings modal to crash.
• Fixed the Transform Origin drag button positioning when using global variables.
• Added support for New MailerLite API integration with improved features and Bearer token authentication while maintaining Classic MailerLite compatibility.
• Fixed import and export of module and option group presets from Divi layouts.
• Fixed an issue where dragging modals over sidebar rows didn’t show visual indicators for where the modal would be docked.
• Fixed TextArea placeholder display and reset icon functionality in the Visual Builder.
• Fixed an issue where custom gutter width settings in Row presets and Row Sizing Option Group presets were not applying correctly on the frontend, causing rows to display with default spacing instead of the configured custom values.
• Fixed an issue where preset style for sections would not render properly when a Theme Builder template’s layout was on the page.
• Fixed an issue where hovering over child module items would automatically change their order without dragging.
• Added correct FE content for WooCommerce Product Rating module, replacing placeholder content.
• Added correct FE content for WooCommerce Product Additional Info module, replacing placeholder content.
• Updated WooCommerce Product Tabs module styling to ensure consistent appearance between the Visual Builder and the frontend.
• Added correct FE content for WooCommerce Product Reviews module, replacing placeholder content.
• Fixed WooCommerce Product Upsell module frontend output and improved performance with caching optimizations.
• Added correct FE content for WooCommerce Product Add-To-Cart module, replacing placeholder content.
• Added correct FE content for WooCommerce Product Cart Notice module, replacing placeholder content.
• Added correct Visual Builder content for WooCommerce Product Rating module, replacing placeholder content.
• Added correct Visual Builder content for WooCommerce Product Additional Info module, replacing placeholder content.
• Implemented WooCommerce Product Tabs module functionality in Visual Builder.
• Added correct Visual Builder content for WooCommerce Product Reviews module, replacing placeholder content.
• Implemented Visual Builder output for the WooCommerce Product Upsells module.
• Added correct Visual Builder content for WooCommerce Product Add-To-Cart module, replacing placeholder content.
• Added correct Visual Builder content for WooCommerce Cart Notice module, replacing placeholder content.
• Updated third-party developer tutorial to document the new render-time hook for modifying module groups, providing complete guidance for both registration-time and render-time module group customization.
• Fixed an issue where module and option group presets were not working correctly on the frontend when they relied on the default preset.
• Enhanced RichText field component with configurable upload button and tab visibility controls for improved module customization.
• Fixed an issue where resetting Custom CSS in Page Settings did not remove the CSS from the database, causing it to reappear after page reload.
• Fixed an issue where empty lines in global text variables were automatically filled with content from the following line, preventing users from maintaining proper text formatting.
• Fixed ColorPicker remove and reset button functionality and enabled removal of preset background colors in both Visual Builder and frontend rendering.
• Fixed an issue with the rich-text editor where the cursor would jump to the end of the previous paragraph when adding a new paragraph.
• Fixed Visual Builder incorrectly showing “You Have Unsaved Changes” modal when no changes were made.
• Fixed an issue where the Blog module’s Excerpt Length setting was not applied to manual post excerpts, ensuring consistent truncation behavior for both manual and auto-generated excerpts.
• Fixed PHP error when generating video overlay thumbnails from self-hosted MP4 videos on the frontend.
• Fixed box shadow colors reverting to text color instead of using the default shadow color when the shadow color is not explicitly set in the Text Module.
• Fixed the Group module drag-and-drop to allow inserting modules between existing children instead of only above or below the Group.
• Fixed an issue where preset values for Layout, Position, and Gutter option groups did not correctly update the visibility of their respective field controls.
• Added keyboard shortcut (Alt+R) to quickly cycle through responsive view modes in Divi 5 Visual Builder.
• Fixed issue where users could not set 0% opacity for global colors and CSS Variable type values in the color picker.
• Fixed the Cancel Changes button in Global Variable Manager to reset changes while keeping the modal open instead of closing it.
• Fixed ColorPicker shortcut codes and color aliases to properly preserve opacity when set below 100%.
• Fixed CSS variable names overlapping with the unit field in the Divi 5 color picker when using long variable names.
• Fixed ColorPicker preview not updating when field value is reset.
• Fixed an issue where custom padding applied to empty columns was not correctly displayed in the Visual Builder.
• Added atRules support to the FiltersStyle component for conditional filter styling with media queries and CSS at-rules.
• Added atRules support to the Overflow component for conditional filter styling with media queries and CSS at-rules.
• Fixed precision issue where 6-column flexbox layouts occasionally flicker and wrap to 5 columns during browser resize operations.
• Fixed issue where animations for the WooCommerce Breadcrumb module were not working correctly on FE or VB.
• Fixed Blog Module grid layout display issue where full-width columns were not displaying correctly on the frontend.
• Improved current style component documentation organization and standardized parameter formatting for better developer experience, and added missing ones.
• Fixed blog module layout display setting not being properly converted when migrating from legacy Divi to Divi 5 format.
• Fixed SVG images are not displayed in flex layout sections when no dimensions are specified in the Image module.
• Fixed an issue where WooCommerce Breadcrumb legacy modules showed icons and labels instead of icons only in Design > Text Tabs.
• Fixed an issue where column presets with block layout settings would not apply correctly in Visual Builder and Frontend, causing columns to use flex layout instead of the preset-defined block layout.
• Fixed the WooCommerce Product Rating module not showing preview content in D5 Visual Builder.
• Fixed WooCommerce product tabs Include Tabs field to display as checkboxes instead of text input in the Divi 5 shortcode module.
• Fixed empty default values for WooCommerce Product Upsell and Related Products modules when edited in D5.
• Fixed categories field in D5 shortcode modules not displaying taxonomy terms alongside meta categories.
• Fixed Visual Builder displaying an empty page when Code modules contain Divi 4 shortcodes.
• Fixed the ColorPicker component, which incorrectly reset intentionally removed colors to default values when mounted or opened in the ColorPicker modal, and updated Page Settings ColorPicker fields to display the empty state when initialized with removed colors correctly.
• Fixed WooCommerce Product Upsells module show/hide toggles for Price and Rating elements in Visual Builder.
• Fixed Star Rating Text Alignment option not working in the WooCommerce Product Upsells module.
• Fixed Loop Builder Target Loop dropdown displaying deleted modules and improved module cloning to generate unique loop IDs.
• Fixed an issue where pagination modules failed to render when placed above looped content in Divi 5 Loop Builder templates.
• Added atRules support to Transform, Order, and Layout components for conditional filter styling with media queries and CSS at-rules.
• Fixed a bug with WordPress that failed to create a new widget area.
• Fixed CSS numeric input fields auto-validating while users were still typing, improving user experience in spacing, range, and border controls.
• Refactored tab module code to eliminate duplication and improve maintainability in loop dynamic content scenarios.
• Fixed the reset button not appearing after removing default background colors from modules like Audio Module.
• Improved code maintainability by centralizing custom field date formatting functionality, ensuring consistent behavior between regular and loop custom fields.
• Added atRules support to the TransitionStyle component for conditional filter styling with media queries and CSS at-rules.
• Added Post Modified Date option to Dynamic Content picker, enabling users to display when content was last updated in both regular content and Loop Builder contexts.
• Fixed margin-bottom values not being applied for the WooCommerce Product Meta module in Visual Builder.
• Renamed SimpleBlockParsed class to SimpleBlockParserStore for better semantic clarity and consistency.
• Fixed the WooCommerce Product Upsells module image styling not applying on the frontend when used on regular pages.
• Fixed the field label text color not applying to WooCommerce group products in the Add To Cart module.
• Updated the introduction page to reflect the improved flow and fix grammar.
• Fixed image filters are not applied to product images in the WooCommerce Related Products module.
• Fixed Title Text Size and Product Title Text Size controls not working in Visual Builder for WooCommerce Related Products module.
• Fixed WooCommerce Related Products module Product Count field to correctly display the default value when cleared and improved reset behavior when the field is emptied via backspace.
• Fixed the WooCommerce Product Description module, which is not updating when product descriptions are changed in the WordPress backend.
• Fixed background mask and pattern not displaying correctly on the WooCommerce Cart Notice module in Visual Builder and Frontend.
• Introduced Loop Builder
• Fixed an issue where the gradient preview is broken once we use a CSS variable.
• Fixed button icon with proper placement, position when shown on hover is disabled.
• Fixed the inline text editor failing to appear when specific plugins are active by improving null value handling in TinyMCE editor initialization.
• Improved Backwards Compatibility for Divi 4 modules that render Divi 5 modules from the library.
• Added loop pagination support to the Post Navigation module, allowing pagination to connect to specific loops on the page for enhanced Loop Builder functionality.
• Enhanced Post Navigation module with full WP Page Navi plugin support, enabling numbered pagination in Visual Builder with complete Design Tab styling compatibility.
• Fixed color picker modal to correctly match the dark theme when editing Option Group presets, improving visual consistency in the preset editing workflow.
• Fixed the issue of not changing colors using the Dynamic content selection.
• Fixed element preset color inversion inconsistency where settings panels did not invert color modes during editing.
• Fixed keyboard shortcut conflict where Cmd+Shift+R would reset module attributes instead of refreshing the page.
• Fixed an issue where flex-grow and flex-shrink options could not be deselected on tablet and phone breakpoints after being enabled on desktop.
• Fixed Loop Element post type filtering to display all post types when the Post Type field is empty on the frontend.
• Fixed color picker returning incorrect color when clicking the spectrum after changing the hue slider.
• Fixed inconsistent dropdown spacing in Theme Builder Loop forms to match the regular page editing interface.
• Enhanced Post Navigation module with comprehensive loop pagination support and full WP Page Navi plugin integration.
• Fixed default background colors disappearing when opening the ColorPicker modal in modules like CTA and Audio.
• Fixed unnecessary processing of empty content during Visual Builder flexbox migration, improving performance when loading pages with no content.
• Fixed Row module align-items CSS property only applies when the display mode is set to block, ensuring consistent styling behavior.
• Fixed reset option breaks the module with ACF.
• Fixed Loop Builder Query Type reset button to properly reset dependent fields like Post Type selection to their default values.
• Added Loop Custom Field support for dynamic content, allowing access to custom field values within loop contexts for posts, users, and terms.
• Fixed incorrect tablet media query ranges in the flexbox grid system that could cause layout issues on tablet and phone devices.
• Fixed the Group module drag-and-drop to allow inserting modules between existing children instead of only above or below the Group.
• Fixed an issue where preset values for Layout, Position, and Gutter option groups did not correctly update the visibility of their respective field controls.
• Fixed Loop Element Post Type field to display plural post type names (e.g., “Posts” instead of “Post”) when automatically populated, matching the behavior of manual selection.
• Fixed dynamic values not rendering in the Audio module Album field when using the loop builder.
• Removed empty Design and Advanced tabs from Map Pin settings modal.
• Fixed grid mode in grid modules by improving Theme Builder context detection for Dynamic Assets generation.
• Fixed an issue where custom padding applied to empty columns was not correctly displayed in the Visual Builder.
• Fixed an issue in the Contact Form module where radio fields would get duplicated when a radio field was selected.
• Fixed Loop Builder user input sanitization to prevent potential security vulnerabilities in query parameters.
• Fixed loop position functionality where child modules in looped rows incorrectly displayed the same post instead of respecting their loop position settings.
• Fixed an issue where Loop Dynamic Content displayed raw variable strings instead of resolved content in the Visual Builder for Bar Counter modules when the loop was enabled on the parent Bar Counters module.
• Fixed loop date variables displaying one day behind in timezones ahead of UTC when using custom date formats.
• Fixed an issue with right-click options where column duplication was limited to 6 columns in flex rows.
• Fixed an issue where Loop Featured Images lacked responsive attributes like width, height, and srcset, which are automatically added to regular Featured Images.
• Fixed issue where closing HTML tags in loop dynamic content before/after fields were stripped, causing malformed HTML output on the frontend.
• Added support for WooCommerce product category images in Loop Builder when using Terms query type with Product Category selection.
• Fixed issue where modules inside looped elements incorrectly had their add module and options buttons hidden, preventing interaction and content editing within loop iterations.
• Fixed issue where Loop Element modules displayed “No Results Found” message instead of loading indicator while fetching loop data.
• Fixed duplicate “(Loop)” suffixes in admin labels for looped child modules in the Visual Builder.
• Added date formatting options to Manual Custom Field Name in Dynamic Content, allowing users to format date values with the same formatting options available in Loop Publish Date and Page Publish Date.
• Fixed the ACF menu undefined error on Visual Builder.
• Fixed issue where child modules with Loop Dynamic Content would lose their dynamic values after toggling the parent container’s Loop Element off and back on.
• Fixed bug with Custom CSS settings not being rendered for legacy third-party plugins.
• Fixed an issue where loop dynamic content items displayed empty labels in draggable lists when using modules with loop functionality enabled.
• Updated PHPCS PHP compatibility checks to reflect the PHP 7.4 minimum version requirement.
• Fixed an issue where loop-enabled modules were not appearing in the Post Navigation Target Loop dropdown in Divi 5 Visual Builder.
• Fixed React warnings that appeared when hovering over the Post Navigation module in the Add Module modal.
• This PR description follows the template structure and provides comprehensive technical context, root cause analysis with git blame insights, specific QA guidance, and proper documentation for future developers.
• Unblocked 10 legacy third-party plugins for use with Divi 5, including divi-ajax-filter, divi-bodycommerce, divi-form-builder, divi-machine, divi-machine-account, divi-mega-menu, divi-membership, divi-mobile, divi-nitro, and divi-protect.
• Fixed Post Navigation module pagination links losing port numbers in development environments when connected to loop elements with the WP PageNavi plugin enabled.
• Fixed loop post type filtering to work correctly when the loop is first enabled, ensuring the frontend displays only the selected post type instead of all post types.

The Divi 5 Release Schedule

It’s important to note that Divi 5 is production-ready for use on new websites today! Due to the scope of the Divi 5 project, we took a non-traditional approach to its release schedule, releasing it in five phases. The ultimate goal is to make Divi 5 as helpful as possible, as soon as possible, to as many people as possible.

We are in the Alpha phase, akin to “Divi 5 Lite.” It’s missing a few features, but what’s done is ready to be used. It’s far superior to Divi 4 in almost every way. If you prefer Divi 5, you can use it to build new websites.

If an existing website depends on a feature that hasn’t been added to Divi 5, you should continue using Divi 4. WooCommerce modules are the only things missing. Even then, Divi 4’s legacy WooCommerce modules will still work in Divi 5 in backward compatibility mode.

When Will Beta Be Ready?

We aim to enter beta in ~1 month based on our progress. All WooCommerce modules will be finished within three weeks. Meanwhile, the rest of the development team is working on bugs and improvements. With all features complete and the full force of the team working on bugs, you can expect some significant progress over the following two versions.

When Will Divi 5 Be “Officially” Released?

Divi 5 will reach its “final form” before the end of the year, with the ultimate goal of leapfrogging the competition before the year ends. Part of that goal involves aggressively developing new features as part of the feature swap.

But don’t forget! Between now and then, you can use Divi 5 whenever it becomes your preferred experience. Instead of rushing to a final release, we’re maintaining both Divi 4 and Divi 5, giving users a choice.

Once we’re confident in removing that choice, we’ll make it official, and everyone will get the Divi 5 upgrade notification.

Jump Into Divi 5 Today

The Divi 5 Public Alpha is available today. Give it a try, and let us know what you think!

If you find a bug, report it to our team, and we’ll fix it. We’ll continue to work aggressively to add new features and address feedback.

Stay tuned for a new Divi 5 version every two weeks.

The post Divi 5 Public Alpha 20: We’re On The Home Stretch appeared first on Elegant Themes Blog.

The Tech Zone