Best practice for custom core blocks / overriding core blocks

The CMS Questions
1

Hi there,

I want to override some of the core blocks (heading, text, list) with some additional features. (e.g. text-orientation for text and heading block and custom list-icons for the list-block)

I know that it is possible in a simple way by adding blueprints with custom fields and adapted snippets in the folder blocks - this is the way I did it until now.

Now I’d like to go a step further and also change the previews of the blocks. According to what I read about it, I can build a block-plugin by getting all the parts (vue-component, blueprint, snippet) from the block documentation and adapt everything to my needs.

But when I e.g. do it with the text-block I come along with some problems/questions:

1.) In the original vue-compontent there are for e.g. these lines:

<script>
import Block from "./Default.vue";

/**
 * @displayName BlockTypeText
 */
export default {
	extends: Block,
	emits: ["open", "split", "update"],
	computed: {

I have to delete the “import Block from “./Default.vue”;”-Line for the build-process to work, but is it right to do this? does it affect the functionality?
Same with the “extends:“ and “emits:“ lines. I don’t understand what they do and if they are important, because in the guide/cookbook I didn’t read something about it…

2.) I get the new alignment-functionality of the text-block to work by adding inline-style to the component, but adding a data-attribute with the fontsize (to work with it in the css-part) doesn’t work. :frowning:

<template>
	<component
		:is="component"
		ref="input"
		v-bind="textField"
		:disabled="disabled"
		:keys="keys"
		:value="content.text"
		class="k-block-type-text-input"
		:style="'text-align: ' + content.align"
		:data-fontsize="content.fontsize"
		@input="update({ text: $event })"
	/>
</template>

I would be really happy if someone could explain me these things, and I think it would be great if there would be a cookbook-recipe with overriding core-block AND there preview.

Thanks a lot!

Matthias

2

I could go a little (!) bit further the last days. :slight_smile:

this is the template-part now:

<template>
	<component
		:is="component"
		ref="input"
		v-bind="textField"
		:disabled="disabled"
		:keys="keys"
		:value="content.text"
		class="k-block-type-text-input"
		:class="'mb-fs-' + content.fontsize"
		:style="'text-align: ' + content.align + ';'"
		@input="update({ text: $event })"
	/>
</template>

Adding a class with the fontsize-value works, but I really would like to know why

:data-fontsize="content.fontsize"

does NOT work. I’d like to understand the code…

and also I’d like to know what the lines

import Block from "./Default.vue";

extends: Block,
emits: ["open", "split", "update"],

do, and why it seems to work when I delete them, or whether it’s not a good idea to do this because i might lose functionality of the original text-block.

:roll_eyes:

thanks…

3

Please follow https://getkirby.com/docs/reference/plugins/extensions/blocks when adding custom block types. This will ensure that your plugin will extend the default block type.

To understand what the extends and emits option do, it’s recommended t familiarize yourself with Vue in general. But in your plugin, you do not have any access to Default.vue as the core .vue file has, so your plugin cannot do the import (and thus also not extend the default block in the same way as the core text block does). By following the blocks extension as explained in the reference, Kirby ensures that your block will extend the default block, so you do not need to worry about that.

I assume :is="component" still uses the code of the original text block in your case? So it will actually use the k-writer-input component? This has inheritAttrs: false defined which does only allow attributes that have been defined in its definition to be applied - which is likely why your custom data attribute gets ignored.

4

Thanks for your answer, Nico.
You are right, I’m not really familiar with Vue at the moment but I try to get better. :innocent: I read the guide und saw the video you linked.

What I find a little bit confusing is that in the guide and here in the forum it is talked about that the vue-components of the core-blocks can be used as a starting point for adjusting the core-blocks, but what I did now, is coding a “new” custom text-block, which indeed has the extended functionality I wanted, but which unfortunately lacks some features of the original core-block like splitting and merging …which I find really important. :frowning:

You unterstand what I mean?

Here is my code now:

<template>
	<k-writer-input
		ref="input"
		:nodes="false"
		:placeholder="field('text').placeholder"
		:value="content.text"
		class="k-block-type-text-input"
		:class="'mb-fs-' + content.fontsize"
		:style="'text-align: ' + content.align + ';'"
		@input="update({ text: $event })"
	/>
</template>

It work’s in this way, but the :data-fontsize="content.fontsize" Attribute is still not working. :frowning: