为了使用边栏的Settings，我们需要创建一个 block-settings-ui.vue 组件来实现边栏设置。并且增加一个color字段，来修改block的颜色：
block-example/public_srcs/block-admin-register.js
var {register_block_type} = nv.editor.blocks;
var {_defineRemoteComponent, defineComponent} = nv.Vue;
var editor = _defineRemoteComponent("/pandastudio-sample-block-srcs/block-editor-ui.vue")
var settings = _defineRemoteComponent("/pandastudio-sample-block-srcs/block-settings-ui.vue")
export default ({post_type, post_id})=>{
register_block_type("block-example",{
name: "block示例",
description: "示例描述内容",
category: 'design', // 默认的分类有：text/illustration & media/design
icon: defineComponent({
template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 648 712" width="24" height="24"><path d="M360.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z"/></svg>`
}),
attributes: {
title: "",
contents: {},
color: "",
},
editor,
settings,
})
}
block-example/public_srcs/block-settings-ui.vue
<template>
Block示例 SETTINGS
</template>
在编辑器中插入“block示例块”后右侧Block settings栏目显示为如下效果：
接下来我们在 block-settings-ui.vue 文件中增加组件、增加color的控制、以及最重要的：从prop取得数据
block-example/public_srcs/block-settings-ui.vue
<template>
<editorCollapseBox title="颜色" defaultExpanded>
<editorColorSelector v-model:value="$props.block.data.color" />
</editorCollapseBox>
</template>
<script setup>
var {editorColorSelector, editorCollapseBox} = nv.components;
var $props = defineProps({
block: {type: Object}
})
</script>
修改编辑器中的部分，让颜色修改后直接显示出来：
block-example/public_srcs/block-editor-ui.vue
<template>
<div class="block-example-wrapper" :style="{color: $props.block.data.color}">
富文本：
<editorRichText v-model:value="$props.block.data.title" tag="div" nowrap />
嵌套块：
<editorInnerBlocks class="contents" :value="$props.block.data.contents" />
</div>
</template>
<script setup>
var {editorRichText, editorInnerBlocks} = nv.components;
var $props = defineProps({
block: {default: Object}
})
</script>
<style scoped>
.block-example-wrapper, .contents {
border: 1px solid;
}
</style>
至此，block和settings的配合就完成了。
允许设为默认值
4.1.0
在这个示例中：用户每次插入新的模块后颜色都是默认颜色（空字符串）。如果用户在插入模块后选中了一个颜色，然后将这个颜色设为默认值，那么以后再插入相同模块时就可以使用设定好的颜色了。
如何允许用户设定某个(些)值的默认值呢？在注册时使用 setDefaultValues 参数即可。例如：
block-example/public_srcs/block-admin-register.js
var {register_block_type} = nv.editor.blocks;
var {_defineRemoteComponent, defineComponent} = nv.Vue;
var editor = _defineRemoteComponent("/pandastudio-sample-block-srcs/block-editor-ui.vue")
var settings = _defineRemoteComponent("/pandastudio-sample-block-srcs/block-settings-ui.vue")
export default ({post_type, post_id})=>{
register_block_type("block-example",{
name: "block示例",
description: "示例描述内容",
category: 'design',
icon: defineComponent({
template: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 648 712" width="24" height="24"><path d="M360.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z"/></svg>`
}),
attributes: {
title: "",
contents: {},
color: "",
},
setDefaultValues: ['color'], // 注意这里添加了一个color，对应attributes中的color
editor,
settings,
})
}
当开发者在注册block时使用了setDefaultValues参数，那么点击block settings边栏的Block图标后将出现“设置默认值”功能，指定的值将被设置为默认值，下次插入时可使用保存的参数。（无论开发者是否设定此参数，用户都可以按住ctrl+alt（MacOS：command+option）自定义选择想要保存的字段）
哪些值可以设为默认值？
原则上所有attributes中定义过的数据都可以让用户保存为默认值，但并不建议这样去做。例如在上面这个例子中，用户输入的内容title、contents就不应该保存为默认值。只有单纯的配置例如颜色、文字大小等才建议这样去做。
注意事项
在Block迭代时，用户曾经保存过旧版本的数据，如果在新版本的Block中修改了数据结构或数据类型，那么在使用曾经的默认值时可能会出现报错。开发者应该避免这种情况的发生。或在editor参数对应的组件中对数据进行手动修正。