Editor Blocks

Editor blocks allow the creation of reusable chunks of content types that are inserted within an article’s main body text. Data from these blocks can then be styled using Karbon or another framework of your choice.

Example Usage: Article Affiliate Links

Want to create an affiliate layout that matches your brand? Editor Blocks are a great way to build this.

Protip: this is also great for creating CTAs

Set editor block field value

Go to content-model

Click article block

Name your block, please remeber the API Identifier , we will need to use the same name in Karbon for editor block

Click Add Field and select your field type

Input the field name we have set in <block name>.vue

Click create field and Create new Article Block

Using editor block in Editor

Go to Article page

You will see added block test_block

Click test_block

If you have set the content model, you can click test_block and change type value

Creating a editor block

Go to /templates/editor-blocks directory

Create a layout file named <block name>.vue, block name will be automatically converted to Snake Case in bundled files which should match your API Identifier.

Change layout file like below, and we set a field named type

// Block named 'test-block'

<script setup>
const type = useField('test_block.type', FieldType.Text)
</script>

<template>
  <div>
		<div>test custom field {{ type }}</div>
  </div>
</template>

Run yarn karbon and files will automatically uploaded