Block extensions

The Editor can be extended with additional block plugins.

Anatomy of a block plugin

Block plugins are regular Kirby plugins. They are stored in /site/plugins. A basic block plugin is made up of a custom snippet, defined in your index.php and a block Vue component defined in your index.js.

/site/plugins/custom-block/
/site/plugins/custom-block/index.php
/site/plugins/custom-block/index.js
/site/plugins/custom-block/index.css
/site/plugins/custom-block/snippets/custom.php

Defining a snippet

// /site/plugins/custom-block/index.php
Kirby::plugin('yourname/custom-block', [
  'snippets' => [
    'editor/custom' => __DIR__ . '/snippets/custom.php
  ]
]);

Registering your block Vue component

// /site/plugins/custom-block/index.js

editor.block("custom", {
  label: "Custom",
  icon: "alert",
  template: "<p>Hello world</p>"
});