Changelogs

Using single quotes inside the custom stylesheets generated inside the Advanced CSS modal could generate unwanted slashed on refresh and ultimately break the styles.

Using Emmet inside the SuperPowerCSS control could wrongly trigger the %root% shortcut.

Working on devices with tiny screens, you could experience the left panel shortcut icons being overflowing the quick search bar.

In case you had the setting “show dynamic data key in dropdown” enabled inside the Bricks setting, the “copy to clipboard” icon inside the Dynamic Data Modal was misplaced.

Some users experienced issues using the new keyboard shortcut logic introduced in 2.9 – mainly on Windows. This version should increase the compatibility on all devices.

If for any reason you’re not willing to load the WPCodebox inside the Advanced CSS panel, there is a new php filter to that. Just paste the following code inside your functions.php of your child theme:

// Disable WPCB integration inside Advanced CSS
add_filter( 'at/advanced_css/enable_wpcb_integration', '__return_false');

To avoid any potential error, the AI function has been disabled inside the Child Theme CSS file.

To avoid any human error, the initial commented code of the child theme CSS is now set as readonly and can’t be modified.

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 more advanced function of SASS – that gets compiled on the fly inside the builder – no refresh needed!

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 them, or even temporally disable any file at any time. You have now full control over your styles!

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 as readonly – so you don’t risk to mess with the CSS code while you are in SASS mode.

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 BEM classes.

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 saved to the database. Now you have an “error live checker” right inside the StyleSheet, so you know each time the scss code get compiled, and advise you if some errors have been found to easily debug them in no time.

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 mixins/partials at a further stage, the css declared in SuperPowerCSS will be automatically updated – on all the pages of your sites!

A new option has been added to the SuperPowerCSS control of AT: variabilize your css! This feature allows you to replace any static value from your css by a variable. The script will then automatically declare the newly created variables as scoped variables inside the root of your element.

A new option is now available inside the SuperPowerCSS control of AT: convert all the native control values from Bricks into custom CSS. Once clicked on the corresponding menu item, the script will automatically remove the existing styling values from the element, and insert the converted CSS values right inside the SuperPowerCSS field.

In the previous release, we introduced the ability to add Admin/Editor notes inside each element. In this release we extend this ability to the whole Page. Once the Admin/Editor notes feature been enabled in the element builder tweaks, you’ll see a new tab called “Notes” in the settings -> page settings of the builder. This time, the page notes are set as separate items inside a repeater so you can keep track of multiple notes on the page – each one easily sortable by labels.

There is now a new option inside the Theme Settings to set the Plain class as your default Global Class Picker. Once this option is toggled, you won’t need to click on the “P” icon to open the plain class: clicking anywhere inside the class input will trigger the plain class modal instead of the native Bricks dropdown.

In the previous releases of AT, the only way to update the Global Class list from the Plain Class modal was to click on the “Update Classes” button on the bottom of the modal. The logic has now been improved: clicking on any class button will assign the class to the element and automatically close the modal – so you spare that “Update Classes” click.

If you wish to add multiple classes at once, just hold the ShiftKey while you are clicking a class – that will prevent the modal to close.

As a side note, hitting Enter inside the editor will now also save the Global Classes and close the modal.

You have now the ability to copy a dynamic data value to your clipboard by clicking the corresponding icon right from the Dynamic Data modal.

The spread values inside the Box-shadow generator now support negative values.

You can new override the following variables generated by AT on specific elements –min-viewport, –max-viewport, –base-font and –clamp-unit. Say you want to change the root base-font inside a specific section of your page, you just have add the “.brxc-scoped-variables” utility class to your section, and use a scoped variable to override the default –base-font value. This will recalculate all your clamp variables that rely on the –base-font value, but only inside that specific section and without affecting the rest of your page.

You can now add CSS variables without any value inside the CSS manager. This is particularly useful if you already set these variables elsewhere, but still want to includes these variables in the variable picker

You can now import CSS variables in bulk without assigning any values inside the CSS manager. This is particularly useful if you already set these variables elsewhere, but still want to includes these variables in the variable picker

