Automatic CSS is, simply put, the finest CSS framework for WordPress page-building. It has been a central part of my workflow for the past year, and honestly, I can’t imagine building a website without it. In this post, I’ll share a recent exploration I did in Figma, focusing on improving a part of the workflow that I believe is necessary.
The Problem: Version History in ACSS
When working with the Automatic CSS framework, it’s common to follow design directions that significantly impact the overall design. Sometimes, you just want to experiment and explore a radically different approach. It’s not unusual to need to revert to a previous version of the framework configuration. However, there is currently no way to maintain a “history” of such versions and easily revert to them.
Current Context
The entire framework configuration is currently stored in the ACSS plugin settings within the WordPress dashboard. All these options are compiled into a long string inside a text area.
Any changes made to the ACSS settings in the Editor are reflected in this text area.
A Common Scenario
IIn the Bricks editor, I often experiment with different design configurations in ACSS. I change color palettes, adjust border radii, and even modify font families. All these changes drastically affect the entire design language of my project. After a few hours (or days), I might decide that these changes aren’t working, and I want to revert to my previous design configuration.
Sound familiar?
Given the current setup, to revert to a previous state, I would need to have proactively done the following before starting my experimentation:
- Exit the editor and go to the ACSS settings in the WordPress dashboard.
- Copy the contents of the text area in the framework settings.
- Paste them into a document and store it safely.
To revert, I’d then have to paste the saved text back into the text area and update the framework settings, bringing the configuration back to the desired state.
I’ve done this several times myself. But in the heat of the design process, this workflow isn’t intuitive and interrupts momentum. It also takes place in a “magic area” outside the editor, where most of the work happens.
I believe we need a more integrated experience—something that happens directly inside the editor and feels native to the framework.
Snapshots
A snapshot is a saved configuration of all ACSS settings. When I create a snapshot, all framework settings are saved (colors, typography, spacing, etc.). In my UI exploration, the goal was to allow users to create multiple snapshots and recall them as needed.
So, before beginning a new design direction in ACSS, I’d take a “snapshot” of my current framework settings. Then, at any point, I could revert to that snapshot or any other saved snapshots.
Snapshot creation and recall would happen within the editor, eliminating the need to leave and visit the WordPress dashboard.
Exploration
As a devoted UI geek, I opened Figma to explore how such a UI could be visualized. I experimented with mockups and prototypes, aiming to implement this feature without breaking consistency with the ACSS 3 dashboard UI while maintaining a smooth and intuitive flow.
Here’s a quick Loom video showcasing how the flow works in a Figma prototype.
Snapshots Panel
I added the snapshots panel to the ACSS floating dashboard. Since I don’t expect it to be used frequently, it doesn’t need to be in a prominent position. In my mockup, I placed it at the very bottom of the list.
When a user clicks on it, they’ll enter the snapshots area.
Snapshots Area
This area is dedicated to three key functions:
1. Saving a New Snapshot: This allows users to save a snapshot of the current framework settings. The user can name the snapshot and click the save button. The snapshot then appears in the list below.
2. Viewing Saved Snapshots: Here, users can access previously saved snapshots and perform actions such as renaming, loading (replacing current framework settings), exporting (in text format), or deleting snapshots.
3. Accessing Settings: I added a separate tab where users can access potentially relevant settings related to the snapshot functionality. I haven’t developed this area fully yet, but I imagine there could be some valuable options here.
The Magic Area Version
How would this concept translate to the magic area of the ACSS plugin settings in the WordPress Dashboard? The idea is quite similar. Below is a low-resolution mockup illustrating how it would work, offering the same functionality as the snapshots manager within the editor.
Wrap-up
The concept of creating and recalling framework snapshots is relatively simple, and much similar to Figma’s Version History. But it could really add an extra layer of efficiency in the ACSS workflow.
What do you think of this? Ping me on Twitter and share your thoughts!
Lastly, if you are not familiar with Automatic CSS, click this affiliate link to learn more and thank me for changing your future workflow. Thanks for your time!