Hello Kirby Forum,
I’ve been trying to get into Kirby and wanted to build my first custom block, following the full blocks plugin tutorial from the documentation. On the panel side the preview of my button-block looks as expected but when I try to edit the block’s data through the panel’s context menu I can’t access the fields and get the error message Missing field setup. Using the html input field of the button-block to change the data doesn’t work as well.
my index.php looks like this:
<?php
Kirby::plugin('my-name/button-block', [
'blueprints' => [
'blocks/button' => __DIR__ . '/blueprints/blocks/button.yml'
],
'snippets' => [
'blocks/button' => __DIR__ . '/snippets/blocks/button.php'
]
]);
my button.yml looks like this:
name: Button
icon: bolt
fields:
link:
type: url
text:
type: text
and I’ve got the Button.vue file:
<template>
<input
type="text"
placeholder="Button text …"
:value="content.text"
@input="update({ text: $event.target.value })"
/>
</template>
<script>
export default {
computed: {
placeholder() {
return "Button text …";
}
}
}
</script>
<style scoped>
.k-block-type-button button {
border: 2px solid #000;
display: inline-flex;
border-radius: 3rem;
padding: .25rem 1.5rem;
cursor: pointer;
background-color: royalblue;
}
.k-block-type-button button:empty::after {
content: "Button text …";
color: var(--color-text-light);
}
.k-block-type-button button:focus {
outline: 0;
border-color: var(--color-focus);
}
</style>
My guess would be that for some reason the index.php doesn’t properly inject the button.yml and therefore the field. I tried to put the button-block field into the corresponding-page.yml which worked. As I want to build reusable blocks this doesn’t strike me as a good practice though.
What am I doing wrong here? Thanks in Advance.