After adding a new variable inside the Variable Manager, the cursor will be automatically refocused on the “add new variable” input, thus you can quickly add several variables without having to use the mouse each time.

There is now a new option inside the theme settings that will allow you to choose which event between the V icon and the right-click should trigger the variable picker. If you choose the right-click, you’ll just have to right click on any supported control inside the Bricks builder to open the variable picker and select the value you to apply.

You can now select which color inside the Global Color Manager should be declared with the new css @property rule on the frontend. The new css @property rule is a powerful tool that can – as an example – apply transition in a color gradient context.

Starting from this release, all the parent colors (so not the shades) generated inside the Global Color Manager of AT will output 3 new complementary variables on the front. These values correspond to the Hue, the Saturation and the Lightness values of the parent color. This will allow you to generate further complex CSS function and create derrivated custom colors from your main Global Colors.

You can now switch between the “color” and the “variable” modes for each color declared inside the Global Color Manager of AT. The “color” mode is the same mode you experienced until now, while the “variable” mode is a new way to include a color variable defined elsewhere. This is particularly useful if you want to use the native color picker of Bricks for variables you created from your own CSS framework.

Since this setting could have a direct impact on the output colors of the website, it is better to switch it off by default.

You can now use the following PHP filters to place the correspond modal to the default position of your choice:

// Set plain class modal as left sidebar by default
add_filter( 'at/plain_classes/modal_position', function(){
	return 'sidebar left';
} );

// Set Class Converter modal as center by default
add_filter( 'at/class_converter/modal_position', function(){
	return '';
} );

// Set Advanced CSS modal as left sidebar by default
add_filter( 'at/advanced_css/modal_position', function(){
	return 'sidebar left';
} );

// Set AI Generated Structure modal as left sidebar by default
add_filter( 'at/ai_generated_structure/modal_position', function(){
	return 'sidebar left';
} );

These filters accepts 3 different values: ‘sidebar left’, ‘sidebar right’ and ” (which is the default centered position).

‘o1-preview’ and the ‘o1-mini’ have been added to the list of the OpenAI models you can use in AT.

Some people found the Go To Parent shortcut useful – even combined with the new element breadcrumb feature recently released by Bricks – so it has been reintroduced as an optional feature.

Let’s write some SASS, baby!

Enjoy using emmet abbreviations on all AT’s generated editors, including: Advanced CSS, SuperPowerCSS, CodePen Converter, Class Manager, etc…

The keyboard shortcuts of AT have been slightly revamped to avoid conflicts with the native browser shortcuts and the ones set by Bricks. Instead of listening the whole document (which may conflict with Bricks and the browser), it now listens to the body of the document. This way, we make sure that the AT shortcuts get the priority over the other ones – but remember that the focus need to be set inside the window in order to work. To set the focus on the window correctly, just click anywhere inside the document.

When trying to drag the Structure Panel, it would stick on the left side of the screen without the ability to move it left-right. This has been fixed.

The new Control Search setting introduced recently by Bricks (the one sitting at the bottom of the element panel) would get visually stretched by a CSS conflict with AT. This has been fixed.

In some rare cases, you could see a PHP warning popping up on blank pages. This has been fixed.

The native Bricks variable picker was incorrectly hidden by AT inside the Code element. This has been fixed.

The native Bricks Data picker was incorrectly hidden by AT inside the Code Element.

While it was mostly working, sometime the auto-expand feature from Bricks wasn’t applied once you entered inside the CSS tab. It should be fixed.

By default, AT would remove all the new filter elements introduced recently by Bricks. They have now been selected by default.

When exporting the ID styles from an Icon element to a global class, the Icon setting was incorrectly removed on the ID level. This has been fixed.

Applying the grid builder values while leaving the gap control empty would incorrectly create the default 20px gap in the builder. Now if you leave the gap control empty, the gap control of the builder will be empty as well.

Inside the grid builder, removing a columns/rows value (on the parent level) will remove the value inside the corresponding control field of the builder.

You can now use the r + TAB shortcut inside the Class Manager modal to create the %root% selector without issues.

