Changelog

Updated the ScssPHP library to version 1.11.1

All ACSS colors are now available in Cwicly’s color picker

• Smart spacing is applied when radios or checkboxes are set to be displayed in grid
• WS Form – Number field label inside with suffix / prefix
• CSS specificity bug with WSForm select dropdown error condition
• Bricks Form – checkboxes background color + position when text wraps

The context menu for Cwicly isn’t fully supported yet, but it was loading anyway. We disabled it for the time being, to avoid any confusion. It will be available again soon

• Fix: visual bug when window changes width
• Fix: BEM button not showing if bricks “duplicate” or “delete” buttons for the structure panel are not enabled

• The Color Scheme Switcher now works properly when loading Cwicly both in the Post editor and in the Site Editor
• The Color Scheme Switcher now loads correctly in the Bricks template area

• Fix: Bricks forms – class chaining issues
• Fix: Bricks – radio label colors being overwritten
• Fix: WSForms – upload button now has separate style settings
• Fix: WSForms – radio image wrong padding-inline-start
• Fix: WSForms – text editor style issue
• Fix: Fluent Forms – font inheritance issues
• Fix: Fluent Forms – invisible checkbox
• Fix: Fluent Forms – terms and Conditions checkbox and GDPR checkbox
• Fix: Fluent Forms – btn hover opacity
• Fix: add form button transition duration
• Fix: Smart spacing on all checkboxes and radios
• Fix: some defaults used –shade variables

The plugin will no longer cause a PHP fatal error when WordPress runs autoupdates and non-privileged users access the admin area

PHP Fatal error: You do not have sufficient permissions to save the plugin settings | Automatic.css (automaticcss.com)

Users no longer have to import a bunch of random scss files to hook into ACSS. You can now use a single @import rule via our new Doorway file.

@import 'plugins/automaticcss-plugin/assets/scss/helpers/doorway.scss';

This is for users using Functions and Mixins.

When setting header heights, there was no reference value for your breakpoints. This required users to flip back and forth between the breakpoints tab, additional styles tab, and front-end. Now the breakpoint values are referenced in the heading heights tab for greater convenience.

The plugin is now compatible with the S3 uploads plugin from Human Made

We’re proud to announce official support for Cwicly. We wholeheartedly feel that Cwicly is currently the 2nd best page builder for WordPress and the #1 page builder in the Gutenberg environment. The Cwicly team has our full support and we look forward to helping them grow in whatever way we can.

Currently Included

• Full framework support (classes & variables)
• Works in builder canvas and template areas
• Auto-Load utility classes
• Color Scheme support

Coming Soon

• Contextual menus
• Live style preview
• Variable expansion and validation in inputs
• Auto-BEM

We are considering this a “Release Candidate (RC)” integration. Cwicly users are encouraged to use this thoroughly and report any issues that arise so we can implement fixes immediately.

How to setup ACSS with Cwicly

Currently supports dual color scheme, but can be expanded in the future to support various other forms of color scheme, contrast scheme, etc.

• Optional support for prefers-color-scheme
• Granular control over which colors have alt-scheme
• Granular control over hue/sat/lightness of every alt shade
• Support for contextual colors.
• Back-end preview toggle for all supported page builders
• Front-end toggle component for Frames users
• Front-end toggle element for Bricks users (Frames not required)
• Color scheme API for users who want to create their own toggle
• Includes .color-scheme--main and .color-scheme--alt for manually activating or deactivating color scheme changes on individual elements or element groups.

More features and improvements to color scheme functionality will be made after the 3.0 rebuild is complete.

Read the color scheme documentation.

Auto-BEM revolutionizes the way users add custom classes in page builders. This feature automatically adds a custom class to a parent and all its children in two clicks using BEM methodology for proper organization and maintainability.

The class names are derived from the element name in the structure panel, but can quickly and easily be overridden during the class creation process.

That’s not all, though. Here’s a full list of features:

• Applies BEM classes to a parent and all its children in two clicks
• Double click will do the same thing while allowing you to skip the Auto-BEM panel
• Customize the class name of any child from the Auto-BEM panel
• Map class name changes to the structure panel if desired
• Auto-detection of existing BEM classes with various handling options
• Bulk rename BEM classes
• “Create New & Remove Old” – Creates new BEM classes and removes the old ones from elements (includes option to copy styles to the new classes)
• “Create New & Delete Old” – Creates new BEM classes and deletes the old ones from the database (includes option to copy styles to the new classes)
• “Create New & Keep Old” – Creates new BEM classes and leaves the old ones in place (includes option to copy styles to the new classes)

Official Auto-BEM documentation

We will continue to build out the functionality of this feature. The next version will likely include the ability to copy styles from the ID as well.

We’ve replaced the old “load deprecated styles” option with a new Deprecated tab, allowing users to choose precisely which deprecated styles they want to load.

This change is primarily for semantic accuracy and to clear up confusion regarding the “shade” palette and “shades” attached to other colors. The “Shade” palette is now deprecated (available via the Deprecated tab). Users should continue using the Shade palette on old sites but switch to using the Neutral palette from now on.

