Extending Kirby Blocks Preview for Structure Fields

Hey there,
i just love the new integrated Blocks and layout options. I have been using the kirbyBuilder Plugin for a long time so i was very happy to see it becoming part of kirbys core. Anyhow: I have many custom written blocks which work fine in Kirby v3.5, except for the display in the Block Editor or Layout-Preview.

I found this tutorial on how to create a custom preview for your block: https://getkirby.com/docs/reference/plugins/extensions/blocks

Which is ok if your block has just single level fields. How can i achieve to display all content from the structure field in the Block-Preview? From the example-vue components i thought i just had to go for the v-for option:

panel.plugin(“kirby-fz/intro-block”, {
blocks: {
intro: <ul> <li v-for="slide in this.content.slides" :key:"slide.slideText"> {{ slide.slideText }} </li> </ul>
}
});

But it says: slides not defined in the panel. Here is the blueprint code for the structure field i want to display:

fields: 
      slides:
        label: Intro-Slides
        type: structure
        fields:
            slideText:
                label: Text
                type: markdown
            slideImage:
                label: Bild
                type: files
                multiple: false
                query: page.images
                layout: cards

Thanks and regards! Frank

It sounds like the issue is that you’re not taking into account the possibility of there not yet being any slides created.

Try adding v-if="content.slides" to the element wrapping your li (where you’re iterating through the slides).

good idea, but the result stays the same. Is there any chance to debug this vue-Stuff? Im pretty new to it…

To be fair: if i just print the whole content.slides i can see all the data from the coresponding text file:

panel.plugin(“kirby-fz/intro-block”, {
blocks: {
intro: <ul v-if=content.slides> <li> {{ content.slides }} </li> </ul>
}
});

[ { “slidetext”: “# Das wichtigste Projekt
deines Lebens:
Deine Gesundheit\n\n#### WILLKOMMEN BEIM #LÖWENRUDEL\n\n(link: praxis text: Unsere Praxis class: btn) (link: praxis text: Leistungen class: btn)”, “slideimage”: [ { “filename”: “intro1.jpg”, “dragText”: “(image: intro1.jpg)”, “icon”: { “type”: “file-image”, “ratio”: “3/2”, “back”: “pattern”, “color”: “#de935f”, “cover”: false, “url”: “http://192.168.178.24/physio-loewe/media/pages/home/066a338d26-1610525911/intro1.jpg”, “cards”: { “url”: “data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw”, “srcset”: “http://192.168.178.24/physio-loewe/media/pages/home/066a338d26-1610525911/intro1-352x.jpg 352w, http://192.168.178.24/physio-loewe/media/pages/home/066a338d26-1610525911/intro1-864x.jpg 864w, http://192.168.178.24/physio-loewe/media/pages/home/066a338d26-1610525911/intro1-1408x.jpg 1408w” }, “list”: { “url”: “data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw”, “srcset”: “http://192.168.178.24/physio-loewe/media/pages/home/066a338d26-1610525911/intro1-38x38.jpg 1x, http://192.168.178.24/physio-loewe/media/pages/home/066a338d26-1610525911/intro1-76x76.jpg 2x” } }, “id”: “home/intro1.jpg”, “image”: { “ratio”: “3/2”, “back”: “pattern”, “cover”: false, “url”: “http://192.168.178.24/physio-loewe/media/pages/home/066a338d26-1610525911/intro1.jpg”, “cards”: { “url”: “data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw”, “srcset”: “http://192.168.178.24/physio-loewe/media/pages/home/066a338d26-1610525911/intro1-352x.jpg 352w, http://192.168.178.24/physio-loewe/media/pages/home/066a338d26-1610525911/intro1-864x.jpg 864w, http://192.168.178.24/physio-loewe/media/pages/home/066a338d26-1610525911/intro1-1408x.jpg 1408w” }, “list”: { “url”: “data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw”, “srcset”: “http://192.168.178.24/physio-loewe/media/pages/home/066a338d26-1610525911/intro1-38x38.jpg 1x, http://192.168.178.24/physio-loewe/media/pages/home/066a338d26-1610525911/intro1-76x76.jpg 2x” } }, “info”: “”, “link”: “/pages/home/files/intro1.jpg”, “text”: “intro1.jpg”, “type”: “image”, “url”: “http://192.168.178.24/physio-loewe/media/pages/home/066a338d26-1610525911/intro1.jpg”, “uuid”: “intro1.jpg” } ] },