Preview plugin for nested blocks

Hi there,

I’m trying to preview the content of my custom blocks following the guide. So far displaying selected fields from the block works fine. The problem comes when the content of the block is another (nested) blocks field. I’ve come as far as to display the raw JSON of the (parent) blocks field, but I don’t know how to further parse it.

panel.plugin("chinochano/block-capsule", {
	blocks: {
		capsule: `
			<k-button icon="dashboard" @click="open">
				{{ content.elements }}
			</k-button>
		`
	}
});

I’ve tried content.elements.toBlocks, content.elements.toBlocks.first, content.elements.first but they all output empty.

I face exactly the same problem

I figured you can get to the content of the nested block field with a computed value

structure is also shown in the docs, but very limited example:

Anyways… this code

panel.plugin("feedthepony/attention-block", {
  blocks: {
    attention: {
      computed: {
        markup() {
          console.log(this.content.text);
        },
      },
      template: `
        <div @click="open">
          {{ markup }}
        </div>
    `,
    },
  },
});


brings you this far:

I dont know if its worth it further looping, parsing, stripping tags etc., it might…

try inspecting the argument el in devtools console

But I’m also looking for a more straightforward solution

More resources:

I guess reading the tutorial and digging more into vue is necessary

to strips tags, you have to use v-html directive:

Thanks for your help, @scsskid! Indeed I had to take the computed value route to properly solve it.

Here’s the code I ended up with. elements is my nexted blocks field, so the code basically loops through all the children of elements and adds their field text to a string (with HTML tags) to be used as placeholder. As @scsskid said, passing the computed value via v-html renders it as HTML.

panel.plugin("chinochano/block-capsule", {
	blocks: {
		capsule: {
			computed: {
				placeholder() {
					var placeholder = '';
					const elements = this.content.elements;
					elements.forEach(el => {
						placeholder += el.content.text;
					});
					return placeholder;
				}
			},
			template: `
				<k-button v-html="placeholder" @click="open"></k-button>
			`
		}
	}
});

It works this way just because all the nested block fields I have contain a required text field. Otherwise I guess you would have to make a more thorough check for what placeholder value to use for each nested blocks field type.

Alternatively, I discovered that I could also do a much simpler preview without computed value if I just output whatever the first nested field contains, like this:

panel.plugin("chinochano/block-capsule", {
	blocks: {
		capsule: `
			<k-button v-html="content.elements[0].content.text" @click="open"></k-button>
		`
	}
});

great find!

Does the job if you only need the content. As soon as you want to make it look good you need to check for the element’s type and write a lot of stuff. Something like content.elements.toBlocks whould be great!!

Upvote here