Buttons in ACSS have been wholly refactored for greater efficiency, customization, and theming capability.

• Button code output has been reduced by a staggering 73.5%.
• Every button property now uses locally scoped variables, allowing unprecedented granular style and theming capabilities.
• New option for setting the default focus color of buttons.
• New option for controlling button text decoration on hover.
• New option for setting button transition duration.

Read the button documentation for more details on changes to button variables. Some older button variables are now deprecated (they’ll still work, but stop using them).

Extra breakpoint support now extends to the --header-height variable and header-height features.

Extra breakpoint support now extends to scroll offset features.

.radius-- classes are replacing .rounded-- classes, which are now considered deprecated. This is another change for semantic accuracy and alignment with official naming conventions. All functionality remains the same.

Two new variables have been introduced that allow you to reference your website’s default list and list item spacing.

• --list-spacing
• --list-item-spacing

Similar to --content-width, the new --boxed-width variable allows users to reference the boxed width of their website when using boxed layout mode.

You can now exclude the default global link style from specific areas of your website (such as the header or footer). A new textarea permits users to define custom scenarios for exclusion (e.g. “header a“). Multiple scenarios can be inserted with comma separation.

We’ve introduced --link-underline-offset, which allows users to reference the offset value for their global link underline decoration. This makes it easy to design custom link styles while ensuring that your underline offset always matches your other links.

.text-larger was a utility we nearly instantly regretted after initially adding it. It’s not BEM compatible, and it creates a lot of unnecessary complications with builder ecosystem expansion. We have now officially deprecated .text-larger (though it remains accessible via the deprecated panel) and we recommend that users stop using it. If you’re in a situation where .text-larger might be used, consider using a BEM class or creating a custom text size for maximum scalability and maintainability.

This offset was put in place at the beginning of development years ago to account for Oxygen’s improper use of breakpoint values in the builder. This offset makes no functional sense for a CSS framework and makes life more difficult for non-Oxygen users, so we’ve removed it.

• Code output for spacing modules reduced by 400+ lines.
• Spacing now outputs variables instead of raw values.

• Reduced code output by 1950+ lines (73% reduction).

• Reduced .text-- class code output by 50% across all classes (size, color, etc.)

This mainly consists of back-end refactoring and organization for better maintainability and scalability.

When applying the “focus parent” technique to parent elements, you previously had to use a modifier class (.focus-parent--shadow or .focus-parent--outline). This is no longer required. You can now apply the class .focus-parent and ACSS will automatically apply either shadow or outline based on your global preferences.

Note: You can still use the modifier version if you need the style to be different from your global preference. Learn more about Focus Parent.

.focus-- classes now have the ability to change the focus color when paired with .focus-parent classes.

Learn more about Focus Parent.

We’ve replaced the deprecated “clip” property with “clip-path.”

We’ve reduced the overall code output for Oxygen and removed some overrides that are no longer necessary.

• Contextual color variables are now removed from the stylesheet when contextual colors are deactivated
• Contextual color partials are now removed from the stylesheet when contextual colors are deactivated

• Fix for unwanted inline padding
• Fix label position when using country flag in phone field (WS Form)
• Fix missing opacity value on inside-label-position (WS Form)
• Fix checkbox skipped with tab navigation (Bricks)
• Fix  for the “null” value on focus drop-shadow

Previously, upon updating ACSS, we only triggered the regeneration of the stylesheets if any of the settings had changed value. That would happen with major updates, that introduced or removed settings, but would otherwise miss. We now always regenerate the stylesheets so, even if no settings have changed, your stylesheets have been refreshed with the latest version of the framework.

As reported in https://community.automaticcss.com/c/general-discussion/version-2-6-1-is-live#comment_wrapper_23339597

As reported in https://community.automaticcss.com/c/bricks/right-click-can-t-see-grid-and-space-variables

As reported in https://community.automaticcss.com/c/bricks/selecting-a-class-in-contextual-menu-doesn-t-apply-it

As reported in https://community.automaticcss.com/c/oxygen/recent-change-broke-my-footer-layout

Sometimes a clickable card isn’t just for navigation – it could be used to fire a modal or other on-page events. In this case, you need to use a button instead of a link. Clickable parent did not previously work on button elements, but now it does.

Some items were listed twice in the context menus. The duplicates have been removed.

When working in a gradient panel in Bricks, the contextual panel wouldn’t open. This is now resolved.

• International phone field margin

• Section breaks don’t get styled

ACSS uses logic to ensure that button styling doesn’t get loaded multiple times for each active builder/block system (unless specific overrides are needed). This logic worked seamlessly with Generate Pro, but was breaking when the free version of Generate was used, resulting in a loss of button styling. This is now fixed.

Improvements to standardize how the editor displays the post title and default paragraphs.

This wasn’t replicable 100% of the time, but it’s been resolved now.

Shape dividers are physical divs and were being affected by automatic content spacing. We’ve made sure to exclude shape dividers from the spacing rules.

Auto text balancing doesn’t look so great in navigations. While you could override it easily, it’s best to just exclude navs in general, which we’ve done.

A little bit of tidying up on these mixins.