插件的构建选项面板从来都不是一个一个有趣的任务。通常这是开发人员做的最后一件事，而且大多数开发人员根本不会花太多精力来设计他们的选项面板。但是，您可以使用 Gutenberg 的组件制作一个选项页面吗？
构建选项页面的过程几乎相同。它通常是相同的旧 PHP 代码，很少有插件在这里和那里使用框架。
直到最近，插件开发人员才开始使用 React 和其他现代 UI 框架为其插件构建选项页面，其中 Jetpack 是最著名的例子之一。
在前两部分在本系列文章中，我讨论了如何为 Gutenberg（现在称为块编辑器）构建块。但整体区块体验的精彩之处并不止于前端——博客文章和页面。
我们还可以使用 Gutenberg 的组件制作一个选项页面。虽然听起来很复杂，但这是一个简单的过程，实际上比标准的做事方式花费的时间更少。
这是 Otter（我们的插件）提供的 Gutenberg 块和模板库的屏幕截图，我们在其中使用 Gutenberg 的组件构建了一个选项页面：
简单干净吧？以下是构建此内容的方法：
有哪些成分？
好问题！ Gutenberg 组件只不过是使用抽象层制作的 React 组件，让您感觉好像没有使用 React。然而，从技术上讲，它是 React。
此外，我们将使用 JSX 来编写代码。如果您是 JSX 的新手，您会爱上它。
代码文件和注释
?在继续之前，您可以在此 GitHub 存储库中找到此处使用的所有代码。您可以安装插件查看本教程的最终成品。
在本文中，我不会互换使用 Block Editor 和 Gutenberg。块编辑器，我只是指古腾堡的编辑器部分。
设置插件选项页面
我们项目的设置非常简单。就像人的心脏一样，它由两部分组成：选项页面和构建文件。
首先，我们需要照常注册我们的插件和选项页面：
define('CODEINWP_AWESOME_PLUGIN_VERSION', '1.0.0');
function codeinwp_options_assets () {
wp_enqueue_script('codeinwp-awesome-plugin-script', plugins_url('/', __FILE__).'build/build.js', array('wp-api', 'wp-i18n' , 'wp-components', 'wp-element'), CODEINWP_AWESOME_PLUGIN_VERSION, true);
wp_enqueue_style('codeinwp-awesome-plugin-style', plugins_url('/',__FILE__).'build/build.css ' , array('wp-components'));
}
函数代码inwp_menu_callback(){
echo
