# Custom Blocks Preview with nested Blocks

**URL:** <https://forum.getkirby.com/t/custom-blocks-preview-with-nested-blocks/35294>\
**Category:** Plugins\
**Tags:** v5\
**Created:** [March 18, 2026, 9:17pm UTC](https://forum.getkirby.com/t/custom-blocks-preview-with-nested-blocks/35294 "2026-03-18T21:17:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![cjburkert](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/cjburkert/32/14301_2.png) [@cjburkert](https://forum.getkirby.com/u/cjburkert)\
**Post date:** [March 18, 2026, 9:17pm UTC](https://forum.getkirby.com/t/custom-blocks-preview-with-nested-blocks/35294/1 "2026-03-18T21:17:50Z")

</div>

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:

 ![Bildschirmfoto 2026-03-18 um 21.52.26](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/3X/1/6/16d30470d17f5c1d407932db084ffc995458906a.jpeg)

But these are structured fields combined with a blocks field.

 ![Bildschirmfoto 2026-03-18 um 21.55.03](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/3X/1/1/1121a7e442c465f20081720a68d57e75b3e8fce0.jpeg)

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

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

```

Here is the blueprint:

```auto
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:

```auto
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

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [March 18, 2026, 9:29pm UTC](https://forum.getkirby.com/t/custom-blocks-preview-with-nested-blocks/35294/2 "2026-03-18T21:29:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![cjburkert](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/cjburkert/32/14301_2.png) [@cjburkert](https://forum.getkirby.com/u/cjburkert)\
**Post date:** [March 19, 2026, 10:04am UTC](https://forum.getkirby.com/t/custom-blocks-preview-with-nested-blocks/35294/3 "2026-03-19T10:04:10Z")

</div>

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:

```auto
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

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [March 19, 2026, 1:37pm UTC](https://forum.getkirby.com/t/custom-blocks-preview-with-nested-blocks/35294/4 "2026-03-19T13:37:49Z")

</div>

Have you found all the custom block examples here: [Page builder | Kirby CMS](https://getkirby.com/docs/guide/page-builder)?

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.

---

<div class="post-metadata">

**Author:** ![cjburkert](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/cjburkert/32/14301_2.png) [@cjburkert](https://forum.getkirby.com/u/cjburkert)\
**Post date:** [March 19, 2026, 5:00pm UTC](https://forum.getkirby.com/t/custom-blocks-preview-with-nested-blocks/35294/5 "2026-03-19T17:00:33Z")

</div>

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:)