How to get nested blocks working in the panel

Hi there,

I want to create a custom block that has nested blocks inside it. Here is a simplified blueprint:

name: My Custom Block
fields:
  headline:
    type: writer
    marks: 
      - bold
  content_blocks:
    type: blocks
    fieldsets:
      - heading
      - text
      - video

Now I want to create an editable preview for the panel. My problem is, that I don’t know how to properly use the <k-blocks> element. I want it to function exactly like the root blocks inside a page. Here is what I have so far:

panel.plugin('diverently/my-custom-block', {
    blocks: {
        content: {
            template: `
                <div>
                    <k-writer
                        :inline="true"
                        :marks="['bold']"
                        :placeholder="field('headline').placeholder"
                        :value="content.headline"
                        @input="update({ headline: $event })"
                    />
                    <div>
                        <div v-for="item in content.content_blocks">
                            // What goes here?
                        </div>
                    </div>
                </div>
            `
        }
    }
})

Can someone help me with this?

Best regards,
Robert

See Nested blocks | Kirby CMS

Yeah, thanks, I saw that one. I guess you’re talking about this part specifically:

template: `
  <div @dblclick="open" class="faq">
    <h2>{{ content.headline }}</h2>
    <div v-html="content.text"></div>
    <dl v-for="item in content.blocks">
      <dt v-html="item.content.question"></dt>
      <dd v-html="item.content.answer"></dt>
    </dl>
  </div>
`

But this has only one nested (custom) block type. In my case there will be different block types possible, some default and some custom ones. Also the example from that article isn’t editable inside the preview.

Is there a way to have nested blocks be editable? And is it possible to do that without having to rebuild the default previews?

I’m trying to do the same thing. Did you ever figure this out?

The only other related post I found online also doesn’t offer any solution.

Not tested, but maybe you can use the block component? Kirby Panel

Hi @gmpreussner, no unfortunately I never figured this out. Now the client has to use the form in the slide over panel. Maybe some day :slight_smile:

This works for me as a very basic outline, using the example blocks from above (without the updating part, that is. Maybe it helps as a starting point:

name: My Custom Block
preview: mycustomblock
wysiwyg: true
fields:
  headline:
    type: writer
    marks:
      - bold
  content_blocks:
    type: blocks
panel.plugin('my/customblock', {
    blocks: {
        mycustomblock: {
            template: `
                <div>
                    <k-writer
                        :inline="true"
                        :marks="['bold']"
                        :placeholder="field('headline').placeholder"                        
                        :value="content.headline"
                        @input="update({ headline: $event })"
                    />
                    <div>
                        <div v-for="item in content.content_blocks">
                        <k-block :type="item.type" :content="item.content"></k-block>
                        </div>
                    </div>
                </div>
            `
        }
    }
})