Edit blocks content in preview

I want to edit all my blocks in the preview (like the Text block already does). I know that it is possible to write custom previews that are also capable of editing the block’s content. But I struggled to get this working with more complex things like file uploads.
Is there an option to select which fields should be shown in the preview? Or maybe even the option to show all fields in the preview in the same way as they are shown in the block’s edit panel?

1 Like

The answer to all your question is “yes”, but at the same time it’s also “through custom block previews” as you kind of realized yourself: https://getkirby.com/docs/reference/plugins/extensions/blocks

But I am sure we could help if you present/ask some concrete questions where you are struggling with creating such a custom preview for your block and use case.

Okay, thanks for the reply! It might be a useful feature in the future to specify the fields with should be shown in the preview. I like the concept of the block drawer for more complicated blocks, but for simple blocks I would prefer something like this:

# my block
name: My Block
    type: toggle
    label: My Toggle

But for now I will create custom block previews for all the blocks I use. I got simple previews working like the button example in the docs. Now I would like to do the same with a simple image block. But I don’t get the endpoints working. I have tried this:

# my image block
name: image
    type: files
    max: 1
panel.plugin("your-project/image-block", {
  blocks: {
    image: {
      props: ['endpoints'],
      template: `
          @input="update({ image: $event.target.value })"

But if i try to upload something I get a No route found for path: "" and request method: "GET" Error.

@distantnative do you have any idea how I could accomplish a custom preview that also allows me to upload files like shown in the example above?

I just discovered this great plugin that does exactly what I want!