Custom Blocks Preview with nested Blocks

[cjburkert]

Hello,

I am relatively new to programming in PHP and JS but I am giving my best. Kirby is a great tool and it really makes a lot of fun to create. But now my skills reached their end.

I tried something for a web project: I want to implement a (custom) blocks field, where you just see the heading in the blocks preview - not everything blocks type. There are some entries with a lot of text and it would become very confusing in the panel.

It should be looking like this:

But these are structured fields combined with a blocks field.

I am looking for a solution just with blocks field. I created a custom blocks type (servicesbox) in the blueprint:

      blocks:
        type: blocks
        pretty: true
        fieldsets:
          - servicesbox

Here is the blueprint:

type: servicesbox
fields:
  servicesContent:
    type: blocks
    pretty: true
    fieldsets:
      - heading
      - text
      - list

Nested blocks, because I would like to use the predefined field-types heading and list.

I created a custom blocks preview (like in the screencast “custom blocks plugin crash course”)

But my problem: it is a nested blocks array and I don’t know how I can filter or find the first heading of the custom blocks array (in “computed”). I just would like to show only the first or main heading in the preview.

Here is my index.js of the custom blocks preview plugin:

panel.plugin("cbkt/servicesbox", {
  blocks: {
    servicesbox: {

      computed: {
          ???
      },

      methods: {
        onInput(event) {
          this.update({
            text: event.target.value
            }
          );
        }
      },

      template: `
             <div>
               
                <input
                    type="text"
                    :value=" ??? "
                    @input="onInput"
                />
             </div>
      `
    }
  }
});

In computed I have to find the heading of “servicesContent” blocks array and then I can write the value into the input field? I don’t know if this is correct but It should work. I tried with filter and find - but somehow I am missing something.

I searched a lot but could not find an answer. Will try the beginners tutorial for Vue 3 as well.

Appreciate any hints and help!

Thanks!

Chris

[pixelijn]

Wouldn’t it be easier (and cleaner anyway) to have two fields in your custom servicebox block?

1. A text field for the heading
2. The blocks field for the long text

Then you don’t have to deal with finding a heading in a block, but you can just use the value of the text field.

[cjburkert]

Hello, thanks for your answer - yes that is a workaround:)

But I was looking for a more elegant way to just have one block and and not show all the content of the blocks field in the panel.

But in generel I would like to know more about creating and setting up a custom blocks type preview in the panel.

But that seems not so easy and for me, as a beginner, the documentation - even with some knowledge - is not easy to understand.

But in my plugin I could loop through my array within my template of my custom block type preview plugin:

template: `        
<div>              
 <h3>              
  <input              
    type="text"              
    v-for="item in content.blocks"              
    v-if="item.content.level"              
    :value="item.content.text"              
    @input="onInput"              
  />              
 </h3>        
</div> `

It is a start, but for now I stick with your suggestion:)

thx, chris

[pixelijn]

Have you found all the custom block examples here: Page builder | Kirby CMS?

The reason I suggested the above “workaround” was not only that it is easier to implement. Also, the results may be more consistent if you force the user to provide a category heading, rather than getting possibly different types of first headlines.

[cjburkert]

Yes, forcing the user to provide a category heading is a very good thought - yes I had this in mind too, but somehow got lost in the idea of providing everything in one block …

I saw the block examples and screencasts to blocks, custom blocks and custom blocks plugin crash course - because I was missing some more information how to create the preview I had in my mind.

But based on the way of finding a solution for my task I learned a lot about blocks and plugins - and my boundaries;)

thx and cheers

Chris:)