July 20, 2023
we’ve got some exciting updates to share with you!
This release solves bugs appeared on the recent updates, and add some new features as well. Check them all below!
Review the CSS generated by Bricks for each Element and Classes
It can be handy to review which CSS styles are produced by Bricks on the frontend. The Style Overview function is now able to quickly list all the CSS declarations linked to an element as well as all the classes connected to that element.
Autoselect the first unlocked class
If you set a class to your element, chances are you want to style this class by default instead of the ID. This feature will ensure that the first unlocked class of the element gets automatically activated when browsing your elements.
Auto-close CSS Variable Brackets
If you're manually typing CSS variables inside the builder's inputs, you're potentially at risk of creating a styling mess if you forget to close a bracket. With this function enabled, AT will make sure that your CSS variable is correctly formatted.
Custom default settings for relevant elements
Ever wondered why Bricks set the default HTML tag of a basic text as a div instead of a paragraph? Or why does it enable automatic caption by default on all images? You can now override these settings in a few clicks!
Increase the builder’s inputs size to easily manage CSS variables and custom CSS functions
The text inputs inside the builder are relatively small and hardly consent your to have a clear overview of the variables and functions added to each field. With this feature enabled, the input size gets increased.
Reveal the “class icons” on hover and focus
If you're working on small devices and you're willing to add all the class functions and shortcuts, chances are you won't have enough room to see your class name anymore. With this feature enabled, the class icons will be visible on hover/focus only.
Z-index issue with the Tag Manager Dropdown
The Tag Manager dropdown was set with an insufficient z-index, causing the background to be slightly transparent and failing the trigger correct events on click.
“!important” suggestion created a double “!!” in Superpower CSS.
For some reason, selecting the "!important" value from the suggestion dropdown of the Superpower CSS was causing the exclamation mark to be duplicated.
CSS values suggestions have been improved in the Superpower CSS
The suggestion dropdown was sometimes triggered incorrectly. It also included the variable values while looking for a CSS property.
Missing closing bracket in some Core Framework variable values
In some cases, the Core variable added through the variable pickr was missing an ending bracket.
Pseudo indicator not working correctly for classes
The pseudo-element indicator wasn't correctly triggered when a class was activated in the left panel and was continuously referring to the ID styles.
Dropdown removed in the “overview” mode of the Tag Manager
We removed the dropdown from the "overview" mode of the Tag Manager so you can have a "safe" mode without triggering the dropdown while clicking on the elements, but still see the HTML tags in your structure panel. The "developer" mode is the only one that supports changing HTML tags from the structure panel.
Moving items in the structure panel was conflicting with the navigation shortcuts
There was a conflict between a Bricks shortcut (CTRL + SHIFT + ARROWS) to navigate the structure panel items and the AT shortcut (SHIFT + ARROWS) to move elements inside the structure panel. Now both shortcuts should work as expected.
Added padding-top to the “create element shortcuts” panel
In order to avoid clicking the save button while adding a section to your structure panel, a small gap between the topbar and the shortcut panel has been added.
CSS property suggestions now include “: ” when autocompleted inside the Superpower CSS
When you autocomplete a CSS property suggestion (by typing enter in the dropdown), it will automatically add a colon and a space at the end of the property, so you can quickly type your value without caring about formatting the CSS declaration.
Default Structure Panel Size
You are now able to set a default width for the Structure Panel in the theme settings.