New Block for Layout. Howto render the preview in the panel

Kirby 3 Solved ✅
1

i created a new block for my layout. the blueprint and the output is working.

now i want to render the image width with the floating for the text in the panel to visualize the editor the wysiyg-effect.

in the block.yml blueprint i have to configure the preview?
how it works? i need some tipps.

2

Check out the docs:

There are also other recipes for blocks, check the cookbook if you have something more complex.

3

its not that complex blockelement. i want to float a text around the image.

in the »index.js« in /plugins/myblockelement/width66imagetext

panel.plugin("myblockelement/width66imagetext", {
  blocks: {
    width66imagetext: {
      template: `

          <img
            v-if="content.image"
            :src="content.image"
          >

        
        <div class="block-text-wrapper">
          <div class="k-block-type-width66imagetext-text" v-html="content.text"></div>
        </div>

      
      `
    }
  }
});

i get no img-src url in the img-tag. or a rendered kirby-textarea.
where is my mistake? misunderstood in the vue.js?

4

Don’t use numbers in the preview name. Also, you need to pass the image URL, see the examples, not the content.image to the image src attribute.

5

unfortunately I can’t get any further.
I get an error in the panel:

undefined is not an object (evaluating ‘Object.keys(this.fields)’)

I don’t understand this js vue procedure. is there perhaps a simpler workaround via plugin?

panel.plugin("cookbook/block-factory", {
  blocks: {
    textfloatsimage: {
      computed: {
        image() {
          return this.content.image[0] || {};
        },
        heading() {
          return this.field("heading");
        },
        text() {
          return this.field("text");
        }, 
      },
      template: `
        <div @dblclick="open">
                    
          <k-writer
            ref="text"
            :inline="true"
            :value="content.text"
            :placeholder="text.placeholder"
            @input="update({ text: $event })"
          />
          
          
            <figure class="k-block-type-textfloatsimage-image">
              <img
                v-if="image.url"
                :src="image.url"
              >
            </figure>
            
        </div>
      `
    },
  }
});
6

The code looks ok to me. Is there any more information in your browser’s console?

Make sure that your plugin name is the same between index.php and index.js.

It might make sense if you post the rest of your block code, i.e. your index.php and the blueprint.

No, this is how blocks previews are created. The only thing you can do to make it easier is to not have a preview, after all, it’s not required.

7

there was an spelling error. sorry. now its working fine.
thanks a lot for the help.

<?php
Kirby::plugin('cookbook/block-factory', [
  'blueprints' => [
    'blocks/textfloatsimage' => __DIR__ . '/blueprints/blocks/textfloatsimage.yml',
  ],
  'snippets' => [
    'blocks/textfloatsimage' => __DIR__ . '/snippets/blocks/textfloatsimage.php',
  ]
]);