Changelogs

Advanced Themer now fully supports the component functions of Bricks since v.1.12.

A new top-right icon within the Structure Helper modal allows you to extend/collapse the inner elements of the components available inside the page.

Clicking on any active filter within the Structure Helper modal will reset the filter and show the structure list without any opacity.

You now have complete freedom to toggle the visibility of any Bricks element using the left-visibility feature in Strict Editor View.

The Right Shortcuts next to the structure panel have been redesigned to feature a new options icon. By clicking this icon, a modal opens where you can easily add or remove elements, including third-party ones. Additionally, you can rearrange the active elements by dragging and dropping them to customize the order. Now, you have complete control over your right shortcuts!

The requests made by ACF to the database went from 284 to… 1!

All the root elements (or parent elements) of each component inside Class Converter have now an active background color. It makes it easier to differentiate on the fly which elements are a parent, and which are children.

When clicking on the skip/include toggle next to a root element (or parent element) of a component, all toggle status will be applied to all the children of that element. This is especially useful when you need to disable an entire inner-component without the need to manually toggle off each child one by one.

A new option has been added in Class Converter to sync the label of each element with the newly assigned global class name.

In previous versions, the HEX input triggered the color calculation only when you clicked outside the field. Now, the functions are executed immediately as soon as a 6-digit HEX code is entered into the input.

In previous versions, the HEX input triggered the color calculation only when you clicked outside the field. Now, hitting the ENTER key or the TAB key will also fire all the functions related to the color calculation.

You now have access to all deleted global classes within the new Trash category in AT’s Global Class Manager. Additionally, you can restore deleted classes directly from the manager or permanently remove them as needed.

You can now open the Variable Picker using both the V icon and right-click events by selecting the ‘Both’ option in the theme settings.

You can now customize the default nested elements using the following PHP filter within your child theme:

// Modify the default nested elements
add_filter('at/nested_elements/default_elements', function($default_elements){
	
	// Example 1: See the data structure of the default nested elements
	var_dump($default_elements);
	
	// Example 2: Remove all the default nested elements
	$default_elements = [];
	
	// Example 3: Add a new nested element.
	$default_elements[] = [
		'id' => 'my_nested_element',
		'label' => 'My Nested Element',
		'icon' => 'ti-id-badge',
		'category' => 'default',
		'default' => true,
		'elements' => [
			// include your nested elements here
			[
				'id' => 'nddjcp',
				'name' => 'block',
				'settings' => [],
				'children' => [],
			]
		],
        
	];
	
	return $default_elements;
});

A new “Convert to Component” icon now appears on all custom nested components. Clicking this icon saves the nested element as a native Bricks component (introduced in v1.12).

You can now customize the default presets in the Box-Shadow modal using the following PHP filter within your child theme:

// Modify the Box-Shadow Presets
add_filter('at/box_shadow/presets', function($presets){
	
	// Example 1: See the data structure of all the default presets
	var_dump($presets);
	
	// Example 2: Remove all the default presets
	$presets = [];
	
	// Example 3: Add a new preset. One array for each layer.
	$presets[] = [
		[
            "rgb" => "255,149,5",
            "alpha" => 0.3,
            "x" => 1,
            "y" => 2,
            "blur" => 3,
            "spread" => 4,
        ],
		[
            "rgb" => "255,149,5",
            "alpha" => 0.5,
            "x" => 5,
            "y" => 6,
            "blur" => 7,
            "spread" => 8,
        ]
	];
	
	return $presets;
});

Recently, many users were unable to see new Bricks elements in the builder. This occurred because if you saved the “Enable / Disable” array in a previous release, where these elements weren’t part of the list, they ended up being unselected in the theme settings, causing them to be hidden in the builder. This was an oversight. Going forward, all elements will be visible by default, and only the ones you choose to disable will be hidden.

Additionally, the elements list is now loaded dynamically, ensuring it always includes the latest elements that can be enabled or disabled in the builder.

In this release, all options in the “Enable / Disable” array will be reset to unchecked, so you’ll need to manually re-select any elements you wish to disable.

If you choose not to adjust these settings, there will be no impact on your site’s frontend. The only change will be that any previously excluded elements will now appear in the builder’s list by default.

All data previously stored in the “AT – Theme Settings” — including Grid Guides Settings, Right Shortcuts Settings, Strict Editor Settings, Nested Elements Library, Global Query Manager Settings, and all Advanced CSS scripts — has now been organized into separate toggles. This allows you to have granular control over which settings you want to import or export. 

You can now import/export new native Bricks data, such as the Bricks Settings, the Pseudo Classes, the Breakpoints Settings, the Structure & the Panel Width.

