downgrade to kirby v3

site/plugins/kirby-fields-block/src/FieldsBlock.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="k-block-fields-preview" @mousedown="preventSelect" :data-hidden="isHidden">
+    <k-fields-block-title
+      :content="content"
+      :fieldset="fieldset"
+      v-if="fieldset.label === null || fieldset.label"
+      @dblclick="toggle"
+      @toggle="toggle"
+    />
+    <k-form
+      ref="form"
+      :autofocus="true"
+      :fields="fieldset.tabs.content.fields"
+      :value="$helper.clone(content)"
+      @input="$emit('update', $event)"
+      v-if="!isHidden"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      isHidden: JSON.parse(sessionStorage.getItem(`kirby.fieldsBlock.${this.$attrs.endpoints.field}.${this.$attrs.id}`))
+    }
+  },
+  methods: {
+    toggle () {
+      this.isHidden = !this.isHidden
+      sessionStorage.setItem(`kirby.fieldsBlock.${this.$attrs.endpoints.field}.${this.$attrs.id}`, this.isHidden)
+    },
+    preventSelect (event) {
+      if (event.detail > 1) {
+        if(!event.target.closest('.k-input')) {
+          event.preventDefault()
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.k-block-fields-preview {
+  margin: -0.75rem;
+  overflow: hidden;
+  border-radius: var(--rounded);
+}
+
+.k-block-fields-preview .k-block-title {
+  padding: 0.75rem;
+  background: #f7f7f7;
+}
+
+.k-block-fields-preview:not([data-hidden="true"]) .k-block-title {
+  border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.k-block-fields-preview .k-fields-block-toggle {
+  margin-left: auto;
+  cursor: pointer;
+}
+
+.k-block-fields-preview[data-hidden="true"] .k-fields-block-toggle {
+  transform: scaleY(-1);
+}
+
+.k-block-fields-preview .k-form {
+  padding: 1.25rem 1.5rem 1.5rem 1.5rem;
+}
+
+/**
+ * Reset `.k-layout-column .k-empty` overrides
+ */
+
+.k-block-fields-preview .k-empty {
+  position: static !important;
+  opacity: 1 !important;
+  align-items: stretch !important;
+  justify-content: flex-start !important;
+  color: #777 !important;
+  border: 1px dashed #ccc !important;
+  border-radius: 1px !important;
+}
+
+.k-block-fields-preview .k-empty[data-layout="cards"] {
+  justify-content: center !important;
+}
+
+.k-block-fields-preview .k-empty[data-layout="list"] .k-icon {
+  border-right: 1px solid rgba(0,0,0,.05) !important;
+}
+</style>

site/plugins/kirby-fields-block/src/index.js

@@ -0,0 +1,26 @@
+import FieldsBlock from "./FieldsBlock.vue"
+
+panel.plugin("jg/fields-block", {
+  components: {
+    'k-fields-block-title': {
+      extends: 'k-block-title',
+      template: `
+        <div class="k-block-title" v-on="$listeners">
+          <k-icon :type="icon" class="k-block-icon" />
+          <span class="k-block-name">
+            {{ name }}
+          </span>
+          <span v-if="label" class="k-block-label">
+            {{ label }}
+          </span>
+          <span class="k-fields-block-toggle" v-on:click="$emit('toggle')">
+            <k-icon type="angle-up"/>
+          </span>
+        </div>
+      `
+    }
+  },
+  blocks: {
+    fields: FieldsBlock
+  }
+})