Hi all,
I have a question about custom blocks with it’s own preview for the panel. My setup uses a build process just like the pluginkit to make use of single file components. As a test I’ve added the below custom block and registered it in a plugin. Now inside the builder field I can add the custom block and add it’s data successfully. The preview field also works as expected.
However when I have the developer process running and I save the component file I’m working on, the panel throws this warning:
Cannot read property 'cover' of undefined
Once I refresh the page the custom block is rendered correctly again. I’m sure I’m missing something simple here…
Blueprint:
name: Test
icon: image
fields:
cover:
type: files
max: 1
multiple: false
text:
type: text
test.vue
<template>
<k-block-figure>
<template v-if="src">
<div class="k-block-type-image-overlay">
<input
type="text"
:placeholder="placeholder"
:value="content.text"
@input="update({ text: $event.target.value })"
/>
</div>
</template>
<template v-if="src">
<img
:src="src"
class="k-block-type-image-auto"
>
</template>
</k-block-figure>
</template>
<script>
export default {
computed: {
src() {
if (this.content.cover[0] && this.content.cover[0].url) {
return this.content.cover[0].url;
}
return false;
},
placeholder() {
return "Make this a Heading...";
}
}
}
</script>
Thanks,
Flo