Panel preview of custom block broken after update from 3.5x to 3.6

The CMS Questions
1

I Updated my site from 3.5.8 to 3.6.3.1 recently. Since then the preview of some of my custom blocks is broken in the panel. Here’s the panel .js code:

textcolumns: {
        template: `
        <div :class="'k-block-type-box box-' + content.boxtype" @dblclick="open">
        <div v-if="content.textleft" v-html="content.textleft"></div>
        <div v-else>Zur Zeit kein Text</div>
        <div v-if="content.textright" v-html="content.textright"></div>
        <div v-else>Zur Zeit kein Text</div>
      `
      },

I followed the block-factory tutorial: https://getkirby.com/docs/cookbook/panel/block-collection

After the uptdate, all my custom blocks, which contains „text“-Elements shows the text in the blocl-editor view (click on pencil icon in block), but didn’t show it in the panel preview. The panel shows the default block-view with „no headline“, „no-subline“ content. The webpage view is correct so.

2

Could you please provide the yaml file and complete index.js for the custom block?

3

Here is the index.js file:


  panel.plugin("cookbook/block-factory", {
    blocks: {
      box: {
        template: `
          <div :class="'k-block-type-box box-' + content.boxtype" @dblclick="open">
              <div v-if="content.headline" v-html="content.headline"></div>
              <div v-else>No headline yet</div>
              <div v-if="content.subline" v-html="content.subline"></div>
              <div v-else>No subline yet</div>
            </div>
          </div>
        `
      },
      aboutme: {
        computed: {
          image() {
          return this.content.image[0] || {};
          }
          },
          template: `
            <div :class="'k-block-type-box box-' + content.boxtype" @dblclick="open">
            <div v-if="content.textleft" v-html="content.textleft"></div>
            <img height="450px" v-if="image.url" :src="image.url" />
            <div v-else>No content yet</div>
      `
      },
      cta: {
        template: `
        <div :class="'k-block-type-box box-' + content.boxtype" @dblclick="open">
          <div v-if="content.ctatext" v-html="content.ctatext"></div>
          <div v-if="content.ctalink" v-html="content.ctalink"></div>
          <div v-if="content.buttontext" v-html="content.buttontext"></div>
          <div v-else>No content yet</div>
      `
      },
      iframevideo: {
        template: `
        <div :class="'k-block-type-box box-' + content.boxtype" @dblclick="open">
          <div v-if="content.iframe" v-html="content.text"></div>
          <div v-if="content.Video" v-html="content.text"></div>
          <div v-else>No content yet</div>
      `
      },
      button: {
        template: `
        <div :class="'k-block-type-box box-' + content.boxtype" @dblclick="open">
        <div v-if="content.text" v-html="content.text"></div>
        <div v-else>No content yet</div>
      `
      },
      imgtext: {
        computed: {
          image() {
          return this.content.image[0] || {};
          }
          },
        template: `
        <div :class="'k-block-type-box box-' + content.boxtype" @dblclick="open">
        <img height="450px" v-if="image.url" :src="image.url" />
        <div v-if="content.text" v-html="content.text"></div>
        <div v-else>No content yet</div>
      `
      },

      textcolumns: {
        template: `
        <div :class="'k-block-type-box box-' + content.boxtype" @dblclick="open">
        <div v-if="content.textleft" v-html="content.textleft"></div>
        <div v-else>Zur Zeit kein Text</div>
        <div v-if="content.textright" v-html="content.textright"></div>
        <div v-else>Zur Zeit kein Text</div>
      `
      },

      textcolumn: {
        template: `
        <div :class="'k-block-type-box box-' + content.boxtype" @dblclick="open">
        <div v-if="content.text" v-html="content.text"></div>
        <div v-else>No content yet</div>
      `
      },

      numbers: {
        template: `
        <div :class="'k-block-type-box box-' + content.boxtype" @dblclick="open">
        <div v-if="content.columnhead" v-html="content.columnhead"></div>
        <div v-if="content.columnleft" v-html="content.columnleft"></div>
        <div v-if="content.columncenter" v-html="content.columncenter"></div>
        <div v-if="content.columnright" v-html="content.columnright"></div>
        <div v-else>No content yet</div>
      `
      },

      quote: {
        template: `
        <div :class="'k-block-type-box box-' + content.boxtype" @dblclick="open">
        <div v-if="content.text" v-html="content.text"></div>
        <div v-else>No content yet</div>
      `
      }
  }
});

and here the yaml for one of the blocks, that do not work:

name: field.blocks.textcolumns.name
icon: box
preview: box
wysiwyg: true
fields:
  textleft:
    label: Text links
    type: writer
    placeholder: Text für linke Spalte
  textright:
    label: Text rechts
    type: writer
    placeholder: Text für rechte Spalte
4

That somehow doesn’t fit together. You are using box as preview, but your box preview has other fields than what you have defined in the textcolumns yaml.

Changing the preview prop in your yaml to textcolumns should fix the issue. But note that probably due to copy & paste, you also have an undefined content.boxtype in your textcolumns preview. So careful here.

5

Thanks didn’t recognized the preview-tag. It worked somehow with the former Kirby Version, but of course was not correct. And sorry for the „copy and paste code“ :wink: