1.2.3
We are excited to announce new version of our plugin Headspin Copilot. After lot of effort we think that we are on right track to address almost every pain point that our users faced until now. Version one brings huge feature called Token Manager (Token tab) which should give you unseen level of control related to tokens (CSS Variables) while you are making website.
Before digging further please take this note seriously: Take backup before updating production site. While this release had 8 rounds of internal testing, and two public Beta releases, there is always chance that you will find out some problem that we could miss and having backup is essential on production site.
This is absolute flagship feature of this release. We are bringing something like Figma variables inside WordPress and combining that with easy of use with our existing system which enables users to generate tokens in bulk with few clicks. While our bulk generator was powerful, it was like black box and sometimes users would not see what is going under the hood.
Token manager consists of:
And they work in fashion that tokens are small pieces which you organize in groups, and groups are organized in collection.
With this new feature you will be able to monitor every single value which our system generates, you will have option to modify value and manually tune certain values, or extend our system. All this you will see under Headspin collection.
Besides Headspin collection, you can spot Breakdance collection. This collection controls how our system is mapped to Breakdance system.
In order to rename, change icon and delete collection you need to click edit button (1) which will open Editing collection modal where you will have option to perform these actions.
Each group comes with options:
Common values as Label, Variable, and value could be edited inline. In order to edit tokens you need to click on icon which will open modal with all options.
That will open modal with all options (label, variable, type, value, description):
Prior to version 1.1.0 we had black box code which enables us to connect our color system and typography. While the most of users like this because it makes handling dark/light modes easy as it can be, some of the users find that they need to have more control, or they want handle these values within Breakdance.
If you are seeking for more control, you will see all tokens and how they are mapped to Headspin system within Breakdance collection view. If needed here you could tweak values for each token, and colors will offer control for both dark and light theme.
Let’s say you want to handle all Breakdance global colors within Breakdance global settings panel. You need just click on trash icon here to delete global colors group and that will do magic. Keep in mind that by doing this, these colors won’t be connected to Headspin system and you are losing ability to have one click dark/light mode because of technical limitations of how CSS operates.
Let’s say you want to handle all Breakdance font-sizes also within Breakdance global settings panel. In order to achieve this, you will need to delete font-sizes group withing Breakdance collection. Keep in mind that by doing this, font-sizes won’t be fluid anymore by default. Headspin tokens/variables will still be fluid, but they are disconnected from Breakdance global styles.
Some users wanted more control over our existing system. We have changed architecture in order to enable for control. In previous version our theme generators were connected to generate CSS code. We have added additional layer as system token collection called Headspin and exposed these value. By default they are linked to theme generator, but each token could be unlinked and value could be controlled manually. Also if you need custom tokens, you could add them within groups and they will be
When token is blue inside Headspin collection, it means that token is linked to our bulk generators. Linked token value will change depending on Theme tab configuration.
If you want to modify particular value of some system token, you will need to unlink that token and enter desired value. You can see at image below, unlinked token which is not blue anymore and value is manually set.
This token will not respond to bulk settings changes and will have static value that you have set. If you want it to link again you need to click on button linked (2) and it will be linked and blue again.
If you find limited our default number of tokens, you could add new token and set manually value for that token. These tokens will be shown in context menu also.
In order to extend, you will need to click Add new token, and new token will be created which you can tweak further.
We have added Notification center. It will push notifications about potential problem with your configuration. For example many users had incorrect site url which resulted that our CSS file won’t be loaded. To give user clue about this and 10 more things that we check now we have created this feature. We are trying to reduce support for these small things, while giving clear self-repair guides to users how to fix issues
Beside notification center, we have added toast notification which will give feedback about smaller things when using our app like when you copy color and perform actions as such. This is more about less critical notification which will give nice feedback to our users about certain in-app actions.
While we wanted to address all pain points that our users are facing and that they have reported, we needed to leave it simple for every user that was happy with simple controls.
Version 1.1 should not make whole workflow more complex, it will be 100% easy at it was as you don’t need to tweak defaults within this panel. But if you find that you need more granular option, now you will have everything that we could provide from granularity standpoint.
This update required us to rewrite many moving things within system. For example our theme generators were generating CSS code, now we have added Token manager that sits between generator and final CSS output so we needed to write new logic that goes like Theme generator > Token manager > CSS.
Also our live reload module, needed update as now we are giving more options and old model for reloading could make inaccurate reloads so we needed to update that also.
And finally our context menu needed update because now we are supporting extending our system tokens to any number.
While needing to do all of this we wanted to make hassle free way for user to update, old system value is now stored and will be active until you hit Save, after you Save new system should generate new configuration which should be compatible with old system so it should not break any site that is made with older version. So updating should require zero migration effort from user side.
You need just go inside Headspin Copilot dashboard and you will see new interface, after first save you are migrated to new system.
While it should be painless to upgrade from older version to v1.1.0 you should take backup before doing upgrade, also purge server/plugin/browser cache if you are using so you could check if everything looks correct.
While there were extensive testing due to many changes from our side, there is always potential of slipping something. If you face any issue, revert backup and report problem to us.