Within the Plain Classes modal, you can now easily identify locked classes by the lock icon next to each one.

In some cases, changes made to the Advanced CSS stylesheets were not properly reflected on the frontend due to potential server-side cache issues. To resolve this, a version number will now be added to each stylesheet enqueued by AT, ensuring the stylesheet is correctly refreshed on the frontend.

You can now filter the structure by an element ID. It supports both the CSS ID and the internal Bricks ID. This is particularly useful when you want to jump on an element with a specific ID for debug purposes.

If you enable the “Hide/Remove Element” controls in the Theme settings, two new shortcuts will be visible within the “Hide Element” item in both the Structure Panel and the Class contextual menus. These shortcuts allow you to quickly hide/show an element in the builder and remove/activate it on the frontend without looking at the element panel.

A new set of commonly used builder tweaks can now be toggled on/off within the AT Main Menu without leaving the builder and refreshing the page. For example, if you want to disable the “Lock ID styles” for some time while you’re working on a page, you can disable that specific tweak inside the builder with one click and enable it again at any time.

The SASS compilation logic within the builder has been completely overhauled, significantly reducing resource usage on your computer.

In previous versions, attempting to select an element’s label within the structure panel using the keyboard arrow keys would mistakenly trigger AT’s “Move Element” functions. The script has been updated to ensure it checks if a label is selected before executing any movement actions.

The “Generate Global Query Loop” option in the query loop popup of the builder was previously visible only when a query type was manually selected. Now, it is displayed even when no specific post type is selected.

The Tag Manager has been completely overhauled for improved performance and usability. It now runs more efficiently within the builder, eliminates the previously confusing color indicators (green, orange, red), and lets you input custom HTML tags directly from the structure panel for any elements that support them.

New Keyboard shortcut options have been added for the newly introduced AI Prompt Manager and the Quick Search functions.

A new structure list has been added to the Style Overview modal, enabling you to effortlessly navigate and manage the styles of all elements on your page without repeatedly opening and closing the modal.

A recent update to the ACSS code caused the dashboard icon to overlap with the right shortcut sidebar in AT. The icon is now programmatically repositioned within the structure panel to prevent this issue.

If the selected element contained a global class ID that had previously been purged, the ‘focus on first unlocked class’ script could trigger an error. Now, the script checks if the global class exists in the database before applying the auto-focus.

If your OpenAI API key was not entered correctly in the theme settings, a JavaScript error would appear when opening the ‘Generate AI Structure’ panel.

The icon control within the Icon element was not properly skipped by the class converter, causing its value to reset after the conversion process.

When importing global class settings via the Import function in AT (within the theme settings), the process previously ignored the locked list, resulting in all your classes being unlocked. Now, locked classes are properly included during export and import.

If a nested component contained an element with a global class that had been purged, the script would generate an error during the save process, preventing the component from being saved correctly.

If you’ve written lengthy CSS code in SuperPowerCSS, you may have encountered an issue where the last rows are inaccessible due to an overflow problem. This should now be solved.

In the Color Manager, changing the position of a parent color could cause its corresponding shades to misalign. Now, the shades will automatically adjust to stay correctly positioned under their parent.

In some cases, converting all UX styles to custom CSS controls could result in lost styles due to data not being saved correctly inside the corresponding Bricks objects.

In previous releases, modifying the page.css file in Advanced CSS while the active breakpoint was set to mobile-first would incorrectly place the code under the desktop view. Now, Advanced CSS intelligently detects whether you’re using a mobile-first approach and ensures your CSS is placed in the correct section!

Recent changes in the latest Bricks release may cause control values to display incorrectly (shown as empty) within the builder when the ‘Focus on First Class’ tweak is enabled.

The Rich Text wasn’t easily movable with keyboard shortcuts due to the autofocus being applied on the tinyMCE editor.

There was a conflict between the CodeMirror instance of Bricksforge and the right keyboard shortcuts of AT: typing inside the editor would wrongly create new elements in the structure.

Complex dynamic tags from dynamicooo could be wrongly parsed as a clamp function when the “Autoformat” tweak is enabled.

In scenarios where you switch to elements with locked classes only, the element panel may incorrectly auto-expand in sections where it shouldn’t, leading to a poor user experience.

In scenarios where you switch to elements with locked classes only, SuperPowerCSS could fail to mount correctly and a textarea field would show up instead of the CodeMirror instance.

In some cases, editing a global class using SuperPowerCSS could result in unsaved code due to a conflict with other AT functions.

Adding a global query loop without a category would return an AJAX error in the console. This shouldn’t happen anymore.

