Editor Blocks

Enhance your articles with custom 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.

Notion image

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

  1. Go to content-model
  1. Click article block
    1. Notion image
  1. Name your block, please remeber the API Identifier , we will need to use the same name in Karbon for editor block
    1. Notion image
  1. Click Add Field and select your field type
    1. Notion image
  1. Input the field name we have set in <block name>.vue
    1. Notion image
  1. Click create field and Create new Article Block
Notion image

Using editor block in Editor

  1. Go to Article page
  1. You will see added block test_block
    1. Notion image
  1. Click test_block
  1. If you have set the content model, you can click test_block and change type value
    1. Notion image

Creating a editor block

  1. Go to /templates/editor-blocks directory
  1. 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.
  1. Change layout file like below, and we set a field named type
    1. // Block named 'test-block'
      <script setup>
      const type = useField('test_block.type', FieldType.Text)
      		<div>test custom field {{ type }}</div>
  1. Run yarn karbon and files will automatically uploaded

Last updated on February 3, 2023