Problem in "Creating a custom block type from scratch" tutorial

[zellda]

Hi folks

I am currently building my first site with Kirby and try to learn how to use a custom plugin. So I look at several plugins tutorial and finally try one : Creating a custom block type from scratch.

I have created all the needed files and folders, and it works in the panel block fields !

But one problem remains when i try to have a render of it, by editing the index.js file, it doesn’t work…

panel.plugin("gravezone/dossierspub", {
  blocks: {
    audio: {
      template: `
        <div>
          Listen to Mr. Pod talk about stuff
        </div>
      `
    }
  }
});

I’m quite sure that I forgot something somewhere, but I can’t find where I made the mistakes… Can anyone help me ?

It would be very helpful !!!

Have a nice summer,

Zellda

[texnixe]

Hm, the code itself is exactly like in the docs. Have you used the same plugin name as in the index.php file? And put the file right next to index.php?

Welcome to the forum!

[zellda]

Hmmm yes, but maybe I failed the architecture…

my index.js file (next to the index.php) :

panel.plugin("gravezone/dossierspub", {
  blocks: {
    audio: {
      template: `
        <div>
          Listen to Mr. Pod talk about stuff
        </div>
      `
    }
  }
});

my index.php file :

<?php

Kirby::plugin('gravezone/dossierspub', [
	'blueprints' => [
	    'blocks/dossierspub' => __DIR__ . '/blueprints/blocks/dossierspub.yml',
	  ],
	  'snippets' => [
	    'blocks/dossierspub' => __DIR__ . '/snippets/blocks/dossierspub.php',
	  ],
]);

my dossierspub.yml in the blueprints/blocks folder :

name: Dossier de publications
icon: document

fields:
  titrecategorie:
    label: Titre de la catégorie
    type: text
    required: true
  publications:
    label: Publications
    type: pages
    info: "{{ page.date.todate('M.Y') }}, {{ page.status }}"
    empty: Pas encore de publication
    query: site.children.template('publications')
    size: tiny
    layout: cards
    sortBy: date desc
    image:
      cover: false
      ratio: 3/2
      back: black

the call in the panel:

edito:
    label: Édito
    icon: text
    fields:
      text:
        label: Contenus publiés
        type: blocks
        fieldsets:
          - heading
          - text
          - gallery
          - dossierspub  
      textedito:
        label: Texte de l'édito
        type: textarea
        size: large
        buttons: false
        required: true

the plugin architecture:

Thanks a lot for your answer !!!

[zellda]

what it looks like in the panel:

[zellda]

and the part that doesn’t work

[texnixe]

Your block is called “dossierspub”, but in index.js you use audio, should therefore be:

panel.plugin("gravezone/dossierspub", {
  blocks: {
    dossierspub: {
      template: `
        <div>
          Listen to Mr. Pod talk about stuff
        </div>
      `
    }
  }
});

[zellda]

Alriiight, it was it :))

Thanks a lot… I think i should learn a bit more the syntax in Vue.js to understand more what I’m doing in the plugin js files haha.