Previously, applying focus point settings to a global class while editing an image element would incorrectly apply the settings at the ID level. This issue has now been resolved.

Pressing the CMD+F shortcut while editing CSS code in SuperPowerCSS would incorrectly trigger the Quick Search function instead of the search dialog in the CodeMirror instance. This issue has now been fixed.

The calculation of the available arrow keys for moving an element within the contextual menu of the Structure Panel could previously be inaccurate. This function has now been refined to provide more precise results.

Safari users might have experienced issues when selecting a CSS variable from the CSS Variable Suggestion dropdown in AT, where the newly inserted value would be overridden by the old value as soon as a window event (such as click, blur, mousemove, etc.) occurred. The suggestion dropdown has now been redesigned to prevent this from happening.

With this release, the new Nestable dark mode button and toggles have been introduced, and the old elements are now officially considered Legacy. There are no plans to remove them in the future to maintain backward compatibility. However, it is strongly recommended to use the new nestable elements moving forward.

Hiding an element on both the frontend and the builder would paint the corresponding structure item in orange rather than red.

Advanced CSS and SuperPowerCSS now both support the suggestion and autocompletion of the SASS variables defined in the Advanced CSS partials.

Some unnecessary data were being processed and saved on the server level when saving the Advanced CSS settings.

When a stylesheet was previously disabled, toggling the status back would not add the CSS back inside the builder.

Some ACSS recipes using single quotes (like content: ”) would expand inside the SuperPowerCSS as HTML entities code instead of keeping the single quotes untouched, and ultimately breaking the CSS.

When ACSS was active, saving the Advanced CSS settings would generate an internal error inside the AJAX call (Invalid Nonce) leading the settings to result unsaved.

Elements that were set to be hidden inside the builder could resulted hidden inside the structure panel as well due to some CSS conflict with other 3rd party plugins.

Adding a new custom breakpoint could generate a JS error when activating the grid guide tweak.

In some rare cases, the unwrap/wrap buttons inside Advanced Text Wrapper were breaking by 3rd party custom css.

If you’re a Firefox developer edition, the SuperPowerCSS control wasn’t extending correctly to the bottom the of the window when the tweak “Hide inactive Style accordion panel” was active.

When an element is set to “hidden inside the builder”, the corresponding item inside the structure panel has now an orange (warning) color/background while the elements set as “removed on frontend” keep the previous red color.

In Advanced CSS, there was a potential error that could lead to erase the stylesheet content when toggling the status toggle to off.

In Advanced CSS, there was a potential error that could lead to replace the partial content with a “false” value when toggling the status toggle to off.

When compiling a partial file, the values from other partials weren’t shared with the active partial and thus the variables defined in other files were compiled as undefined.

In the sidebar view if Advanced CSS, the status toggle took too much place which leaded to an overflowed tooltip when hovered.

When resizing the left element panel – either by auto or manual collapse – the lineCount inside SuperPowerCSS was miscalculated which lead to errors with cursor position and code selection.

When inserting SASS code in SuperPowerCSS while a breakpoint was active,changing element or refreshing the builder would lead the editor to show the compiled code instead of the original SASS code.

When moving/resizing an item in a grid set with 0px gap could generate render & calculation issues. To solve this problem, a minimum default 6px gap has been set internally so the items won’t interact when the drag functions are fired.

Changing the row/col value of an item using the inputs inside the child settings would cause the settings to be unsaved, and the resulted custom CSS wouldn’t be generated correctly.

ACSS adds a slight background effect to the transparent colors. This background effect was hidden when AT was activated. This solution was used to fix an issue the Plaster plugin when AT was released, but is no longer needed.

The error notification was barely readable inside the Grid Builder due to a contrast issue between the text and the background-color.

In sidebar view, if the buttons contained too much text compared to the available space, it would create an overflow effect. This affected all the AT modals.

There is now a small dots next to the stylesheets/recipes that include unsaved changes. This dot is removed as soon as you correctly save the Advanced CSS settings.

SuperPowerCSS has now a new keyboard shortcut to active the BeautifyCSS function: CMD + b for Mac users – CTRL + b for WIN users.

Some heavy functions on load have been revamped and should decrease the calculation time on builder load.

SuperPowerCSS saves the custom css once the editor gets blurred in order to optimize the builder performance. Saving the changes without blurring the editor by using the CMD/CTRL + s shortcut would then skip the generated css code in the saving process. Now, SuperPowerCSS checks if the save shortcut is hit, and if it is, save the code inside the editor to the builder objects before running the AJAX call.

AT functions on load would modify builder objects even if it was not necessary – leading the save button to show changes constantly. These initial functions have been revamped and should show changes on the save button if they are strictly necessary to apply.

