How do I get a custom block that uses blocks to preview in the Panel?

Kirby 4 Question❓
1

I’ve created a custom block (via a plugin). The custom block uses other blocks for its content. It works perfectly in that I can add content to the block that then renders in the front-end.

The challenge I’m having is getting the content to preview in the Panel as intended, rather than displaying the raw content. I’ve looked through the Docs and the Forum but I can’t seem to find anything that explains what I need to add to my plugin’s index.js file.

The index.js file currently looks like this…

panel.plugin("brandsistency/feature-block", {
  blocks: {
    feature: `
      <div @click="open">
        {{ content.text }}
      </div>
    `
  }
});

But the Panel preview looks like this…

image
image2153×1589 337 KB

Can anyone let me know what, if any, changes I can make to the index.js file to ‘correct’ the Panel preview? Thanks.

2

I think you missed template prop.

panel.plugin("brandsistency/feature-block", {
  blocks: {
    feature: {
      template: `
        <div @click="open">
          {{ content.text }}
        </div>
      `
    }
  }
});
3

Thanks, Ahmet, but it hasn’t solved the problem. I’ve added the template prop but the preview is still the raw content.

I’m wondering if there is something I need to add to {{ content.text }}. Some sort of equivalent to the ->toBlocks() method used in snippets and templates.

4

You need a custom API endpoint that returns the parsed content

5

Thanks, Sonja. That’s a bit beyond my skills, so I think I’ll have to revert to fields for input rather than blocks.

6

It’s not that complex, you can find examples of using API endpoints here: