For easier use inside Breakdance builder, Headspin UI provides small context menu which will populate fields inside Breakdance builder with CSS variables.

Breakdance Helper

To access helper context menu, you need to right click on Breakdance input field.

Empty context menu problem

Following problem will happen if you install Headspin and you go inside Breakdance and by doing right click on supported Breakdance field. This is because you haven’t saved yet anything in Headspin UI panel, and you need just to go to WordPress Admin > Headspin > click on Save button.

After saving by right clicking on supported field you should see CSS variable suggestions.

Color sync problems

Color sync works like password auto-fill. It needs to have some page opened in Breakdance to operate, user should also open global settings and have at least on color there (you could delete it after sync).

  1. Have both Breakdance and Headspin main dashboard opened in separate tabs
  2. Open global settings in Breakdance
  3. Check that you have one color in Breakdance Palette

NOTE: Breakdance builder and Headspin Copilot (app in dashboard) should be opened as tabs in the same browser.

How sync works:

  1. Open Headspin app,
  2. Open some page in Breakdance,
  3. Open Global settings in Breakdance
  4. Have at least one color under Global Settings > Colors > Palette
  5. Click run sync

It does work in fashion that there are two apps running (Headspin Copilot (main app, dashboard) and tiny helper inside Breakdance). They are doing communication in realtime 1-2 needed. That is why we need to have theme opened at the same time.

Step 3 – is needed so helper app could fill global settings

Step 4 – is needed for data compatibility check, so if Breakdance changes color data model it won’t run and make errors. We check that one color is like okey data looks as expected, so we could import colors without doing problems.