While the breakpoint icons were correctly displaying, clicking on them could jump on the wrong breakpoint view. This has been fixed.

Since the 2.8, release non-standard properties (such as the logical properties) weren’t displayed anymore inside the suggestion dropdown of SuperPowerCSS. This has been fixed.

When activating the anchor tag inside the Advanced Text Wrapper options, and setting the href link, then changing the tag to another one – say “strong” – would keep generating the href output. Now the href will be printed only if you have the anchor tag actively selected.

Bricks recently changed the DOM structure of the topbar which leaded the “Edit with WordPress” icon to be always visible inside the Strict Editor View, even when it was correctly set to be hidden in the theme settings.

In some specific settings configuration, the variable suggestion dropdown appeared to be empty or misplaced inside the spacing controls (padding, margin, etc…). It has been fixed.

In some case where a deleted class id was still present inside an element object, the Style Overview function could generate a JS error. Now, even if a non-existing global class id is detected by the script, it simply ignores it and mount the existing global classes.

When typing a a clamp value inside the Variable Manager – such as 14|24|360|1400 – the value was correctly formatted and showed on frontend but wasn’t correctly saved in the database.

Bricks 1.10.2 introduced the new element breadcrumb feature which can safely replace the parent element shortcut by AT, thus this builder tweak has been deprecated.

This feature has been introduced natively in Bricks 1.10.2 and thus has been deprecated in AT.

When clicking on the CSS tab of an element, the auto-expanding setting from Bricks could not be respected when SuperPowerCSS was activated.

Nested calc() functions inside a clamp() function could create a JS error when importing CSS variables inside the variable manager.

In some edge cases, the ‘Suggestions Dropdown for CSS Variables’ builder tweak could hide the Bricks suggestion dropdown too aggressively. It now hides the core dropdown only when the corresponding text input is focused.

In some rare cases, the control groups located inside the content tab may become hidden. This issue should be fixed.

The control groups added by both BricksExtras and BricksForge (such as “Interactive”, “Tooltips”, “Animations”, etc..) weren’t compatible with the “Hide inactive Style accordion panel” builder tweak. Now they should be highlighted just like the Core control groups.

When importing CSS clamp variables inside the variable manager, the conversion script could generate several “useless” decimals. Now the script parse the result and limits the output to two decimals

You can now filter the global classes that don’t have any category assigned inside the class manager > bulk actions.

A new filter has been added to the Structure Helper modal that allows you to quickly highlight the elements that contain global classes with custom CSS applied to them.

A new “Rename Mode” has been added to the Structure Helper modal. It allows you to quickly rename any element in the structure panel and switch to the next element by hitting the TAB key.

The plain class has been revamped with new category dropdowns (similar to the variable picker) to easily add global classes to the class editor.

The backdrop-filter property isn’t working correctly on Safari yet without -webkit- fallback. That fallback has been added by default.

Both GPT-4o and GPT-4o Mini have been added to the models you can use for all your AI-related functions. GPT-4o has also been added as the default model on new AT installations.

The “em” tag has been added to the list of tags you can choose inside the Advanced Wrapper tweak.

For the people finding themselves typing the same keywords over and over inside the dynamic data modal, a new “Recent Search” row has been added where you can easily filter the last searched keywords without having to type them again.

A new filter has been added to the Structure Helper modal: the option to filter all the elements that have more than one global class assigned to it.

In earlier versions of AT, opening the CSS tab would automatically set the cursor focus inside the SuperPowerCSS editor. While this feature could spare some clicks, it could produce some unwanted behavior and a confused UX in specific scenarios.

This is the first effort to make the CSS editing lag-free when using SuperPowerCSS on pages with loads of elements and tons of global classes. The focus here has been put on the global class level: if you edit the CSS using SuperPowerCSS – even if you have thousands of global classes – the experience should be a lot smoother than before. Keep in mind that there are still different levels that produce some serious lags and will be tackled in the future.

The CodeMirror library used by Advanced Themer (SuperPowerCSS, Advanced CSS, Class Manager, etc..) has been upgraded to the last available version.

The builder tweak “Highlight Parent Elements” was using some small JS scripts to compute the function. While it wasn’t resource-hungry, the new CSS-only solution is now lighter and faster.

