Oxygen Builder 4.0 is here, and in this article we are going to take a look at all the new features, changes, and workflow that come with the new version. Oxygen is a well-known and well loved WordPress page builder that completely replaces the theme system.

For the past couple of years it's been on version three, and seen great additions such as CSS grid, a complete MetaBox addition, and additional speed optimizations and both the front end and the backend. People love it because it packs a ton of power in a relatively well designed user interface, well also I'll putting incredibly clean code making for a fast loading Website that is great for Core Web Vitals.

The headline features with the fourth iteration of Oxygen Builder are as follows:

Brand New User Interface

There's a growing collection of third-party plugins that redesign or reskin the backend builder of Oxygen. The team behind the tool must've got the hint that their UI was getting a bit outdated, so that is the headline feature for this release.

From the screenshot above we can see that the "add elements" panel has been re-created to show more elements in a screen, break points have been added to their own position on the top bar, and other top bar functions such as the undo redo, style sheet toggle, and more have been moved around.

Here's what was done:

• Enhancement: Inherited values from larger breakpoints are now shown in Properties Pane fields (#3665)

• Enhancement: Modals now animate out using the same AOS animation they animate in with (#3550)

• Enhancement: You can now upload custom screenshots for design set pages, blocks, and individual Sections (#3574)

• Enhancement: You can now double click an element's name in the Properties Pane to rename it (#3547)

A great way to keep your website structure easy to navigate.

• Enhancement: Added visual indication for whether a Properties Pane field is styled via class or id (#3548)

• Enhancement: Added search field for Selectors Pane (#4037)

If you have a ton of CSS classes managed in Oxygen, this will allow you to find them quicker, and make global changes on the website.

• Enhancement: Added keyboard shortcuts for duplicate, save, delete, copy, paste (#3951)

This is an incredibly welcome enhancement that allows you to now duplicate, save, delete, copy, and paste elements within a builder instance. While they did not add a right click menu, they said the stage for it, and added many of the capabilities via the keyboard shortcut that you would expect in a menu.

You will find other various user interface changes throughout the builder, such as the way margins and paddings are handled. It's now much more like a dev tools experience:

You will also notice that the actual colors within the builder changed, and are now very focused on various gray shades.

Overall, we find out the new UI and additional ease-of-use enhancements make the tool a more efficient an easier way to build websites that version 3.0. All of these changes are super welcome, and for some users it may even remove the need to purchase Hydrogen Pack (as there are now keyboard shortcuts).

Fix Repeater Duplicate IDs

An incredibly welcome fix - Repeaters no longer duplicate IDs across the individual posts that they display. This was one of the biggest issues with 3.0, and caused SEO problems as well as simply did not follow best practices.

Here's the actual markup - you can see that each ID has a number after it, allowing you to style specific cells, and removing repeated IDs which is not good for SEO.

PHP8 Support

This was a massive request in the Facebook group, and the tool now supports PHP version eight. Version 3.0 simply would not work or load on this new version of PHP. We can now utilize the speed enhancements that this brings.

Here's why PHP 8 is great:

Builder Loading Speed Enhancements

There are also some enhancements that directly impact the builder loading speed such as the removal of duplicate SVGs loading and an update to AngularJS 1.8.2, the latest supported version (#4031).

Read: Oxygen Builder Backend Loading Time Test

New Way of Storing Data

Previously, Oxygen pages and templates were stored in the backend as short codes. This was great for security, but wasn't the most efficient way to do things. With version 4.0, new pages are stored as JSON which is much more quick and efficient. There is backwards compatibility with sites built with 3.0, so no need to worry about any breaking changes.

After you upgrade, if you resign short codes, they will be converted into the new JSON format.

Additional WooCommerce Elements and Changes

This comes along side the new release of the core builder. Oxygen WooCommerce 2.0. There are two new elements, including a mini cart and a cross sells/upsells component.

The addition of several new Woo specific conditions is great, and will allow you to further customize your site depending on specific e-commerce situations.

Also, if you are familiar with themes, you can now override WooCommerce templates from a pre-designated folder instead of having to do a custom plug-in and reroute where will Connors looks for these template overrides.

Notes Regarding Oxygen V4.0

There are a few things that we wanted to cover in this blog post. The first is that both alpha and beta releases should never be used on production websites because something will probably break. You should wait until the RC (or release candidate), or the actual version 4.0 to come out. We see a ton of posts on Facebook saying that their website was broken after updating to version 4.0, and this is an expected thing if you were using alpha or beta.

Because the UI changed, as did the CSS, meaning that things will appear broken if you don't clear your browser cache and regenerate CSS - so definitely do that!

The final word of caution is that third-party plug-ins may break due to this new version. They do things a little bit differently in terms of adding components, and the CSS styles, but we expect that most major oxygen builder third-party developers will have their plug-ins compatible by the time that the RC comes out.

Further Reading:

• A Detailed Review Of The Oxygen Builder (Agency Perspective)
• How We Migrate Oxygen Builder Sites
• Divi Builder VS Oxygen Builder - Who Wins In 2021?

Conclusion

The fourth version of Oxygen Builder brings with it much-needed user experience an interface enhancements like keyboard shortcut to copy and paste elements, a new easier & design, PHP8 support and WooCommerce improvements. This release should set the stage for additional native tools like a right click menu and further backend speed enhancements.