init

.gitignore

@@ -0,0 +1,8 @@
+# OS files
+.DS_Store
+
+# npm modules
+/node_modules
+
+# Composer files
+/vendor

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Jon Gacnik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,70 @@
+# Kirby Fields Block
+
+Kirby [block preview](https://getkirby.com/docs/reference/plugins/extensions/blocks) plugin to directly render block fields, allowing for inline editing.
+
+<img src="https://files.jongacnik.com/kirby-fields-preview-1.png" width="975" height="auto" />
+
+## Usage
+
+### Block definition
+
+When creating a custom block in your blueprints, pass `preview: fields` to utilize this plugin
+
+```yaml
+blockname:
+  name: Block Name
+  preview: fields # required
+  wysiwyg: true # recommended
+  fields:
+    text:
+      label: Text
+      type: text
+```
+
+Setting `wysiwyg: true` prevents drawer from automatically opening when creating a new block.
+
+### Disable block title
+
+You can disable the block title bar by passing `label: false`
+
+```yaml
+blockname:
+  name: Block Name
+  preview: fields
+  wysiwyg: true 
+  label: false # disables block title bar
+  fields:
+    text:
+      label: Text
+      type: text
+```
+
+<details>
+  <summary>Example</summary>
+  <img src="https://files.jongacnik.com/kirby-fields-preview-2.png" width="975" height="auto" />
+</details>
+
+## Notes
+
+- The block `icon` will appear in the title bar.
+- Currently does not support blocks with tabs.
+
+## Installation
+
+```
+composer require jg/kirby-fields-block
+```
+
+<details>
+  <summary>Other installation methods</summary>
+
+### Download
+
+Download and copy this repository to `/site/plugins/kirby-fields-block`.
+
+### Git submodule
+
+```
+git submodule add https://github.com/jongacnik/kirby-fields-block.git site/plugins/kirby-fields-block
+```
+</details>

composer.json

@@ -0,0 +1,15 @@
+{
+  "name": "jg/kirby-fields-block",
+  "description": "Kirby Fields Block",
+  "type": "kirby-plugin",
+  "license": "MIT",
+  "authors": [
+    {
+      "name": "Jon Gacnik",
+      "email": "[email protected]"
+    }
+  ],
+  "require": {
+    "getkirby/composer-installer": "^1.1"
+  }
+}

index.css

@@ -0,0 +1,15 @@
+.k-block-fields-preview {
+  margin: -0.75rem;
+}
+
+.k-block-fields-preview .k-block-title {
+  padding: 0.75rem;
+  background: #f7f7f7;
+  border-bottom: 1px solid #efefef;
+  border-bottom: 1px solid rgb(229,229,229);
+  border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
+.k-block-fields-preview .k-form {
+  padding: 1.25rem 1.5rem 1.5rem 1.5rem;
+}

index.js

@@ -0,0 +1,23 @@
+panel.plugin("jg/fields-block", {
+  blocks: {
+    fields: `
+      <div class="k-block-fields-preview">
+        <template>
+          <k-block-title
+            :content="content"
+            :fieldset="fieldset"
+            @dblclick="$emit('open')"
+            v-if="fieldset.label === null || fieldset.label"
+          />
+          <k-form
+            ref="form"
+            :autofocus="true"
+            :fields="fieldset.tabs.content.fields"
+            :value="$helper.clone(content)"
+            @input="$emit('update', $event)"
+          />
+        </template>
+      </div>
+    `
+  }
+});

index.php

@@ -0,0 +1,3 @@
+<?php
+
+Kirby::plugin('jg/fields-block', []);