Opening the SuperPowerCSS contextual menu while the left element panel is really small was stripping part of the menu on the left. Now the contextual menu is contained inside the window and overflow on the right if not enough space is available inside the left panel.

The Plain class shortcut inside the Class Contextual Menu generated a JS error (missing parenthesis in the code) and wouldn’t open the corresponding modal correctly.

targeting the “section” selector in your custom CSS also target the grid guide container that sits on top of the preview window. Adding properties such as background, border or outline would then conflict with the entire preview window. These properties have been set as !important on the grid guide container so they aren’t affect by potential custom css.

In the last release, there was a bug that prevented to add new recipes if no custom recipes/stylesheet was previously added to the Advanced CSS settings.

The fields Rating & Max Rating were showing the variable icon while these fields aren’t related to CSS but expect a float/integer value.

You can now add/edit/delete/rename your own recipes in Advanced CSS.

What is a recipe?

The concept has been introduced by ACSS and it represents a CSS snippet that you can easily inject into your elements inside the custom CSS control – it will replace the shortcut with the actual code associated to the recipe. This allows you to avoid typing the same CSS snippet over and over when building and quickly add custom code to your element.

Once the recipe is injected in your custom css, the code is independent from the original recipe: you can edit it without modifying the original code.

See it as a shortcut to inject a bunch of CSS without having to type it manually.

Recipes created by ACSS are now fully integrated inside Advanced CSS if you have ACSS installed and running.

You can add recipes programmatically using the following PHP filter:

// Add your custom recipe to Advanced CSS
add_filter('at/advanced_css/recipes', function($recipes){
	
	$recipes['my-own-recipe'] = "body{\n\tbackground: blue;\n}";
	
	return $recipes;
});

Community recipes are snippet of CSS codes shared by the community users and available for everyone.

In the 2.9 release, SCSS files inside Advanced CSS weren’t compatible with the property/variable suggestion dropdown. It’s now fully working with all type of files.

In 2.9 release, the SCSS files has the beautify CSS & the Variabilize CSS functions disabled. Both functions are now available for all types of files in Advanced CSS.

There is a new option in the bottom-left of the Advanced CSS modal that allows you to recompile and regenerate all the CSS files created by AT.

In the 2.9 release, the sass code included inside global classes and inside the elements of the page weren’t automatically recompiled if you changed some partial/mixin value. Now it will recompile everything as soon as you save your Advanced CSS settings.

There could potentially be issues if your browser timezone would differ from your server timezone regarding the automatic recompile of your partials/mixins on other pages.

While the previous release fixed the autogenerated slashes inside the builder, there were still some issues inside the generated CSS files by AT.

All the recipes delivered by ACSS are now fully integrated with SuperPowerCSS. Just type “@” + the name of the recipe to select the recipe you are after. Hit the TAB key to deploy the code inside the editor.

There could be scenario’s where the mixins/partials could look “cached” and not updated with the last edits you made. Now the styles should always reflect your settings in Advanced CSS.

Same as the live checker inside Advanced CSS, SuperPowerCSS gets a live error checker when compiling SASS code so you’re always aware of potential errors.

There was an annoying bug in SuperPowerCSS when loading big amount of CSS code: part of it would be hidden until the editor got manually focused. This should be fixed now.

Global classes listed inside the search results are now accessible with the keyboard by hitting the TAB key to navigate the buttons, and “Enter” for selecting the global class you are after.

Some JS error left inside the plain classes function would cause the editor autofocus to stop working correctly.

In the last releases, the Dynamic Data modal suffered from some performance issues when hovering the dynamic tags. This issue should now be solved.

Two new utility classes are introduced in this releases:

• .brxc-reversed-colors: assigning this class to any element of your structure will revert the color scheme (light if you are in dark mode, dark if you are in light mode)
• .brxc-initial-colors: assigning this class to any element of your structure will revert the color scheme to the initial state (light if you are in light mode, dark if you are in dark mode)

The new “Trash” feature for global classes introduced by Bricks in 1.11 is now fully supported in all AT functions that remove global classes.

In case the WPCodeBox plugin was installed with a different pathname than the original one, the integration with Advanced CSS wouldn’t mount correctly.

The the Structure Panel was undocked, the corresponding contextual menu had not enough z-index to show properly.

While clicking on the advanced features of SuperPowerCSS (like beautify, variabilize, convert UX, etc…) could appear correct inside the editor, it was not correctly saved in the database and the changes would get lost if you didn’t type anything more in the editor to trigger the save function. That should be solved.

ACF PRO is now up-to-date with the security fixes released recently.

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.