如何在插件中添加侧边栏。侧栏是编辑器最右边的区域。您的插件可以在InspectorControls（齿轮图标）旁边添加一个可展开的附加图标。
注意：本教程涵盖了一个自定义侧边栏，如果您希望向侧边栏添加控件，请参阅块工具栏和设置侧边栏
本教程假设您有一个现有的插件设置，并且已经准备好添加PHP和JavaScript代码。请参阅JavaScript入门介绍WordPress插件以及如何使用JavaScript扩展块编辑器的教程。
第一步是告诉编辑器，有一个新插件将有自己的侧栏。使用寄存器插件,插件提要栏、和创建元素公共设施由@wordpress/插件,@wordpress/编辑器、和反应包。
将以下代码添加到名为插件-侧边栏.js并将其保存在插件的目录中：
（功能（wp，React）{var el=反应创建元素；var寄存器插件=wp.plugins.registerPlugin；var插件边栏=wp.editor。插件边栏；寄存器插件（'my-plugin-sidebar'{渲染：函数（）{返回el(插件提要栏，{name:'my-plugin-sidebar'，icon:'管理员发布'，title:'我的插件侧边栏'，},'元字段');},} );}）（window.wp，window.React）；
要使此代码工作，这些实用程序需要在浏览器中可用，因此必须指定wp-插头,wp-edit-post文件、和反应作为脚本的依赖项。
以下是注册脚本并指定依赖项的PHP代码：
<?php程序/*插件名称：边栏插件*/函数sidebar_plugin_register（）{wp_注册_脚本('插件侧边栏-js'，plugins_url（'plugin-sidebar.js'，__FILE__），数组（“wp-plugins”、“wp-editor”、“react”）);}add_action（'init'，'sidebar_plugin_register'）；函数sidebar_plugin_script_enqueue（）{wp_enqueue_script（'plugin-sidebar-js'）；}add_action（'enqueue_block_editor_assets'，'sidebar_plugin_script_enqueue'）；
在安装并激活这个插件后，编辑器的右上角有一个类似于图钉的新图标。单击后，插件的侧边栏将打开：
侧边栏启动并运行后，下一步是用必要的组件和基本样式填充它。
要可视化和编辑元字段值，您将使用输入组件。这个@wordpress/组件包中包含许多可供您重用的组件，特别是文本控件旨在创建输入字段：
（函数（wp）{var el=反应创建元素；var寄存器插件=wp.plugins.registerPlugin；var插件边栏=wp.editor。插件边栏；var TextControl=wp.components。文本控件；寄存器插件（'my-plugin-sidebar'{渲染：函数（）{返回el(插件提要栏，{name:'my-plugin-sidebar'，icon:'管理员发布'，title:'我的插件侧边栏'，},埃尔(“div”，{className:'plugin-sidebar-content'}，el（文本控件{label:'元块字段'，value:'初始值'，onChange：功能（内容）{console.log（'内容更改为'，content）；},} )));},} );}）（window.wp）；
更新插件-侧边栏.js使用这个新代码。请注意，它使用了一个名为wp组件来自@wordpress/组件包裹。确保添加wp-组件中的依赖项wp_register_script（注册脚本）函数。
该代码介绍了：
- CSS类
插件边栏内容到div公司元素到目标样式，
- 一
文本控件组件而不是平面'元字段'文本。
有了新的CSS类，您可以添加一些样式。在插件目录中创建一个名为插件侧边栏.css使用以下内容进行填充：
边栏内容中的.plugin{填充：16px；}
注册脚本并将其排队以加载排队块编辑器资产在JavaScript文件旁边。
更改后，PHP代码将如下所示：
<?php程序/*插件名称：边栏示例*/函数sidebar_plugin_register（）{wp_注册_脚本('插件侧边栏-js'，plugins_url（'plugin-sidebar.js'，__FILE__），阵列(“反应”，“wp-plugins”，“wp-editor”，'wp组件'));wp_注册表样式('插件侧边栏-css'，plugins_url（'plugin-sidebar.css'，__FILE__）);}add_action（'init'，'sidebar_plugin_register'）；函数sidebar_plugin_script_enqueue（）{wp_enqueue_script（'plugin-sidebar-js'）；wp_enqueue_style（'plugin-sidebar-css'）；}add_action（'enqueue_block_editor_assets'，'sidebar_plugin_script_enqueue'）；
重新加载编辑器并打开侧栏：
这段代码目前还不允许用户存储或检索数据，因此接下来的步骤将重点关注如何将其连接到元块字段。
使用中的字段后置元数据表，使用注册表_成本_元数据.函数创建一个名为侧栏_插件_元数据_块字段.
注意：此字段需要对REST API可用，因为这是块编辑器访问数据的方式。
在插件中添加PHP代码初始化回调函数：
register_post_meta（'post'，'sidebar_plugin_meta_block_field'，数组(“show_in_rest”=>真，“single”=>真，“type”=>“string”，) );
要进行确认，请查询块编辑器存储以查看字段是否已加载。实现后，重新加载编辑器页面并打开浏览器的开发人员控制台。在控制台中使用此JavaScript片段确认：
wp.data.select（'core/editor'）.getCurrentPost（）.meta；
该函数将返回一个包含您注册的元字段的对象。
如果代码返回未定义确保您的支柱类型支持自定义字段。无论何时注册帖子或使用add_post_type_support函数.
有了编辑器存储中可用的字段，现在可以将其显示在UI中。我们将输入控件提取到函数中，以便在添加功能时保持代码干净。
（函数（wp）{var el=反应创建元素；var寄存器插件=wp.plugins.registerPlugin；var插件边栏=wp.editor。插件边栏；var TextControl=wp.components。文本控件；var MetaBlockField=函数（）{return el（文本控件{label:'元块字段'，value:'初始值'，onChange：功能（内容）{console.log（'内容已更改为'，内容）；},} );};寄存器插件（'my-plugin-sidebar'{渲染：函数（）{返回el(插件提要栏，{name:'my-plugin-sidebar'，icon:'管理员发布'，title:'我的插件侧边栏'，},埃尔(“div”，{className:'plugin-sidebar-content'}，el（元块字段）));},} );}）（window.wp）；
我们想初始化元块字段值为的组件侧栏_插件_元数据_块字段，并在该值更改时保持更新。
这个使用Select函数用于在组件加载时获取数据，并在数据更改时进行更新。以下是使用更新的代码使用Select:
（函数（wp）{var el=反应创建元素；var寄存器插件=wp.plugins.registerPlugin；var插件边栏=wp.editor。插入式边栏；var文本=wp组件。文本控件；var useSelect=wp.data.useSelect；var MetaBlockField=函数（）{var metaFieldValue=useSelect（函数（select）{return select（'core/editor'）.getEditedPostAttribute(“meta”)['侧栏_plugin_meta_block_field']；}, [] );return el（文本{label:'元块字段'，value:metaFieldValue，onChange：功能（内容）{console.log（'内容已更改为'，content）；},} );};寄存器插件（'my-plugin-sidebar'{渲染：函数（）{返回el(插件提要栏，{name:'my-plugin-sidebar'，icon:'管理员发布'，title:'我的插件侧边栏'，},埃尔(“div”，{className:'plugin-sidebar-content'}，el（元块字段）));},} );}）（window.wp）；
这个wp.data.use选择函数来自@文字新闻/数据包，所以wp-数据需要作为依赖项添加到wp_注册_脚本PHP中的函数。
注：获取编辑后的PostAttribute调用用于检索帖子的最新值，包括尚未保存的用户版本。
通过更新代码、重新加载并打开侧边栏来确认它是否正常工作。输入的内容不再初始值但是是一个空字符串。用户还不能键入值，但如果存储中的值发生变化，您可以检查组件是否已更新。打开浏览器控制台，执行
wp.数据.dispatch（“核心/编辑器”）.editPost（{meta:{sidebar_plugin_meta_block_field:'hello world！'}}）；
您可以观察输入组件中的内容变化。
最后一步是在输入内容更改时更新元字段。
这个使用Dispatch函数将存储名称作为其唯一参数，并返回可用于更新存储的方法，在本例中，我们将使用编辑帖子
（函数（wp）{var el=反应创建元素；var寄存器插件=wp.plugins.registerPlugin；var插件边栏=wp.editor。插件边栏；var TextControl=wp.components。文本控件；var useSelect=wp.data.useSelect；var useDispatch=wp.data.useDispitch；var MetaBlockField=函数（属性）{var metaFieldValue=useSelect（函数（select）{return select（'core/editor'）.getEditedPostAttribute(“meta”)['侧栏_plugin_meta_block_field']；}, [] );var editPost=useDispatch（'core/editor'）.editPost；return el（文本控件{label:'元块字段'，值：metaFieldValue，onChange：功能（内容）{编辑帖子（{meta:{sidebar_plugin_meta_block_field:content}，} );},} );};寄存器插件（'my-plugin-sidebar'{渲染：函数（）{返回el(插件提要栏，{name:'我的插件侧边栏'，icon:'管理帖子'，title:'我的插件侧边栏'，},埃尔(“div”，{className:'plugin-sidebar-content'}，el（元块字段）));},} );}）（window.wp）；
更新后，当用户键入时，输入控件调用编辑帖子并在每次击键时更新编辑器存储。
更新JavaScript，加载侧栏，并在输入字段中键入。您可以通过在输入控件中键入内容并在浏览器的开发控制台中执行JavaScript片段来确认它已保存：
wp.data.select（'core/editor'）.getEditedPostAttribute（'meta'）['侧栏_plugin_meta_block_field'];
显示的消息应该是您在输入中键入的内容。
保存帖子时，可以通过在保存后重新加载并确认输入控件已用上次键入的值初始化来确认它是否正确存储在数据库中。
使用的文档@wordpress/数据包.
本指南中使用的功能：
现在您有了一个自定义侧边栏，可以使用它进行更新后置元数据内容。
有完整的示例，请下载插件侧边栏示例来自区块开发示例存储库。
如果您在编辑器“首选项”的“面板”页面中启用了“自定义字段”（通过右上角的三个点），在本例中是与TextControl同名的字段侧栏_插件_元数据_块字段，也将显示在编辑器窗口底部的自定义字段面板中。这两个字段可以访问相同的元属性。
保存post时，首先保存TextControl中的值，然后保存自定义字段中的值。因此，如果您更改TextControl中的值，那么最终保存的仍然是自定义字段中的值。
如果未启用自定义字段，则不存在此问题。
如果您需要启用自定义字段并在侧栏中使用post meta，则有两种可能的解决方案：
- 在元字段的名称前面加下划线，因此上例中的名称为
_边栏_ lugin_meta_block_field。这表明帖子元应该被视为私有的，这样它就不会在帖子的“自定义字段”部分中可见。使用此解决方案，除非添加授权回调属性设置为参数数组传递给注册表_成本_元数据最终返回的函数真的。请参阅参数中的文档后置元数据第页了解更多信息。
- 在TextControl的
on更改函数，以值字段文本区域为目标，并将其中的值设置为与TextControl元字段中的值相同。然后，该值在两个位置都是相同的，因此可以确保，如果在TextControl中更改了该值，它仍将保存到数据库中。
return el（文本控件{label:'元块字段'，值：metaFieldValue，onChange：功能（内容）{编辑帖子（{meta:{sidebar_plugin_meta_block_field:content}})document.querySelector（{the-value-textarea}）.innerHTML=内容；},} );