Style (and other) data binding bugginess

Bugs
1

Creating/editing data bindings for CSS styles is the most frustrating aspect of using the Visual Editor. The main issues I’ve isolated are (I used style.borderStyle for my testing, but you should be able to confirm with any style property):

  1. A binding created in the Styles tab for a CSS property is not in sync with the equivalent binding in the Data tab.
  2. style.____ bindings in the data tab sometimes have no effect–but sometimes they do. It’s unpredictable, which is worse than being broken.
  3. There are circumstances under which you can’t delete your bindings inside of JSON view, which as a dev is disturbing, since JSON view is supposed to be my failsafe against any bugginess. Not being able to edit the content JSON by hand when all else fails means that I’m not in control of my work. I should always be able to rely on JSON view as a dev.
  4. Sometimes bindings that appear to have been deleted inside the Visual Editor UI are actually still present inside of the content JSON. So if you then recreate a binding, you end up getting a mystery “ghost” binding from the past.
  5. Sometimes editing a style data binding in the Data tab will crash the Visual Editor. I tried to replicate this but wasn’t able to.
  6. Editing a style data binding inside the Data tab triggers the creation of a data binding that’s prefixed with meta.bindingActions. If you edit that data binding, then another is triggered with the prefix meta.bindingActions.meta.bindingActions, and so on infinitely. So editing style.borderStyle generates meta.bindingActions.style.borderStyle; editing that in turn generates meta.bindingActions.meta.bindingActions.style.borderStyle, and so on. These additional generated bindings don’t seem to have any effect on the rendered block, but they’re confusing and clutter up the data tab.
  7. Creating a style data binding from within the Data tab doesn’t always work, you have to go through the Styles tab for it to be reliable (with the above caveats).

These issues aren’t limited to just style data bindings, they appear to happen with various other properties, as well. I don’t have the time to do a systematic review of exactly which ones are problematic, but the styles one is by far the most annoying since it’s so frequently used.

Builder content link

Builder public api key
662907a12adb4e7db3ed47d358170dde

Detailed steps to reproduce the bug

  1. Create a block.
  2. Create a data binding for a style inside of the Styles tab.
  3. Compare your data binding inside the Styles tab with the same data binding inside of the Data tab.

Screenshots or video link

Code stack you are integrating Builder with
Next.js

Reproducible code example
N/A

2

Hi @ersin! I hope you’re doing well.

Thank you for reaching out. We’re trying to replicate these issues on our end and will send the ticket to our Engineering team for further inspection.

We appreciate the feedback!

1 Like