Panel preview of custom blocks not working 🤔

The CMS Questions
1

I followed this tutorial (https://getkirby.com/docs/cookbook/panel/block-collection) and tried to replicated following contents: accordion, box and testimonial. The box module works fine, preview and detail information match but there are difficulties with the accordion and testimonial modules. I can edit the content in the block-editor (via click on pencil icon) but the previews stay blank. For the testimonial, I can enter text in the preview, but it is not transferred to the form.

Any ideas? Thanks for help (-:

Accordion block: BLUEPRINT

name: field.blocks.accordion.name
icon: bars
fields:
  summary:
    label: Summary
    type: writer
    marks: false
    placeholder: Enter summary…
  details:
    label: Detail
    type: writer
    marks: true

Accordion block: INDEX.js

		accordion: {
			computed: {
				summaryField() {
					return this.field("summary");
				},
				detailsField() {
					return this.field("details");
				}
			},
			template: `
				<div @dblclick="open">
					<details>
						<summary>
							<k-writer
								ref="summary"
								:inline="true"
								marks="false"
								:placeholder="summaryField.placeholder || 'Add a summary…'"
								:value="content.summary"
								@input="update({ summary: $event })"
							/>
						</summary>
						<k-writer
								ref="details"
								:inline="detailsField.inline || false"
								:marks="detailsField.marks"
								:value="content.details"
								:placeholder="detailsField.placeholder || 'Add some details'"
								@input="update({ details: $event })"
							/>
					</details>
				</div>
			`
		},

Testimonial block: BLUEPRINT

name: field.blocks.testimonial.name
icon: account
preview: testimonial
fields:
  quote:
    label: Quote
    type: writer
    marks: false
    inline: false
  image:
    label: Company logo or portrait
    type: files
    layout: list
    max: 1
  name:
    type: writer
    inline: true
    marks: false
  jobPosition:
    type: writer
    label: Job Position
    inline: true
    marks: false
  company:
    type: writer
    inline: true
    marks: false

Testimonial block: INDEX.js

panel.plugin("cookbook/block-factory", {
  blocks: {
    testimonial: {
      computed: {
        image() {
          return this.content.image[0] || {};
        },
        bio() {
          return [this.content.jobposition, this.content.company].filter(el => {
            return el != null && el != '';
          }).join(', ');
        },
        quoteField() {
          return this.field("quote");
        }
      },
      template: `
        <blockquote class="k-block-type-testimonial-quote" @dblclick="open">
          <k-writer
            ref="quote"
            :inline="true"
            :marks="false"
            :value="content.quote"
            :placeholder="quoteField.placeholder"
            @input="update({ quote: $event })"
          />
          <footer>
            <figure class="k-block-type-testimonial-voice">
              <img
                v-if="image.url"
                :src="image.url"
                width="48px"
                height="48px"
                :alt="'Photo of ' + content.name"
              >
              <figcaption>
                {{content.name }}<br>
                {{ bio }}
               </figcaption>
            </figure>
          </footer>
        </blockquote>
      `
    },
  }
});
2

Which Kirby version did you use gor your tests?

3

I work with the latest version 3.8.1.1.

4

Hm, I just tested the testimonial and accordion examples in 3.8.8.1, and it works fine for me.

Did you test this in a fresh StarterKit?

5

Thanks for the super fast response! You’re right! When I test it on a fresh starter kit it works as intended. :roll_eyes:

6

What is noticeable with my installation - in contrast to the Plain Starter Kit - is that I get the following message in the console when opening a page in kirby:

[Warning] Plugin is replacing "k-list-input" (index.js, line 1)
[Warning] Plugin is replacing "k-toolbar-link-dialog" (index.js, line 1)
[Warning] Plugin is replacing "k-writer" (index.js, line 1)

Is this perhaps a useful clue?

7

I think I found the cause of the error. When I deactivated the settings for the content security policy, it worked with the self-defined blocks.

:man_shrugging:t2:

1 Like