Is there a way to change the CSS for the individual displayed block options in visual editor via code?
Hi,
My name is Veronika Pilipenko and I am a Customer Engineer here at Builder.
Yes - you can customize the styles for individual blocks in the Builder Visual Editor using design tokens or by directly overriding CSS properties.
Here is a helpful doc about design tokens. As well as if you scroll down, you can find more information about overriding CSS properties (here).
If you end up going the design token route - you can define a set of design tokens and register them using builder’s register() function.
It would look something like this:
If you end up going the overriding CSS properties route - you can override specific CSS properties to customize how they will appear in the Builder Visual Editor. Since you’re setting these at a more granular level, you can control the exact styling options that will be available for each block.
Another thing that you can do is enable styleStrictMode to force the Visual Editor to use only your defined design tokens, which will restrict other styling options. The way to do that is just to add a
styleStrictMode: true
boolean in your Builder.register() function.
Let me know if you have any other questions,
Thank you!