This improvement is part of a more general effort to make Advanced Themer as fast as possible. The amount of JS calculation has been drastically reduced when computing all the highlight functions related to the structure panel.

Since Bricks 1.10, some colors weren’t applied correctly to the AT elements shortcuts icons (like the :before/ :after icons).

In some scenarios, opening the AT class manager using the dedicated keyboard shortcut could produce a JS error that prevented the class manager to open correctly.

When the “Auto-focus on the First Unlocked Class” tweak was enabled, clicking on a global element with global class assign could potentially generate a JS error and lead to unpredictable errors inside the builder.

When importing color variables inside the AT color manager, the row value would missed the final parenthesis.

If you are an ACSS user using the AutoBEM tweak, you could experience the corresponding icon being displayed in an inconsistent order inside the structure panel when the “Expand Structure” tweak from AT was also enabled.

In Bricks 1.10, the code element has been upgraded (now there is a dedicated editor for HTML/CSS/JS). This upgrade caused a conflict with AT and the element’s options weren’t fully scrollable (the execution code toggle was hidden).

Bricks recently upgraded the template modal inside the builder and integrated most of the existing AT features. Thus it makes no sense to keep them in AT and have all been deprecated.

Dragging the structure panel wasn’t working correctly when ACSS 3.0 is installed due to a CSS conflict.

The floating button that opens the ACSS 3.0 panel was hiding the keyboard shortcuts icon when the right sidebar in AT was activated. Now, AT moves the floating icon to the left when the element shortcuts are enabled in AT.

When typing inside the Structeezy panel, the element keyboard shortcuts were triggered and new elements were being created inside the structure panel.

When typing inside the ACSS 3.0 panel, the element keyboard shortcuts were triggered and new elements were being created inside the structure panel.

Importing CSS variables inside the color manager was generating raw values with a missing final parenthesis.

it includes the following security fixes:

Security Fix – ACF now generates different nonces for each AJAX-enabled field, preventing subscribers or front-end form users from querying other field results

Security Fix – ACF now correctly verifies permissions for certain editor only actions, preventing subscribers performing those actions

Security Fix – Deprecated a legacy private internal field type (output) to prevent it being able to output unsafe HTML

Security Fix – Improved handling of some SQL filters and other internal functions to ensure output is always correctly escaped

Security Fix – ACF now includes blank index.php files in all folders to prevent directory listing of ACF plugin folders for incorrectly configured web servers

AT now includes blank index.php files in all folders to prevent directory listing of AT plugin folders for incorrectly configured web servers

The default styles in Bricks weren’t 100% whether a pseudo-element is active or some styles were applied to it. To make it even more obvious, a slight outline is displayed on the active state.

When the condition/interaction panel was active, clicking on any pseudo-element shortcut inside the element panel wasn’t automatically closing the condition/interaction view – you had to manually disable these particular views prior to navigate the other panels.

The 2.7 release introduced some significant performance improvements to the “Move elements in the structure panel” tweak, but broke the keyboard shortcuts related to it. The shortcuts are now restored.

The grid builder settings applied to a global class would correctly appy on the preview window, but wouldn’t be saved after builder refresh. This was probably due to a change from Bricks related to the new sync global classes feature.

When saving a nested element that contained single/double quotations marks inside an input (like in the custom css tab or the code element), the script would wrongly generate double trailing slashes each time you would save the nested elements to the database.

A JavaScript error related to the active tabs in the left shortcuts was preventing other functions of AT to mount correctly (such as the dynamic data modal or the Advanced Wrapper).

When opening the CSS tab with SuperPowerCSS activated, the element panel wasn’t expanding correctly event if the corresponding option was set in the Bricks settings.

As the title suggests, each time you open the Dynamic Data modal, the search input will be automatically focused. This allows you to filter your tags by a specific keyword without needing to click on the search bar first.

Previously, filtering the Dynamic Data list would return the values that match the tag label and name only. Now it also includes the parent group label.

