Line break in custom block field

Kirby 4 Question❓
1

Hey,
I created my own block field in a plugin.
Easily text with font-sizes and text-align options.

In the panel I want the text to wrap at the end - like the heading block does.

blueprint:

name: Slogan
type: slogan
icon: text
fields:
  text:
    type: textarea
    buttons: false
    placeholder: Text eingeben... 
  size:
    type: toggles
    default: md
    reset: false
    options:
      - md
      - lg
      - xl
      - 2xl
  halign:
    label: Textausrichtung
    type: toggles
    labels: false
    options:
      - value: left
        text: Link
        icon: text-left
      - value: center
        text: zentriert
        icon: text-center
      - value: right
        text: rechts
        icon: text-right

index.js

panel.plugin("xxx/slogan", {
  blocks: {
    slogan: {
      methods: {
        onInput(event) {
          this.update({
            text: event.target.value,
          });
        }
      },
      template: `
        <div :data-size-type="content.size" :data-align-type="content.halign">
            <input
              :value="content.text"
              @input="update({ text: $event })"
            />
        </div>
      `
    }
  }
});

Do I have to store something in the template in the index.js?

Thank you for the support!

2

You can find the Vue file for the heading here: kirby/panel/src/components/Forms/Blocks/Types/Heading.vue at main · getkirby/kirby · GitHub
Note that it uses a k-writer component, not an input. The text field in the block itself is also a writer, not a textarea field.

3

It works!
I had already looked there but probably not thoroughly enough :slight_smile:

The writer option and the adoption of the computed elements (without the levels) is the solution!

Thank you :ok_hand: