SOLVED: Color Variables not applying in the builder

After updating to 1.9.8 last week. Inside of the builder only, all variables are not getting applied. They show up on the front end, but not the builder.

Before 1.9.8, I would go into the builder and all my styles were applying: colors, text, etc.

After I updated to 1.9.8, immediately all of my styles were gone, but only in the builder. They still showed on the front end. I had to reapply every single style, on every single element, on every single page to see it working right in the builder.

It also happens on any copy and paste.

What do you mean by “variable”? Where do you defined them ?

I cannot help you likely , but I want to check if my sites does the same :slight_smile:

Hi Justin,
Thanks so much for your report!

Unfortunately, I cannot reproduce the issue. Would you be so kind as to provide a screencast using https://jam.dev showing and explaining what’s happening and how to replicate the issue?

Best regards,
timmse

Its hard to replicate the issue because after the update, all my variables were still sitting in the inputs, but not applying in the builder. I have attached an example of an area of my site that I had not reselected the variables yet.

Jam: Jam

You will notice that that when I click on the element, my variable name is correctly sitting in the color selection, however the styles are not displaying until I reselect it. Nothing changed with the selected variable but it wont apply until I select it again.

Here is another example of it happening with copy and paste between my 2 sites. The variables are the exact same and you will see that nothing changes with the names.

Jam: Jam

When I copy from my one site, and paste into my other, even though the variables are both available and displaying in the selection, they wont apply until I re-select it.

Hmmm, strange!

Please send temporary login credentials, a link to a page where the issue still exists, and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase. Then we can inspect the styles in the builder and probably find the culprit.

I’ve got pretty much the same thing I think.

I am currently looking at removing a framework that provides colour palettes where the colours are defined using raw variables. I have on a test site, uninstalled the framework which removed all colour palettes and other settings and classes. However, the colours are still linked to the elements using them, like the background colour for the title in the accordion element. I have created my own colour palettes using variables I imported into the variable manager that have exactly the same variable names as those used by the framework. In the backend, the colour is shown correctly in the little background colour circle but is not being rendered in the canvas. The colour is being rendered on the front end. The only way to get the colour to render in the canvas is to re-pick the colour.

When I inspect the code on the front-end, the colour of the accordion title background is definitely using my variable value as the framework had the variable value defined via a hex code and mine is defined via HSL variables which are shown in the inspector.

Here’s a video showing the colours initially on the front-end, missing in the back-end canvas and then being picked again from new palettes but with the colours defined from the same variable names.

https://jam.dev/c/df77abdb-a3a4-4273-888c-9771933b4bfe

Hi Simon,
Thanks for the detailed explanation and the video, but unfortunately I still can’t reproduce the problem, or don’t know exactly how. Can you give me specific steps to reproduce it and are you sure it’s not a litespeed caching problem?

Hi Stefan,

OK, I can reproduce it like this:

  1. create a new variable in the theme file editor called for example --test-colour1 and set its value to red and save the change
  2. edit a page and add a new section
  3. Select the section in the structure panel and then go to the Styles tab, select Background and then click on the colour icon to bring up the colour picker
  4. create a new colour palette and then add the colour to it using the raw variable name. The colour is correctly applied in both the back-end and front-end
  5. Save the page changes
  6. Go to the theme file editor, delete the variable and save the change
  7. If you still have the page builder open, refresh the browser tab to pick up the variable deletion. The background colour disappears on the section and background colour icon but the variable name is still linked to the background colour.
  8. Delete the colour palette and save the page.

All of these steps so far are sort of mimicking me deleting the framework and the variable definitions and colour palettes being removed.

  1. In the page you have been editing, open the variable manager, click the import button and then create a new variable of the same name (e.g. --test-colour1) with a value of blue. Click save in the variable manager and then save the page. You will see that the section’s background colour is not updated in the canvas but is on the background colour icon. If you view the front-end the background colour is correctly displayed for the section.

Hope this gives some pointers.

I can’t see it being cache related as other variables that were left behind in fields after framework deletion, like padding variables work fine. It is only colours that seem to be affected. I do completely clear everything in the litespeed cache.

I have just sent over an email with all of the requested information. Should help showcase the exact bugs.

Hi guys,
Thanks so much for providing detailed steps and login credentials!

I can replicate the issue and added it to the bug tracker :+1:

2 Likes

Hi guys,

We’ve fixed this issue in Bricks 1.10, now available as a one-click update in your WordPress Dashboard.
You can see the full changelog here: Bricks 1.10 Changelog – Bricks

Please let us know if you are still experiencing issues.

Best regards,
M

1 Like

Hallelujah. Thank you for the update.

There is a pretty big new bug with 1.10. Elements disappear when moving them in the structure panel. Has this been reported?

Hi @websitestudios,

thank you for your report. The bug with disappearing elements in the structure panel should have been fixed in 1.10 (stable). Is it still happening to you? If yes, can you please update the following thread with steps to reproduce it - because I can’t reproduce this locally now with the latest version.

Thank you.

Best regards,
M

Yes this is happening frequently. However it has nothing to do with the code element. Its happening on heading and text elements.

If you are in the structure panel and try to reorder a heading or text by dragging it into a new position, once you release the element it disappears completely. I was able to solve this by copying and pasting it into the desired position but again if I try to drag and drop it disappears.

I have tried to record this multiple times but the minute I open up Jam to record it magically starts working. But its happening alot, I would think you can reproduce it by creating 2 sections put some container, blocks and divs in and try to drag text elements to and from.

I will try to reproduce it and capture it on my end.

Hi @websitestudios

I was able to reproduce the bug with disappearing elements in the latest Bricks version.

I you have any new/different way to replicate this bug, please post it in the following thread:

Thank you!

Best regards,
M