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!
Release 2.9
October 9, 2024
54 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!
NEW
Quick Search
NEW
Sync Element’s label with the first Global Class name
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!
NEW
WPCodeBox integration
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!
NEW
Generated Code & Element 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 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?
FIX
Advanced CSS: revamped from scratch with full SASS functionalities – including mixins and partials
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…
FIX
Advanced CSS: create/edit/disable separated CSS/SCSS files from the builder
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…
FIX
Advanced CSS: one-click toggle between your SASS code and the compiled CSS
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…
FIX
Advanced CSS: edit style.css of your child theme right from the builder
In the new revamped version of Advanced CSS, you can now edit and save your child theme's style.css right from the builder!
FIX
Advanced CSS: new AI integration. Both create new content and edit the existing one. All CSS files supported.
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.
FIX
Advanced CSS: new Selector Picker feature.
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…
FIX
Advanced CSS: new cross-search between all your files
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.
FIX
Advanced CSS: advanced enqueue options on frontend/builder and Gutenberg
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.
FIX
Advanced CSS: new live error checker when writing SCSS code.
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…
FIX
SuperPowerCSS: now support mixins and partials declared inside Advanced CSS
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…