Passing props from php to a block?

The CMS Questions
,
1

I seem to be struggling to pass props from php into a block in order to have the block behavior respond based on a config setting. I assume since this does work for custom fields that it should also work for custom blocks too.

Based on the following example, the value of testProp set in the index.php is not passed to the component at all. What am I missing?

index.php:

<?php

Kirby::plugin('example/testblock', [
  'blocks' => [
    'testblock' => [
      'icon' => 'text',
      'props' => [
        'testProp' => fn () => '✅ Hello from PHP block prop!'
      ],
      'fields' => [
        'label' => 'Test Block',
        'type' => 'textarea'
      ]
    ]
  ]
]);

index.js:

import TestBlockPreview from './components/TestBlockPreview.vue';

panel.plugin('example/testblock', {
  blocks: {
    testblock: TestBlockPreview
  },
  components: {
    TestBlockPreview // register the component
  }
});

and vue component:

<template>
  <div class="test-block-preview">
    <p><strong>TestProp from PHP:</strong> {{ testProp }}</p>
  </div>
</template>

<script>
export default {
  name: 'TestBlockPreview',
  props: {
    testProp: {
      type: String,
      default: ''
    }
  },
  created() {
    console.log('[TestBlockPreview mounted]');
    console.log('[testProp]:', this.testProp);
  }
};
</script>
2

Your plugin registry part doesn’t appear to be valid, please check these documents: