Extending Kirby Blocks Preview for Structure Fields

Kirby 3 Solved ✅
,
1

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

2

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).

3

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” } ] },

5

Hi,

i had the same problems.
You have to use lower cases slide.slidetext.
And the images are in an array image[0].

KR

1 Like
6

Ok i made some progress which works for me at the Moment:
A key inside v-for is not required to display structure element content.

The tip from peterp was very helpful so thanks!

Here is how i can display Text and Images from structure fields now:

<div v-for="slide in content.slides"> {{slide.slidetext}}  <img :src="slide.slideimage[0].url"> </div>
7

There’s a Vue.js devtools Extension for Chrome and Firefox, if that helps.
PS: Thanks for posting Your solution. I think I’ve now read evey single article in the docs but still having a hard time to understand how custom panel plugins work :confused: