Returning Blocks as json

Kirby 3 Questions 🤔
1

Hiya gang,
I have hopefully somewhat of a simple problem. I’m returning my blocks in json, as I’m rendering my front-end with Vue (specifically using this starterkit). The code I have at the moment is:

$data = [
  'columns' => $page
    ->layout()
    ->toLayouts()
    ->map(function ($layout) {
      $columns = $layout->columns()->toArray();
      return $columns;
    })
    ->values(),
];

echo \Kirby\Data\Json::encode($data);

And it gives me this:

{
  "columns": [
    [
      {
        "blocks": [
          {
            "content": {
              "level": "h1",
              "text": "This is H!"
            },
            "id": "ff98539c-e102-4137-a3fb-2cf1cb0b40cb",
            "isHidden": false,
            "type": "heading"
          }
        ],
        "id": "06c5cc06-8baf-416f-ac55-a69e3f5032b8",
        "width": "1/1"
      }
    ],
    [
      {
        "blocks": [
          {
            "content": {
              "level": "h2",
              "text": "w one half"
            },
            "id": "3adc44e7-64a2-4696-b24d-80eb4250c643",
            "isHidden": false,
            "type": "heading"
          }
        ],
        "id": "5309b4e9-f71b-481d-9640-7f36999c2e66",
        "width": "1/2"
      },
      {
        "blocks": [
          {
            "content": {
              "text": "<p>w two hals</p>"
            },
            "id": "4bf8fb48-4778-43e7-bf6a-8f3aff1d44a7",
            "isHidden": false,
            "type": "text"
          }
        ],
        "id": "56430216-c475-45d9-a667-9f729d55fc70",
        "width": "1/2"
      }
    ],
    [
      {
        "blocks": [
          {
            "content": {
              "level": "h2",
              "text": "col1"
            },
            "id": "3a3dddea-b79c-4840-9f91-6bc4796efd0a",
            "isHidden": false,
            "type": "heading"
          }
        ],
        "id": "9f76e34e-3cb8-4c3e-afe3-ce3b4065ee83",
        "width": "1/3"
      },
      {
        "blocks": [
          {
            "content": {
              "level": "h2",
              "text": "col2"
            },
            "id": "558c1a44-b90f-45c3-af55-5e777e1885d0",
            "isHidden": false,
            "type": "heading"
          }
        ],
        "id": "13ef3a05-4c3e-4740-a55f-63fb38b743c2",
        "width": "1/3"
      },
      {
        "blocks": [
          {
            "content": {
              "level": "h2",
              "text": "col3"
            },
            "id": "5abac79c-69b2-4cfb-b8b5-4ec4c51aa483",
            "isHidden": false,
            "type": "heading"
          }
        ],
        "id": "2c45794e-2763-4600-b416-65da37dc1a3c",
        "width": "1/3"
      }
    ]
  ]
}

Which I get all of the columns and blocks, but I’m having a hell of a time trying to render out my blocks. I’m just wondering if there is a better way from the Kirby side to get my pages blocks into json? Have I missed something or am I on the right track?

Thank you for any insights :slight_smile:

2

Looks like you are using a custom endpoint rather than the API?

3

You might be interested in checking out the KQL plugin: GitHub - getkirby/kql: Kirby's Query Language API combines the flexibility of Kirby's data structures, the power of GraphQL and the simplicity of REST.

1 Like
4

Hey now this is interesting! Reading through the documentation it looks like you’ve got to be authenticated via the Panel to pull the content, which would not work for visitors to the front-end of the site :frowning:

5

Not necessarily, you could create an API user without access to the Panel for the purposes of authenticating.

See also BetterRest plugin: GitHub - robinscholz/better-rest: Kirby plugin for better REST requests