Release 2.9

October 9, 2024
57 changes

Version 2.9 is probably one of the biggest update we ever made! Although it has undergone extensive testing and received minimal bugs in Beta/RC testings, it’s strongly advised to update AT in a staging environment first. This allows you to ensure everything functions as expected before deploying it to production. Remember to backup your site before upgrading to prevent any potential data loss in case of unforeseen issues.

 

Advanced CSS 2.0

 

The Advanced CSS feature has been completely revamped, bringing a host of exciting new tools! Now you can edit your child theme directly within the builder, create custom stylesheets, and enjoy advanced enqueuing options. It also introduces a new selector picker, AI-powered stylesheet creation and editing, full SASS integration (with support for partials and mixins), and a live error checker. You can even view the compiled CSS file in real-time. And best of all—there’s full WPCodebox integration!

 

Codepen Converter

 

Imagine writing (or copy-pasting) HTML, CSS, or JavaScript into an editor, clicking a convert button, and—boom!—all that static, hard-to-read code is transformed into dynamic Bricks elements. That’s exactly what this feature delivers! Simply drop your custom code into the editor, and watch as it seamlessly converts into native Bricks elements that can be easily edited and exported. Smiles guaranteed!

But don’t get fooled by the name! It’s not just for codepen’s – you can convert any HTML code. The editor supports Emmet, tag auto-close & dropdown suggestions: converting HTML codes to Bricks has never been so fun!

 

AI Generated Structure

 

Welcome to the future, folks! Imagine being able to generate an entire page using native Bricks elements — complete with accurate attributes, BEMified global classes, using your Global CSS variables and color, and even set the elements labels for you— from just a single AI prompt. It’s not a vision for tomorrow — it’s happening today!

 

Generated Code & HTML Parser

 

Playing with the Bricks’ native controls and seeing real-time changes in the browser is incredibly satisfying. But sometimes, you need to dig deeper into the code generated on the frontend. With this new feature, you get a new tab where the generated CSS and HTML are fully exposed. You can even tweak the HTML code directly, and the HTML parser will automatically update the Bricks controls with your changes.

 

Quick Search

 

Looking for a specific element inside your structure? One click! Wanna add any new element to the structure? One click! You want to assign (or create) global classes/variables to your element? that’s also one click. Say goodbye to the countless hours spent at searching after your stuff!

 

Tons of improvements and bug fixs

 

This version includes dozens of new additions, improvements, and minor tweaks. It also fixes some annoying bugs introduced in the earlier versions.

 

Check it out!

Looking for a specific element inside your structure? One click! Wanna add any new element to the structure? One click! You want to assign (or create) global classes/variables to your element? that’s also one click. Say goodbye to the countless hours spent at searching after your stuff!

Need a quick way to generate labels for your elements? How about automatically creating labels based on the class attached to the element? That’s the core idea behind this tweak! As soon as you add a class to an element, the script instantly “labelizes” the class name and attaches it to the element. No more worrying about labels—it’s all done for you!

Imagine writing (or copy-pasting) HTML, CSS, or JavaScript into an editor, clicking a convert button, and—boom!—all that static, hard-to-read code is transformed into dynamic Bricks elements. That’s exactly what this feature delivers! Simply drop your custom code into the editor, and watch as it seamlessly converts into native Bricks elements that can be easily edited and exported. Smiles guaranteed!

WPCodeBox is a powerful style and script organizer, highly popular in the Bricks community. However, one crucial feature was missing for full Bricks compatibility: the ability to edit CSS, SASS, and partials directly within the builder and see live changes without refreshing the page. With this new integration, you get a seamless, fully integrated workflow — all without ever leaving the builder!

Give your Code Element a powerful upgrade! With Code Element Tweaks enabled, you’ll unlock a range of new features designed to simplify writing and managing custom code within Bricks. These enhancements offer a more intuitive and efficient experience, allowing you to handle your custom HTML, CSS, and JavaScript with ease, reduce friction, and save you time!

Welcome to the future, folks! Imagine being able to generate an entire page using native Bricks elements— complete with accurate attributes, BEMified global classes, and labels — from just a single AI prompt. It’s not a vision for tomorrow — it’s happening today! Harness the power of AI and the flexibility of Bricks to create professional-grade HTML structures in seconds.

Playing with the Bricks’ native controls and seeing real-time changes in the browser is incredibly satisfying. But sometimes, you need to dig deeper into the code generated on the frontend. With this feature enabled, you’ll get a new tab where the generated CSS and HTML are fully exposed. You can even tweak the HTML code directly, and the HTML parser will automatically update the Bricks controls with your changes. It’s like magic, isn’t it?

Advanced CSS was great, but if you are SASS lover, this update got to a whole new level! The whole modal has been redesigned from scratch. It now includes functionalities that set a new standard for any page builder in the WordPress Community: a full integration with SASS - including _mixins, _partials, and all the…
Previously, Advanced CSS was limited to edit the page and the global CSS from the builder, but was unable to create separated files and manage your styles with more granular control. That limitation belongs to the past! Now, you create as many css/scss files as you need, set different enqueue priority values for each of…
When writing SASS code, a common need we often experience is to check how our code is translated to CSS and catch any possible error on the fly. Advanced CSS gives you a handy "View compiled CSS" toggle that let you inspect the generated code at any time. The "view compiled CSS" view is set…
In the new revamped version of Advanced CSS, you can now edit and save your child theme's style.css right from the builder!
The revamped AI integration inside Advanced CSS is more powerful than even. You can enable it for any type of file: page css, global css, custom css (css, scss or even partials). It allows to create new AI-generated declarations, but also "tweak" your existing code.
A new Selector Picker has been added to the Advanced CSS styles. Clicking on the corresponding icon, you'll be able to select any DOM element inside the preview window - it will generate a unique selector and paste it inside your active StyleSheet, ready to be styled! The generation of the selector is optimized for…
You can now search any keyword (selectors, properties, etc...) between all your files loaded in Advanced CSS and it will filter the stylesheets where the keyword is present.
You have new enqueue options when dealing with custom styles: you can enqueue them on the frontend, inside the Bricks builder, and/or inside the block editor of Gutenberg. You can also set a custom priority value for each single stylesheet.
Remember: when writing SCSS code inside Advanced CSS, the compiled CSS styles are calculated on the fly and render directly inside the builder. The script detect if your code is valid before compiling (otherwise it would create errors in the generated code) and only when the code is error-proof, the value will be applied and…
The SuperPowerCSS (with SASS activated) is now connected with all the mixins and partials created inside Advanced CSS. You can just use the @import function to import any mixin declared in Advanced CSS, or any variable declared in your _partials file, and SuperPowerCSS will compile the vanilla css accordingly. And if you even change the…