Adding toggle to block preview

1

Hello.

My code so far works I can edit headline and text. Now I want to add the toggler to the preview for editable. I want to toggle the field reverse in the block preview.

Here is my working code so far. I also check git → kirby/panel/src/components/Forms/Blocks/Types at 2965c3124e3b141072a2d46c798a327dda710060 · getkirby/kirby · GitHub

But can’t find the right code I can use :slight_smile:

panel.plugin("mg/blockspreview", {
  blocks: {
    imagetext: {
      computed: {
        levels() {
          return this.field("level", { options: [] }).options;
        },
        headlineField() {
          return this.field("headline");
        },
        textField() {
          return this.field("text");
        }
      },
      methods: {
        updateItem(content, index, fieldName, value) {
          content.faq[index][fieldName] = value;
          this.$emit("update", {
              ...this.content,
              ...content
            });
        },
      },
      template: `
      <div>
        <div :data-level="content.level" class="k-block-type-heading-input">
          <k-writer
            ref="headline"
            :inline="headlineField.inline"
            :marks="headlineField.marks"
            :placeholder="headlineField.placeholder || 'Überschrift eingeben...'"
            :value="content.headline"
            @input="update({ headline: $event })"
          />
          <k-input
            v-if="levels.length > 1"
            ref="level"
            :empty="false"
            :options="levels"
            :value="content.level"
            type="select"
            class="k-block-type-heading-level"
            @input="update({ level: $event })"
          />
        </div>

        <div :class="'k-block-type-box box-' + content.boxtype">
          <k-writer
            class="label"
            ref="textbox"
            :marks="textField.marks"
            :value="content.text"
            :placeholder="textField.placeholder || 'Text eingeben...'"
            @input="update({ text: $event })"
          />
          <k-icon
            v-if="content.type !== 'neutral'"
            class="k-block-type-box-icon"
            :type="content.boxtype"
          />
        </div>

      </div>
      `
    }
  }
});

Also my yml

name: Bild Text
icon: image
preview: field.headline
fields:
  headline:
    label: Überschrift
    type: text
  level:
    label: field.blocks.heading.level
    type: toggles
    empty: false
    default: "h2"
    labels: false
    options:
      - value: h1
        icon: h1
        text: H1
      - value: h2
        icon: h2
        text: H2
      - value: h3
        icon: h3
        text: H3
      - value: h4
        icon: h4
        text: H4
      - value: h5
        icon: h5
        text: H5
      - value: h6
        icon: h6
        text: H6
  alignment:
    extends: fields/alignment
  text:
    label: Text
    type: writer
  image:
    label: Bild
    type: files
    multiple: false
  minheight:
    label: Bild min. Höhe
    type: number
  background:
    label: türkiser Balken
    width: 1/2
    type: toggle
  reverse:
    label: Ausrichtung umdrehen
    width: 1/2
    type: toggle
2

Take a look at the source code for the heading block, it’s implemented as a dropdown list there.

3

Ah oky same as I alredy got fot chaning headline level.

  <k-input
            v-if="levels.length > 1"
            ref="level"
            :empty="false"
            :options="levels"
            :value="content.level"
            type="select"
            class="k-block-type-heading-level"
            @input="update({ level: $event })"
          />

I will try. Thanks