Block Preview not working

The CMS Questions
1

I would like to create a custom block preview for my block “project-munich.php”.
I followed the steps from the docs and created a folder “project-munich” in my plugins folder and 3 files in it (index.css, index.js, index.php). For testing, I put in the expample code from the docs.

Now, the only thing which seems to work is the css as I changed the target to all divs to see, if the button border is added to the block preview – and it works.

But I think, the js and php file are not connected to it…
Is there anything wrong in my files ?
Thanks in advance! :slight_smile:

index.css:

.k-block-type-project-munich div {
    border: 2px solid #000;
    display: inline-flex;
    border-radius: 3rem;
    padding: .25rem 1.5rem;
    cursor: pointer;
}
.k-block-type-project-munich div:empty::after {
    content: "Button text …";
    color: var(--color-text-light);
}
.k-block-type-project-munich div:focus {
    outline: 0;
    border-color: var(--color-focus);
}

index.js:

panel.plugin("mywebsite/munich-project", {
    blocks: {
      artist: {
        template: `
            <input
            type="text"
            placeholder="Button text …"
            :value="content.text"
            @input="update({ text: $event.target.value })"
        />
        `
      }
    }
  });

index.php:

<?php

Kirby::plugin('mywebsite/project-munich', []);

Current block preview:

Screenshot 2021-12-01 at 12.08.46
Screenshot 2021-12-01 at 12.08.46988×358 11.3 KB

2

Could you post the blueprint of the block, please?

3

Sure!

name: Ausstellung München
icon: page

fields:
  online:
    type: toggle
    default: yes
    text: 
      - "nicht veröffentlicht"
      - "veröffentlicht"
  images:
    label: Bilder hinzufügen
    type: files
    multiple: true
    min: 1
    layout: cards
    size: tiny
    empty: field.blocks.gallery.images.empty
    uploads:
      template: blocks/image-1
    image:
      ratio: 1/1
  
  artist:
    label: Künstler
    type: textarea
    width: 1/1
    buttons: false

  exhibitionName:
    label: Ausstellungstitel
    type: textarea
    width: 1/1
    buttons: false
  from:
    label: Startdatum
    type: date
    width: 1/2
    default: today
    display: D.MM.YYYY
  to:
    label: Enddatum
    type: date
    width: 1/2
    default: today + 1day
    display: D.MM.YYYY
4

Is the block really called artist? Because you are trying to create a preview for a block called artist.

5

hmm, no – the block is called “project-munich.php”
Where do you see that the block name is “artist”? Its just a textarea field in my blueprint…

6

Here! The block name then is project-munich but I don’t think you can have a dash in the key in JS, so should become projectMunich, I guess.

7

oh yes you’re right, I saw on a different post that this is the syntax in the js for adding sections in the preview. I want the preview to display an image, the title and the date out of the block… is that even possible? :slight_smile:

8

Yes, of course, check out the block related cookbook recipes.

9

Thanks @moonwalk, for me as a beginner it was a bit confusing… I tried to recreate the example in the docs with the button block and now it works but the preview is just shown inside the block (image 1).

In the block overview where all blocks are listed, I cannot see the correct preview yet… (image 2)

How can I adjust this?
image 1 (when I adjust the block):

Screenshot 2021-12-02 at 11.18.18
Screenshot 2021-12-02 at 11.18.181504×112 2.68 KB

image 2 (when I leave the block editor):

Screenshot 2021-12-02 at 11.17.55
Screenshot 2021-12-02 at 11.17.55990×88 628 Bytes

plugins/button/index.js:

panel.plugin("mywebsite/button", {
  blocks: {
    button: `
    <button type="button" @click="open">
    {{ content.text }}
  </button>
    `
  }
});

index.php:

<?php

Kirby::plugin('mywebsite/button', []);

index.css:

.k-block-type-button button {
    border: 2px solid #000;
    display: inline-flex;
    border-radius: 3rem;
    padding: .25rem 1.5rem;
    cursor: pointer;
}
.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);
}

button.yml:

fields:
  blocks:
    type: blocks
    fieldsets:
      - heading
      - text
      button:
        name: Button
        icon: bolt
        fields:
          link:
            type: url
          text:
            type: text