Preview custom block name and icon in panel

[assbach]

I’m trying to understand how to achieve custom block previews in the panel. Actually all i want is the simple default preview with the block-icon and block-name coming from the block’s blueprint but with a color-bar next to it indicating the blocks background-color. With trial and error I managed to get the colorbar showing (css: border-left…) but i can’t manage to display the icon and name of the block. Can you please give me a hint?

My plugin/index.js looks like this.

panel.plugin("cookbook/projectname", {
  blocks: {
	bgcolor: {
	computed: {
		bgc() {
			const F = [];
			F['#ff4000'] = "orange";
			F['#00c3d7'] = "blue";
			F['#191e1e'] = "anthracite";
			F['#eeeeee'] = "lightgray";
			F['#ffffff'] = "white";
			return F[this.content.bgcolor];
		},
		sicon() {
			//return this.content.icon;
			//return this.field("icon") || 'text';
			return this.icon || 'text';
		},
	},
	  template: `
		<div :class="'k-block-type-box box-'+bgc" @dblclick="open">
			<k-icon :type="sicon"/>
		</div>
	  `
	}
  }
});

commented you see what i tried to get the icon-value.

block’s blueprint

name: "013 Listenpunkte"
icon: list-bullet
preview: bgcolor
fields:
  headline:
    type: text
  text:
    type: textarea
    size: medium
  bgcolor: fields/bgcolors

Thank you!

[texnixe]

You can access the name, icon etc. via

this.$props.fieldset.name and also

disabled
editable
icon
label
name
preview
tabs
translate
type
unset
wysiwyg

​​

​​

​​

[assbach]

Thank you very much, Sonja! Now i got what i wanted to achieve.

panel.plugin("cookbook/projectname", {
  blocks: {
	bgcolor: {
	computed: {
		bgc() {
			const F = [];
			F['#ff4000'] = "orange";
			F['#00c3d7'] = "blue";
			F['#191e1e'] = "anthracite";
			F['#eeeeee'] = "lightgray";
			F['#ffffff'] = "white";
			return F[this.content.bgcolor];
		},
		sicon() {
			return this.$props.fieldset.icon || 'text';
		},
		sname() {
			return this.$props.fieldset.name;
		},
	},
	  template: `
		<div :class="'k-block-title k-block-type-box box-'+bgc" @dblclick="open">
			<k-icon :type="sicon"/><span :class="'k-block-name'"> {{ sname }} </span>
		</div>
	  `
	}
  }
});