In the screencast, @bastianallgeier says, there can be defined multiple blocks in the index.js. I try to setup the second block but it only appears rudimentary. When I call up the block editor in the panel, not even the correct name of the block is displayed. Did I miss a semicolon or something else? <k-code>{{ content }}</k-code> gives an empty black field with two brackets.
panel.plugin("tillcremer/kirby-index-theme-blocks", {
blocks: {
textblock: {
methods: {
editHeading(value) {
this.update({
heading: value
});
},
editToggle(value) {
this.update({
toggle: value
});
},
editText(value) {
this.update({
text: value
});
}
},
template: `
<section class="k-block k-block-type-textblock">
<k-grid variant="fields">
<k-box theme="empty" style="--width: 3/4">
<k-writer-input
name="writer"
:autofocus="true"
:placeholder= "field('heading').placeholder"
:value="content.heading"
@input="editHeading"
style="--width: 3/4"
/>
</k-box>
<k-box theme="empty" style="--width: 1/4">
<k-toggle-input
name="toggle"
:value="content.toggle"
@input="editToggle"
style="--width: 1/4"
/>
</k-box>
<k-box theme="empty" style="--width: 1/1">
<k-writer-input
name="writer"
:autofocus="true"
:placeholder="field('text').placeholder"
:value="content.text"
@input="editText"
/>
</k-box>
</k-grid>
</section>
`
},
tableblock: {
methods: {
editHeading(value) {
this.update({
heading: value
});
},
editToggle(value) {
this.update({
toggle: value
});
},
editTableField(value) {
this.update({
text: value
});
}
},
template: `
<section class="k-block k-block-type-tableblock">
<k-grid variant="fields">
<k-box theme="empty" style="--width: 3/4">
<k-writer-input
name="writer"
:autofocus="true"
:placeholder= "field('heading').placeholder"
:value="content.heading"
@input="editHeading"
style="--width: 3/4"
/>
</k-box>
<k-box theme="empty" style="--width: 1/4">
<k-toggle-input
name="toggle"
:value="content.toggle"
@input="editToggle"
style="--width: 1/4"
/>
</k-box>
</k-grid>
<!--
<div class="k-table">
<table>
<thead>
<tr>
<th class="k-table-index-column">#</th>
<th>Name</th>
<th>Email</th>
<th>URL</th>
<th>Date</th>
<th class="k-table-options-column"></th>
</tr>
</thead>
<k-draggable
:handle="true"
:options="{
fallbackClass: 'k-table-row-fallback',
ghostClass: 'k-table-row-ghost'
}"
element="tbody"
>
<tr v-for="i in 2" :key="i">
<td class="k-table-index-column" data-sortable="true">
<span class="k-table-index">{{ i }}</span>
<k-sort-handle />
</td>
<td>Kirby</td>
<td>mail@getkirby.com</td>
<td>https://getkirby.com</td>
<td>2023-09-25</td>
<td class="k-table-options-column">
<k-options-dropdown :options="options" />
</td>
</tr>
</k-draggable>
</table>
</div>
-->
</section>
`
}
}
});
<?php
Kirby::plugin('tillcremer/kirby-index-theme-blocks', [
'blueprints' => [
'blocks/textblock' => __DIR__ . '/blueprints/blocks/textblock.yml'
],
[
'blocks/tableblock' => __DIR__ . '/blueprints/blocks/tableblock.yml'
]
]);
name: Table Block with Heading
type: tableblock
icon: table
fields:
heading:
label: Heading
type: writer
inline: true
width: 3/4
required: true
placeholder: Heading
nodes: false
marks:
- italic
- underline
- strike
- sub
- sup
- clear
toggle:
label: false
type: toggle
text:
- hide
- show
default: true
width: 1/4
table:
label: Table
type: structure
fields:
date:
label: Year or Time Span
type: text
pattern: "[0-9]{4}|[0-9]{4}–[0-9]{4}"
translate: false
placeholder: "2020–2022"
width: 1/4
item:
label: Story
type: writer
nodes: false
marks:
- italic
- underline
- strike
- sub
- sup
- clear
width: 3/4
