Override preview for core heading block

Kirby 3 Solved ✅
1

Hi there,

I’m overriding the the core heading block in a plugin I’m creating- so it will display a background colour. The snippet in the front end works fine, but I’ve not been able to override the preview for the panel. The index.js code in my plugin folder is as follows. The first block (which is a custom block) works fine but the second block (based in the original heading block) never renders in the panel, just the existing one. Is there something additional I need to do to make the custom preview appear? Many thanks for any thoughts!

panel.plugin("careful-digital/guides", {
  blocks: {
    activity: `
      <div class="container-fluid rounded m-1 p-2 bg-light">
        <div v-if="content.activitytitle">
          <h2 class="text-dark display-6"><i class="bi bi-heart-pulse"></i>&nbsp;ACTIVITY:&nbsp;{{ content.activitytitle }}</h2>
        </div>

        <div v-if="content.activitycontent">
          {{ content.activitycontent }}
        <div>
      </div>
    `
  },
  heading: `
    <template>
	<div :data-level="content.level" class="k-block-type-heading-input">
		<k-writer
			ref="input"
			:inline="true"
			:marks="textField.marks"
			:placeholder="textField.placeholder"
			:value="content.text"
			@input="update({ text: $event })"
		/>
	</div>
  <span>Test</span>
</template>

<script>
/**
 * @displayName BlockTypeHeading
 * @internal
 */
export default {
	computed: {
		textField() {
			return this.field("text", {
				marks: true
			});
		}
	},
	methods: {
		focus() {
			this.$refs.input.focus();
		}
	}
};
</script>

<style>
.k-block-type-heading-input {
	line-height: 1.25em;
	font-weight: var(--font-bold);
}
.k-block-type-heading-input[data-level="h1"] {
	font-size: var(--text-3xl);
  color: red;
	line-height: 1.125em;
}
.k-block-type-heading-input[data-level="h2"] {
	font-size: var(--text-2xl);
}
.k-block-type-heading-input[data-level="h3"] {
	font-size: var(--text-xl);
}
.k-block-type-heading-input[data-level="h4"] {
	font-size: var(--text-lg);
}
.k-block-type-heading-input[data-level="h5"] {
	line-height: 1.5em;
	font-size: var(--text-base);
}
.k-block-type-heading-input[data-level="h6"] {
	line-height: 1.5em;
	font-size: var(--text-sm);
}
.k-block-type-heading-input .ProseMirror strong {
	font-weight: 700;
}
</style>
`
});
2

You can’t use script and style tags here, unless you use single file components, which you obviously don’t.

Please refer to the documentation how to add your methods correctly if you only use an index.js

e.g.

3

OK thanks @texnixe for clarifying that. I switched to using single file components, removed the preview field from the heading.yml, and now it’s all working as expected. Thank you again!