How to use color field in block preview?

, ,
1

I’m struggling to output the value of a color field, in the panel preview of a block/plugin. It felt straightforward but I seem to not be able to output the value of the field.

Here is a simplified version of what I’m doing
My color field uses options and hsl format:

  backgroundColor:
    label: "Background color"
    type: color
    width: 1/3
    mode: options
    format: hsl
    options: 
      "hsl(21 23% 60%)": "Caramel"
      "hsl(94 2% 55%)": "Gray"
      "hsl(15 15% 36%)": "Brown"
      "hsl(305 7% 35%)": "Violet"

Don’t I just need to put {{ content.backgroundColor }} in the Vue part for it to be output???

I’ve tried several property names I could have missed in the docs (.options, .value etc) but nothing works and the block’s documentation does not specifie how I should get it.

My text field is accessed with {{ content.textField }} and it works.
I’ve built more complex things (nested blocks plugins with preview, etc) since I started with Kirby but it’s the first time I need to access a color field from the panel and I’m stuck. Thanks for any help or guidance.

2

Have you tried all in lowercase?

1 Like
3

Indeed I had not :person_facepalming:
Thanks for the help! Now I know.