Editor Blocks

Enhance your articles with custom blocks

Editor blocks let you make pieces of content that you can use over and over again in the article body. You can style these blocks using Karbon or another tool you like.

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