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.
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
andCreate 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 toSnake Case
in bundled files which should match yourAPI 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
Last updated on February 3, 2023