Previously, when you filtered the Dynamic Data modal list using the search function, the same search term would persist the next time you opened the modal. Now, the search input is automatically cleared each time you open the Dynamic Data Modal.

To insert multiple tags without closing the Dynamic Data Modal, simply hold the SHIFT key while clicking on your desired dynamic tag. This will add the tag to the field without closing the modal, allowing you to continue adding other tags without the need to repeatedly open and close the modal.

It has been highly requested by the community to make the “expand all children” builder tweak able to collapse the children elements as well. This has been implemented in this release.

When exporting the AT Theme settings, the data related to the builder functions of AT weren’t included (such as the grid guide options, or the newly introduced nested elements). All the builder data are now part of the AT Theme Settings JSON export file.

Since the query filters are now officially out of the beta stage in 1.9.9, all the new filter elements have been added to the list of elements you can enable/disable inside the Theme settings of Advanced Themer.

The previous version of Dynamic Data Modal correctly filtered the tag by their label, but didn’t include the function name inside the search function. You can now filter your results by both the label and the name of each tag.

The main AT menu and the class contextual menu were sitting behind some bricks elements of the builder, resulting in a poor UI.

Bricks made different performance optimizations related to the structure panel which impacted the AT’s functions inside the Contextual Menu. This has been solved.

Some icon shortcuts inside the element panel weren’t styled correctly since a change made by Bricks in 1.9.9.

Bricks modified the opacity on the topbar icons since 1.9.9, but the new opacity wasn’t applying to AT’s icons.

Since the 2.6.4 release, exporting the Theme Settings of Advanced Themer wasn’t possible anymore due to a server error. This has been fixed.

In some cases, deleting a wrapper and moving the children up could assign a wrong position to the parent inside the structure panel. This has been improved.

The links related to templates where visible for the editors even if the “The “Remove template links” feature was enabled. This has been fixed.

There were some differences between the editable element list and the “Left panel visibility” element list which didn’t make sense. This has been fixed.

The “Open link in a new tab” has been deprecated since it is now part of Bricks Core since 1.9.9.

In some cases, the CSS Variable Conversion script that convert your old AT variables into core Bricks variables (since 2.6) could fail and produce unexpected results. The conversion script has been tweaked to manage some edge cases.

In the previous releases, if you quickly clicked on structure panel icons (such as the tag manager icons) it could trigger the draggable/resize function of the structure panel. Now the same function is only triggered when clicking on the structure title.

Since 2.6, clicking on the dynamic data icon inside a popup control (such as the color/border/boxshadow popups) would produce no visual effect since the dropdown was set to display: none. This has been fixed.

A CSS conflict could lead to make some Content tabs hidden when “Hide inactive accordion panels” tweak was active. This has been fixed.

The style group labels could overlap the SuperPowerCSS control when adding long CSS declarations. This has been fixed.

When running the Class Converter and selecting the “Remove ID styles” option, all the ID styles were correctly removed except for custom CSS. This has been fixed.

The CSS theme variables are now enqueued as an inline style element and doesn’t rely on an external css file.

Since 2.6, the theme variables where output inside the Footer by default to ensure they correctly override the global variables initialized inside the Head tag. This method could create FOUC. Now the default output position will be Head.

You will also be able to set the priority manually. The higher the priority you choose, the deeper the style tag will be positioned within the Head/Footer. The default is set to 9999.

In most cases, positioning the theme variables in the head with priority 9999 should produce the best results.

– IMPROVE: Resetting/importing/exporting global classes will also include the corresponding Global Class Categories

– FIX: The left content tab could return empty when clicking on the corresponding left shortcut

– FIX: Switching left tabs shortcuts under 100ms could calculate incorrectly the active Status

– FIX: The Form element could produce an empty style tab when switching from another element

– FIX: In some cases, importing CSS Global Variables could mess with the CSS Variable Categories array

After receiving many requests to get the Core Framework integration back inside the Variable Picker, we decided to offer a dedicated PHP filter to activate it back. Paste the following one-line code in the functions.php file of your child theme to activate the Core Framework tab inside the Variable Picker:

add_filter( ‘at/variable_picker/enable_core_framework’, ‘__return_true’ );