This update includes the following features: class lock, dynamic classes, preserve advanced tabs state, disable composite elements, 3 new keyboard/menu shortcuts, and some bug fixes. So, lets get an overview of these cool new features and how to use them.
Class lock
How many times you found yourself editing the wrong class when it's attached to an element? Surely it happened too many times, so that's the reason why we introduced this feature, it allows you to lock individual classes and prevent these accidental edits.
This feature come disabled by default and need to be enabled from the Hydrogen Pack settings page under Oxygen menu:
To lock any class attached to an element, click on the lock icon from the classes list dropdown:
When you lock the current class, the editable selector will be changed to the element ID, and the class label will become red, you can easily unlock the class using the lock icon.
Now, if you select the locked class, you will get a notice that the selected class is locked and you get a list of editable selectors to choose from, and a button to unlock the current class.
NOTE:
Even when a class is locked, you can still edit it from the selectors panel, that's done by design, because it's considered as an explicit action and not accidental edit.
Dynamic classes
With this feature, you can assign CSS class dynamically to any element, for example: add class based on the post title, or from a custom field value. The most important use case is to apply different styles to elements from a repeater.
This option is disabled by default and need to be enabled from the Hydrogen Pack settings page:
When enabled, you will find a new Dynamic Classes section under the advanced styles tab.
To give a use case example, we used the product title from dynamic data with a static prefix "product" to assign unique classes for each of our product cards
We also checked sanitize data output checkbox to remove any spaces or invalid characters from the dynamic data output in the class attribute, the output of the above example will be something like this:
This give you the possibility to apply different styling for each of the repeated div elements, and there is a lot of use cases for this feature.
Preserve advanced tabs state
If you were editing spacing styles in the advanced tab, then you switched to a different element, the left sidebar will reset to the primary tab, and you have to click multiple times to get back to the same advanced tab.
With this feature, the tabs are locked and stay wherever you leave them unless you click the primary tab, saving you a lot of time. Because it's not suitable for everyone workflow, this feature is not enabled by default, and need to activated from the settings page.
Once enabled, you have no further steps to take, it works all time until you disable it again, we may introduce a button to enable/disable it from within the builder interface in the future based the feedback we will receive.
Disable composite elements
The reason why we added this option is that some users will not use these pre-made elements, and also each element load an icon from the oxygen library website, so they prefer to disable it and remove these elements icons from the elements' browser panel
When the above option is enabled, Hydrogen pack will prevent the load of the composite elements for the agency bundle licenses unless you explicitly enter a license in the composite elements library field.
New shortcuts
This update come with 3 new shortcuts
- Menu item and key shortcut to switch between regular text and rich text for text elements.
- Keyboard shortcut to create new rich text elements.
- Keyboard shortcut for the Apply Code button bellow the code editor.
The above menu item is enabled by default, but the shortcuts are not, so you can assign your keys combinations to activate them.
Bug fixes
- Span element disappear after pasting styles
- Typo in the minimum PHP version admin notice
Other changes
This release also include the latest freemius SDK update which improve on privacy and fix some issues related to the beta updates, you can learn more on the release notes from their GitHub releases page.
Want to try these new features?
To make it easy for you to decide on your purchase, you can start a 7-Day free trial for all our products and plans. and you also have 30 days to request a full refund if the product didn't meet your expectations.
