Adding a block field to a structure

[kirb]

Hello, i’m having issues trying to nest a “blocks” field inside a structure. This is the code in my yml file:

      android: 
        label: Android docs
        type: structure
        fields: 
          title: 
            label: Title
            type: text
            required: true
          documentation: 
            label: Documentation
            type: blocks

This is the error i’m getting:

Is it possible to nest blocks within a structure? If not, is there anything similar i could use?

I need to use a structure in order to be able to group different sections of the documentation and more create navigation on the page too. I was thinking the blocks field would be best to be able to provide the editors with easy access to fields like headings, paragraphs, lists, code blocks and images. Although they also need tables so i’m not sure if this is something that the blocks do have or if i need to find another solution.

Any advice is greatly appreciated

[texnixe]

Which Kirby version are you using?

[kirb]

Version 3

[texnixe]

Yes, but could you please provide the exact version number? When I use a blocks field inside a structure in 3.5.7.1, I cannot reproduce your issues.

[kirb]

Oh Sorry, i’m on 3.3.3

[texnixe]

The blocks and layout fields were introduced in Kirby 3.5, so they are not supported in your version. You would have to update first.

[kirb]

Ah, great! that explains it. Thank you so much

[kirb]

Sorry if i’m being really stupid! I have now upgraded to the latest Kirby (which was pleasantly super easy!). Blocks are now showing up and i can add them in, however when i want to get the content into my templates
<?= $section->documentation()->toBlocks() ?>
I see this:

What am i doing wrong please?

[texnixe]

@kirb

<?= $section->documentation()->toBlocks() ?>

Could you please provide a bit more context? What is $section?

[kirb]

I have a structure with title and blocks

android: 
        label: Android docs
        type: structure
        fields: 
          title: 
            label: Title
            type: text
            required: true
          type: 
            label: Section
            type: select
            required: true
            options:
              main: Main section
              sub: Sub-section
          documentation: 
            label: Documentation
            type: blocks

$section is just an iteration over the structure (passed into a snippet)

$sections = $page->android()->toStructure()

<?php foreach ($sections as $section): ?>
    <?= $section->title() ?>
    <?= $section->documentation()->toBlocks() ?>

This is the blocks in the panel:

This is in the .txt file

Android:

- 
  title: Introduction to
  type: main
  documentation: '[{"content":{"text":"<p>Some text<\/p>"},"id":"aafe4b85-9205-46e7-940c-6c1795b28e05","isHidden":false,"type":"text"},{"content":{"text":"<ul><li>a<\/li><li>list<\/li><li>of <\/li><li>things<ul><li><\/li><\/ul><\/li><\/ul>"},"id":"95ea7817-7a93-4fe2-905b-4ffba9b63517","isHidden":false,"type":"list"},{"content":{"level":"h3","text":"A heading!"},"id":"6f661ae6-f9e8-4ec5-8d37-0e089f8bc1db","isHidden":false,"type":"heading"},{"content":{"text":"a quote","citation":"bby me"},"id":"de3b5837-e1fa-4cb3-80ac-eb784dda2d15","isHidden":false,"type":"quote"},{"content":{"code":"hi {\nsomething\n}\n\n<h1>Blah<\/h1>","language":"text"},"id":"83559d7d-333d-4eb6-90cb-a651b70a7e02","isHidden":false,"type":"code"},{"content":{"location":"kirby","image":["screenshot-2021-10-13-at-21.01.55.png"],"src":"","alt":"Some image","caption":"","link":"","ratio":"","crop":"false"},"id":"a4567354-f51c-4f5e-8be8-1a263261b954","isHidden":false,"type":"image"}]'
- 

The blocks just don’t seem to be showing the html as i’d expect

[texnixe]

It tested this field setup in my local installation without issues. Resulting content with two items looks like this:

Android:

- 
  title: My title
  documentation: '[{"content":{"image":["table.jpg"]},"id":"5acf5dff-c23a-4083-a872-7f42bd4dc905","isHidden":false,"type":"image"},{"content":{"text":"<p>La la lal lalalal lal<\/p>"},"id":"bb38bc96-a273-43dd-be11-e0aba179cffa","isHidden":false,"type":"text"},{"content":{"text":"<ul><li>List 1<\/li><li>List 2 <\/li><li>List 3<\/li><\/ul>"},"id":"c6ba6570-2f8a-426a-afc5-f343c48b9ba9","isHidden":false,"type":"list"}]'
- 
  title: Lalal
  documentation: |
    [{"content":{"level":"h2","text":"My Heading"},"id":"3f5086fe-bd06-43a1-a3a6-90f20737819e","isHidden":false,"type":"heading"},{"content":{"text":"<p>My Text<\/p>"},"id":"9c396502-dc08-4767-95cf-f93e181de40e","isHidden":false,"type":"text"},{"content":{"text":"It's great to be alive","citation":"by James"},"id":"b203d240-d023-4f3f-b9b3-ef54b1eafaf6","isHidden":false,"type":"quote"}]

And output on frontend works as well.

Your output, however, looks messed up, as if the input was already wrong somehow.

If I copy the content of your text field into my structure field, it comes out wrong in the Panel as well:

[kirb]

I deleted all the entries in my structure and added new blocks and this is the new code in the .txt file however it now just doesn’t output anything on the page at all for the blocks part. The title field works fine. I don’t understand!

This is my .txt file

----

Android:

- 
  title: Something
  documentation: '[{"content":{"level":"h2","text":"This is a heading"},"id":"dad8bcef-07c6-4790-af21-355d25ab72f3","isHidden":false,"type":"heading"},{"content":{"text":"<p>This<\/p><p>is<\/p><p>text<\/p>"},"id":"e61dafcb-2880-478d-bc1d-1d95c45e215b","isHidden":false,"type":"text"},{"content":{"text":"<ul><li>This<\/li><li>is <\/li><li>a<\/li><li>list<ul><li><\/li><\/ul><\/li><\/ul>"},"id":"06d98da3-983e-42b2-95a7-f822ac84463c","isHidden":false,"type":"list"}]'

----

And my php file

<?= $title ?>
<?= $section->documentation()->toBlocks() ?>

if i write <?= $section->documentation() ?> then this is output on the page:

If I inspect element some of the html looks correct but other bits don’t

[texnixe]

Hm, I cannot reproduce your issues, I’m afraid. When I copy your last content into my text file, both the entry in the Panel and the output on the frondend are fine.

You have to call toBlocks() for proper rendering of the blocks, otherwise you only get the raw JSON.

I can’t tell what’s going wrong in your case…

[kirb]

Thank you for all your help. It turns out it was a conflict with a plugin we were using called Editor. Deleted that and all is good!