Access parent page from block preview possible?

Hi,

I have the following setup: a certain blueprint has some information fields, plus a blocks field where I have some blocks with own content and some blocks that I use to determine the position of some content of the information fields of the parent page. I would like to include the content of those fields in the block preview. Unfortunately I can’t find a way to access the page object from the block preview… My first idea was to use this.parent.parent, as this.parent should give me the blocks field and this.parent.parent should give me the page, but already this.parent seems to be empty. Then I thought I could search for the page with the block ID through an API query, but this.id does not return anything. I seem to only have access to this.content.
Is there any way I could make this happen?

Thank a lot,
Till

You can find an example in this cookbook recipe: Block factory: Creating your own blocks collection | Kirby CMS. Hope that helps.

Reading that, I can see how to access the contents of a page that is referenced inside of a block. But what I want to do is access the parent page of a block, so I can show the content of another field from the same page in my block’s preview.
Or am I missing something?

With this.$attrs.endpoints.model, you get the path, e.g. in a Starterkit on a note page, that would be /pages/notes+exploring-the-universe. You can then use this path to access the api for the page.

2 Likes

Thanks! I found out the same thing just now using the vue devtools browser plugin to see what is available in the component. Could have thought of that before, sorry. With some more doctoring I arrived at a solution like this for the index.js:

panel.plugin("custom-blocks/info-block", {
  blocks: {
    info: {
      data() {
        return {
          attribute: "",
        };
      },
      created() {
        this.apiRequests();
      },
      methods: {
        async apiRequests() {
          const page = await this.$api.pages.get(
            this.$attrs.endpoints.model.replace("/pages/", "")
          );
          this.attribute = page.content.attribute;
        },
      },
      template: `
        <div class="info-block" @click="open">
          Attribute: {{ this.attribute }}<br>
        </div>
      `,
    },
  },
});
2 Likes

Stumbling over this because I’m too looking for how to access the page from within a block plugin to display the page title inside the block. Took me quite some googling to find the solution in here. Thank you texnixe!

I first found Access kirby objects in Custom Block Vue component (blocks field) and I learned from jash how to request page data from the api. However they’re using a page id from a content field.

Then I found How to get a page object in a vue plugin? and it’s pointing to the same unfortunately wrong solution: Block factory: Creating your own blocks collection | Kirby CMS where they don’t access the page data of the current page but from a pages field.

Could I have found this information in the Reference | Kirby CMS?