Show nested blocks in layout field in Panel

Kirby 3 Solved ✅
,
1

Hi everyone! :wave:

I am building a Kirby plugin, working like the Gridder from laytheme.com:
→ 12-columns grid to place “group of blocks” freely on this 12-cols grid for complex web layouts.

I already have my proof of concept (vanilla JS + HTML structure), and I am getting into Kirby custom block plugin and Vue components.

My (simplified) blueprint of the custom block is:

name: Layout Grid
icon: grid
fields:
  layoutgridstructure:
    type: structure
    fields:
      layoutgridblocks:
        type: blocks

But I can’t find how to render these editable layoutgridblocks blocks (looping layoutgridstructure ) in the Panel view with Vue…

I tried some dirty things with undocumented <k-block-layout>, <k-block>,<k-structure-field> but nothing convicing yet…

<div v-for="structure in layoutgridstructure">
  <k-blocks
    name="structure.layoutgridblocks"
    :value="structure.layoutgridblocks"
    :endpoints="???"
    :fieldsets="???"
    group="layout"
  />
</div>

The real problem here is to understand what endpoints and fieldsets are for (no documentation found), and how to get them/pass them to <k-blocks>

Any idea?

2

If you define them as props, they are automatically available to be passed to the component.

1 Like
3

Thanks :slight_smile: How are these two Object formatted? Is there any example somewhere?

4

No, I couldn’t find anything. I think your best bet is to inspect the object in your browser console.

1 Like
5

Thanks, I will try to compile Kirby with some additional console.log() everywhere then :sweat_smile:

I will keep this topic updated if I found something!

2 Likes