Wordpress 如何将自定义控件添加到页面？

我需要在Gutenberg的页面编辑表单中添加一个复选框，而不使用第三方插件，如ACF。我做了一些教程，包括官方Wordpress页面上的教程，但它的行为与我需要的不同

我已经在侧边栏中添加了元素（我用toogle替换了复选框，但它将是相同的），如果单击不更改其状态，元素本身不工作，保存页面时也不能存储该值

以前我会用metabox解决这个问题，但是它不再与这个版本的Wordpress兼容

在保存页面时，我应该修改代码中的哪些内容来更改组件的状态，然后将其存储在数据库中

我试过了，效果不错，但这不是我需要的：

我试着这样做：

导出类MyPluginSidebar{
建造商（wp）{
常数{{{}=wp.i18n；
常数{
插件插件，
PlugInsideBarmoreNuItem
}=wp.editPost；
常数{
小组委员会，
文本控件，
切换控制
}=可湿性粉剂组分；
常数{
组成部分
碎片
}=wp.element；
const{withSelect}=wp.data；
const{registerPlugin}=wp.plugins；
const{with state}=wp.compose；
类Hello_Gutenberg扩展组件{
构造函数（）{
超级（…参数）；
此.state={
键：“‘你好’‘古腾堡’字段”，
值：“”，
}
apiFetch（{path:`/wp/v2/posts/${this.props.postId}`，方法：'GET'}）(
（数据）=>{
log（'apiFetch data'，data.meta）；
这个.setState（{
值：data.meta.\u hello\u gutenberg\u字段
} );
返回数据；
},
（错误）=>{
log（'wp-api获取错误'，err）；
返回错误；
}
);
}
静态getDerivedStateFromProps（下一步，状态）{
如果（（nextrops.isPublishing | | nextrops.isSaving）和&！nextrops.isAutoSaving）{
apiRequest（{path:`/hello gutenberg/v1/update meta？id=${nextProps.postId}`，方法：'POST'，数据：state}）(
（数据）=>{
返回数据；
},
（错误）=>{
返回错误；
}
);
}
}
render（）{
var hasFixedBackground=true；
返回(
{{（“侧栏标题”）}
this.setState（（state）=>（{hasFixedBackground:！state.hasFixedBackground}））}
/>
)
}
}
//将post ID传递给插件类
//防止在每次状态更改时保存，仅在保存后保存
const HOC=withSelect（（select，{forceIsSaving}）=>{
常数{
getCurrentPostId，
isSavingPost，
iPublishingPost，
我是自动储蓄站，
}=选择（‘核心/编辑器’）；
返回{
postId:getCurrentPostId（），
isSaving:forceIsSaving | | isSavingPost（），
isAutoSaving:isAutosavingPost（），
isPublishing:isPublishingPost（），
};
}）（你好，古腾堡）；
registerPlugin（'hello gutenberg'{
图标：“管理站点”，
呈现：HOC，
} );
}
}

这段代码注册了边栏，添加了控件，但没有改变他的状态，也没有保存在数据库中

欢迎任何帮助

---

问候

如果要保存以后添加到gutenberg块上的数据，需要使用addFilter。我可以向您展示我正在使用的示例：

wp.hooks.addFilter('blocks.registerBlockType', 'custom/filter', function(x,y) {
    if(x.hasOwnProperty('attributes')){
        x.attributes.background_image = {
            type: 'string',
            default: ''
        };
    }
    return x;
});

可能重复的

wp.hooks.addFilter('blocks.registerBlockType', 'custom/filter', function(x,y) {
    if(x.hasOwnProperty('attributes')){
        x.attributes.background_image = {
            type: 'string',
            default: ''
        };
    }
    return x;
});