Changelog

You can now control the default section block padding value, including the ability to remove top or bottom section padding by default (helpful in certain use cases).

When editing pages with the block editor, ACSS will no longer assume you want to use the block editor for full page building and will not change the block editor behavior.

If you do want to use the block editor for full page building, you can toggle this feature on under Options > Gutenberg.

Warning: This is still not perfect on sites that have plugins which use blocks on the block editor API prior to V3 because of an architectural issue in Gutenberg that we have to find a workaround for. Details on this issue here.

There were a few specificity issues related to auto color relationships when combined with color scheme. These have been worked out.

Some line height inputs supported calc() and some didn’t. Now they all do.

Using calc() for line-height within variables can be problematic if placed on generic elements like the body, so the framework has been improved to ensure that calculated line heights are applied accurately.

The default value for line height has been changed to a new, smarter approach to line height which adds a “leading” value in pixels to double the x-height value of the font.

This approach sets a sensible default line height for headings and text that scales appropriately across all sizes and responds more accurately to fluid responsive typography while still being easy for users to adjust.

Setting hover using the pseudo class :hover alone has always been problematic in the era of touch devices. This is because, on touch devices, hover styles “stick” on user interaction. This is undesirable for <button> elements and anchor links.

We’ve improved buttons and links to ensure they no longer suffer from this default browser interpretation of traditional :hover styles.

We’ve added a new category of recipes dedicated to writing Javascript in a builder environment. The first recipe added is @script; which generates script tags using the type=”module” syntax for creating a new scoping context (to prevent collisions), automatically deferring the script, and ensuring DOM is loaded before script execution.

You can now save changes from the search results screen.

One of the smart spacing instructions (for lists) was inappropriately touching certain children. That’s obviously not a good thing, so we’ve fixed it.

When we changed the default content width for new installs to 1366, we left the XL breakpoint at 1280. These now match out of the gate.

You can thank Bricks’ mild addiction to unnecessary specificity for that one.

Z-index is a bitch sometimes.

There are so many points of contention for creating a floating, pinnable panel across a wide range of builder environments and browsers. Things aren’t perfect, but they continue to improve.

Too technical to describe in a short paragraph. All-in-all, less code gets output now, buttons still work great, and there’s nothing to see here.

The ACSS dashboard now loads and instantly previews in Gutenberg. This also provides integration for Generate Blocks users.

The ACSS dashboard now loads and instantly previews in Breakdance.

Note: Breakdance doesn’t have a hook that allows us to load the dashboard in the Breakdance builder DOM. The only hook they offer is loading the dashboard in the builder’s preview/canvas DOM.

This isn’t an ideal experience, so we’ve reached out to the Breakdance team and it looks like they’ll add a new hook for us. Once that hook is released, we’ll move the dashboard into the full builder DOM.

Contextual menus and other builder enhancements will follow in a future release to complete full integration with Breakdance.

The ACSS dashboard now loads and instantly previews in Oxygen.

• The new, more powrful btn() mixin replaces the old btn-default() mixin. You can now apply styles from *any* of the 36 available button styles in ACSS to any selector with a single include statement. Read more about button mixins.

• We’ve added a new @btn recipe, perfect for creating custom buttons. Read more about button recipes.

• Activating the boxed layout feature in ACSS would not have previously affected sticky headers in Bricks because of their fixed position and 100% width. We’ve now added native/automatic support for fixed/sticky headers when boxed layouts are active.
• If you’ve manually created a sticky header, all you have to do is add the class “.sticky” to your header to gain boxed layout support.

Note: We’ll be extending support to other builders that have a sticky header option soon.

• Gutenberg looked odd in previous betas due to ACSS’s inability to load in Gutenberg fully. This should be resolved now.

Note: Certain users may still have issues due to the complexity and messiness of the Gutenberg environment. If you encounter any new issues, please start a thread in the ACSS support group.

• Button classes reverted to styling the wrapper that Gutenberg places on all links instead of the links themselves. This is now fixed.

In previous betas, the functionality for installing the new Tertiary color swatches and Tertiary color folder in Bricks’ color picker was missing. This is now fixed. However, since Bricks doesn’t have a proper hook for installing colors, you must deactivate and then reactivate ACSS for previously deactivated colors to be installed natively in the builder (once that color is turned on).

The dropdown was going behind the dashboard’s sticky header bar. This is now fixed.

• Turn off content offset with a custom header selector. Default is [data-header-sticky='0'], but you can create your own.
• Turn off content offset with body class selectors. Default is .content-offset--off but you can target any body classes you’d like.

It’s still not perfect, but it’s definitely better.

This started out as an internal insurance policy of sorts, but it’s redundant now so we’ve removed it.

Better late than never.

It wandered off. We found it and brought it back.

When you deleted the lightness value, the hue and saturation also disappeared. This isn’t the “automatic” we were going for, so we’ve patched it.

When you edited an HSL value, the adjacent values would change randomly. While this created a fun little game of “Can You Actually Dial That Color In?!,” we ultimately decided that it wasn’t suitable for an efficient, professional workflow.

You can now grab the header of the dashboard, drag it, and drop it anywhere on the canvas. It will float over existing content.

You can now grab the handle at the bottom of the dashboard and vertically resize the dashboard.

When you drag the dashboard to the left or right edge of the screen, it will detect the edge and dock itself to that side.

When the dashboard is docked to the left or right side of the screen, a pin icon will appear in the header. Clicking this pin will pin the dashboard in a “sidecar” position, giving you an unobstructed view of your canvas while ACSS is open.

The dashboard will remember the previous position you left it in and return to that position every time you open it.

The cheat sheet is back and it lives right within your ACSS dashboard! It’s sortable and searchable with direct links to documentation and icons for copying selectors.

In the next version it’ll also have a visual indicator for which utilities are disabled on the current install.

Note: We’re still working on documentation links, outliers, and general organization.

• Bricks-related improvements
• Live-preview related improvements

If the value of an input was “1rem” or similar, up/down keys would drop the unit and break the value.

In previous versions, a license could not be re-activated due to license obfuscation. We’ve implemented a workaround for this.