为插件构建选项面板从来都不是一件有趣的事情。这通常是开发人员在最后做的事情，大多数开发人员在设计选项面板时并没有投入太多精力。但是你能用 Gutenberg 的组件制作一个选项页面吗？
构建选项页面的过程几乎千篇一律。通常是相同的旧 PHP 代码，以及这里或那里使用框架的几个插件。
直到最近，插件开发者才开始使用 React 和其他现代 React UI 框架 为他们的插件构建选项页面，Jetpack 是最著名的例子之一。
在前面的两篇系列文章中，我讨论了如何使用 Block API 为 Gutenberg 构建块，也就是现在所说的块编辑器，我们还探索了 Gutenberg 的另一个组成部分——Gutenberg 的侧边栏 API。但整个块体验的精彩之处并不止于前端——博客文章和页面。
我们也可以用 Gutenberg 的组件制作选项页面。虽然这听起来很复杂，但实际上这是一个简单的过程，比标准做法需要的时间更少。
这是 Otter 的 Gutenberg 块和模板库（我们的插件）的截图，我们用 Gutenberg 的组件构建了一个选项页面：
简单干净，对吧？以下是构建此类页面的方法：
这些组件是什么？
好问题！Gutenberg 组件其实就是 React 组件，只是加了一层抽象层，让你感觉像是在使用 React。但从技术上来说，它就是 React。
此外，我们将使用 JSX 来编写代码。如果你刚接触 JSX，你会爱上它的。
代码文件 + 注释
👉 在继续之前，你可以在这里找到我们使用的所有代码，存放在这个 GitHub 仓库中。你可以安装这个插件来查看本教程的最终效果。
在本文中，我不会交替使用 Block Editor 和 Gutenberg。我所说的 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' ) ); }
function codeinwp_menu_callback() { echo '
'; }function codeinwp_add_option_menu() { $page_hook_suffix = add_options_page( __( 'Awesome Plugin', 'textdomain' ), __( 'Awesome Plugin', 'textdomain' ), 'manage_options', 'awesome', 'codeinwp_menu_callback' );
add_action( "admin_print_scripts-{$page_hook_suffix}", 'codeinwp_options_assets' );}
add_action( 'admin_menu', 'codeinwp_add_option_menu' );
- 参考资料：[*index.php* 第 13-36 行](https://github.com/HardeepAsrani/my-awesome-plugin/blob/master/index.php#L13-L36)
`codeinwp_add_option_menu` 函数使用 [`add_options_page`](https://developer.wordpress.org/reference/functions/add_options_page/) 将我们的选项页面挂钩到 WordPress 的设置菜单中。`codeinwp_menu_callback` 回调在页面上打印一个 div，我们使用 DOM 在其中渲染组件。最后，我们使用 `codeinwp_options_assets` 函数将脚本/样式入队到选项页面。
现在让我们讨论一下我们入队的脚本。如您在上方代码中看到的，*build.js* 将包含我们选项页面的所有代码。
经过这么多代码后，您的选项页面应该可以在 WordPress 的**设置**菜单下看到。它将是空的，只有一个 div，其余部分稍后将由 JavaScript 添加。
现在我们需要注册我们将要放在插件选项页面中的插件选项。让我们为选项页面注册两个选项，一个布尔值和一个字符串：
function codeinwp_register_settings() { register_setting( 'codeinwp_settings', 'codeinwp_analytics_status', array( 'type' => 'boolean', 'show_in_rest' => true, 'default' => false, ) );
register_setting(
'codeinwp_settings',
'codeinwp_analytics_key',
array(
'type' => 'string',
'show_in_rest' => true,
)
);}
add_action( 'init', 'codeinwp_register_settings' );
- 参考资料：[*index.php* 第 38-59 行](https://github.com/HardeepAsrani/my-awesome-plugin/blob/master/index.php#L38-L59)
这就是我们需要的全部 PHP 代码。现在让我们讨论一下 JavaScript 方面的内容。
## Gutenberg 中的 React 渲染
在块编辑器中，您不需要处理块的渲染。您只需要注册它们，其余的由编辑器负责。
使用 Gutenberg，React 被抽象为 `wp-element` 包，可以用来完成 React 和 ReactDOM 所做的所有事情。
让我们尝试在我们的选项页面上渲染一个示例标题。我们需要从 wp-element 包中导入 render，类似于 [ReactDOM.render](https://reactjs.org/docs/react-dom.html#render)，来渲染我们的标题：
/**
- WordPress dependencies */ const { render } = wp.element;
render(
Hello World
, document.getElementById( 'codeinwp-awesome-plugin' ) );
- 参考资料：[*index.js* 第 174-177 行](https://github.com/HardeepAsrani/my-awesome-plugin/blob/master/src/index.js#L174-L177)
## 从 Gutenberg 渲染组件
就像我们使用 wp-element 的 render 函数一样，我们也可以在选项页面上使用其他组件。类似于我们在[第一个 Gutenberg 教程](https://wpshout.com/adapt-your-plugin-for-gutenberg-block-api/)中使用 PanelBody 组件的方式，我们也将在选项页面中使用它：
/**
- WordPress dependencies */ const { __ } = wp.i18n;
const { PanelBody, PanelRow, ToggleControl } = wp.components;
<PanelBody title={ __( '设置' ) }
<PanelRow>
<ToggleControl
label={ __( '追踪管理员用户？' ) }
help={ '您是否要追踪已登录管理员账户的查看情况？' }
checked={ true }
onChange={ () => {} }
/>
</PanelRow>这些组件看起来很不错，但它们无法单独工作。我们需要某种机制来在选项页上更改时获取和更改数据库中的选项。
状态管理
我们可以在 componentDidMount 生命周期 中使用 WordPress 的 Backbone API 来获取和更新组件状态的值。这样我们就不需要编写 REST 路由或使用 AJAX 了。
constructor() {
super( ...arguments );
this.state = {
isAPILoaded: false,
isAPISaving: false,
codeinwp_analytics_status: false,
codeinwp_analytics_key: ''
};
}
async componentDidMount() {
wp.api.loadPromise.then( () => {
this.settings = new wp.api.models.Settings();
if ( false === this.state.isAPILoaded ) {
this.settings.fetch().then( response => {
this.setState({
codeinwp_analytics_status: Boolean( response.codeinwp_analytics_status ),
codeinwp_analytics_key: response.codeinwp_analytics_key,
isAPILoaded: true
});
});
}
});
}
- 参考资料：index.js 第 30 – 57 行
现在 componentDidMount 生命周期从数据库中获取选项并将它们设置到状态中。我们可以在控件中使用这些状态来设置值。
最后，我们需要编写一个 onChange 函数来将状态更新到数据库。
changeOptions( option, value ) {
this.setState({ isAPISaving: true });
const model = new wp.api.models.Settings({
// eslint-disable-next-line camelcase
[option]: value
});
model.save().then( response => {
this.setState({
[option]: response[option],
isAPISaving: false
});
});
}
- 参考资料：index.js 第 59 – 73 行
一旦你 将其绑定到 this，changeOptions 函数就可以用于更改状态。像这样：
<ToggleControl
label={ __( '追踪管理员用户？' ) }
help={ '您是否要追踪已登录管理员账户的查看情况？' }
checked={ this.state.codeinwp_analytics_status }
onChange={ () => this.changeOptions( 'codeinwp_analytics_status', ! this.state.codeinwp_analytics_status ) }
/>
这就是如何使用 Gutenberg 组件创建插件选项页！使用这种方法有无限的可能性。
在我的 代码示例 中，我还为选项页添加了一个输入字段和页脚部分：
但使用 Gutenberg 组件并不是全部；你还可以使用第三方 React 库，例如使用 react-chartjs2 包在页面中添加图表。
Gutenberg 已成为 WordPress 核心不可分割的一部分，它将一直存在。它为我们开发者带来了许多可以在项目中使用工具。
在 Themeisle，我们一直在 WordPress 自定义器中使用 Gutenberg 组件来增强体验，例如在 Neve 主题中。
进一步阅读：
那么，您是否尝试过在编辑器外部使用 Gutenberg 组件？在评论中告诉我们！
…
别忘了参加我们的 WordPress 网站加速速成课程。继续往下看：
如何加速您的 WordPress 网站
通过一些简单的修复，您可以将加载时间减少甚至 50-80% 🚀
通讯表单 – 侧边栏
名 *
您的邮箱 *
立即订阅！
如果你是人类，请留空此字段。
Δ
输入您的邮箱，即表示您订阅了我们的每周通讯。您可以随时更改主意。我们尊重您的收件箱和隐私。
