No inline editing in custom block with "preview: field"?

Kirby 4 Solved ✔️
1

Hello,
according to the documentation when adding preview: field to a custom block it should show the defined fields and allow for inline editing, without opening the drawer. When I do it, it previews the fields, but they are greyed out and to edit them, the drawer still opens. I’d really like to be able to edit the block fields inline, without opening the drawer.
Am I doing something wrong, or are the docs wrong?
This is my code for the block:

- type: bargraph
  name: Bar Graph
  preview: fields
  label: "{{ heading }}"
  fields:
    heading:
      type: textarea
      buttons: false
      label: Heading
    color:
      type: select
      label: Color
      options:
        full: Full colors
        muted: Muted colors
    parts:
      type: structure
      label: parts
      fields:
        title:
          type: textarea
          buttons: false
          label: Title
        percentage:
          type: number
          step: 10
          min: 10
          max: 100
        color:
          type: select
          label: Color
          options:
            light: Light grey
            middle: Middle grey
            dark: Dark grey
            green: Highlight green

and this is how it looks in the panel:

Screenshot 2024-08-15 at 14.49.51
Screenshot 2024-08-15 at 14.49.511752×964 20.8 KB

2

You have to set the wysiwyg property:

              - type: bargraph
                name: Bar Graph
                preview: fields
                wysiwyg: true

A structure field will still open in a drawer.

1 Like
3

Thank you @texnixe ! Maybe that would be worth mentioning in the documentation, too.

4

It is in the docs example: Blocks | Kirby CMS

5

True, it is in the example, but it is nowhere mentioned as a requirement to make preview: fields behave as described. neither here nor here.

I could however find it in the reference: Block blueprint | Kirby CMS where the behavior is clearly explained. But I think it’s not practical that after consulting one or both of those two links, one also needs to scour through the reference.

Furthermore, although this is a slightly different issue, I would even argue that the parameter wysiwyg is ill-named: “what-you-see-is-what-you-get” would imply an editable preview, while all you get is editable fields, without actually seeing what you get. So, at least to me, it is not at all intuitive that this needs to be specified to allow for inline editing of the fields, at least when reading through the two examples from the docs.