Plugins, plugins everywhere

Plugins
1

Hi,
I am working through the excellent tutorial about making custom block types - Creating a custom block type from scratch. A site I am working on will probably have a large number of custom blocks, looks like around 30 at the moment. Would there be any issue have that number of plugins running in Kirby, for speed / stability? Thanks for any insight anyone may have before I start working through them :slightly_smiling_face:

EDIT

I have just finished the tutorial, and got a working custom block plugin :tada:. I also have a node_modules folder appear in the plugin folder, along with a index.css and package-lock.json. is this to be expected? As it should probably be added to the folder structure diagram in the tutorial. Also, am I going to end up with a node_modules folder in each plugin? As I guess these will all be identical.

2

Yes, this folder is created automatically through npm install. You can remove it again after the final build step (and then when you later want to make changes, install those modules again)

BTW: You can put all custom blocks in a single plugin if you want, you don’t need a separate one for each, unless you want to separate them.

3

Thanks for the quick reply. Would you be able to give some pointers on how to go about placing multiple blocks in the same plugin?

4

WIP: Here an excerpt for my upcoming recipe:

General plugin setup

Let’s start with creating the plugin. In the site/plugins folder, create a new folder called block-factory, and inside that folder an index.php, an index.js, and an index.css file. Additionally, we create the folder structure for the block snippets and blueprints…

block-factory/
  blueprints/
    blocks/
      ...
  snippets/
    blocks/
      ...
  index.css
  index.js
  index.php

Register blueprints and snippets

The index.php file is the place where we register the blueprints and snippets for the custom blocks. The basic structure looks like this. We can add multiple blueprints and snippets for each block that we will create.

<?php
Kirby::plugin('cookbook/block-factory', [
  'blueprints' => [
    'blocks/myblock' => __DIR__ . '/blueprints/blocks/myblock.yml',
    // more blueprints here
  ],
  'snippets' => [
    'blocks/myblock' => __DIR__ . '/snippets/blocks/myblock.php',
    // more snippets here
  ],

Register templates

The preview templates for the blocks go into the index.js file:

panel.plugin("cookbook/block-factory", {
  blocks: {
    myblock: `
      <div @click="open">
        {{ content.text }}
      </div>
    `
    // more blocks here
  }
});
5

Awesome, thank you that is a great starting point

6

Recipe is now published:

2 Likes
7

That’s great, thank you. I have a few custom blocks put together now, it’s gone very well considering I had never used Vue before!