為插件構建選項面板從來都不是一項有趣的任務。通常這是開發人員最後要做的事情，大多數開發人員根本不花太多精力來設計他們的選項面板。但是，您能否使用古騰堡的組件製作一個選項頁面？
構建選項頁面的過程幾乎相同。它通常是相同的舊PHP代碼，並且在這裡和那裡使用框架的插件很少。
直到最近，插件開發人員才開始使用React和其他現代UI框架為其插件構建選項頁面，其中Jetpack是最著名的示例之一。
在之前的兩部分系列文章中，我討論了如何為古騰堡（現在稱為塊編輯器）構建塊。但是，整個區塊體驗的光彩並不止於前端-博客文章和頁面。
我們還可以使用來自Gutenberg的組件製作一個選項頁面。雖然聽起來很複雜，但這是一個簡單的過程，實際上比標準的做事方式需要的時間更少。
這是Otter（我們的插件）提供的Gutenberg塊和模板庫的屏幕截圖，其中我們使用了來自Gutenberg的組件構建了一個選項頁面：
簡單幹凈，對不對？以下是構建此類內容的方法：
這些成分是什麼？
好問題！ Gutenberg組件不過是用抽象層製作的React組件，使您感覺好像不使用React。但是，從技術上講，它是React。
另外，我們將使用JSX編寫代碼。如果您是JSX的新手，那麼您會喜歡它。
代碼文件和注釋
?在繼續之前，您可以在此GitHub存儲庫中找到此處已使用的所有代碼。您可以安裝插件以查看本教程的最終產品。
在本文中，我不會互換使用Block Editor和Gutenberg。通過塊編輯器，我僅指古騰堡的編輯器部分。
設置「插件選項頁面」
我們項目的設置非常簡單。就像人的心臟一樣，它包含兩個部分：選項頁面和構建文件。
首先，我們需要像往常一樣註冊我們的插件和選項頁面：
define（’CODEINWP_AWESOME_PLUGIN_VERSION’，’1.0.0’）;
函數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’））;
}
函數codeinwp_menu_callback（）{
回聲
‘;
}
函數codeinwp_add_option_menu（）{
$ page_hook_suffix = add_options_page（
__（’Awesome Plugin’，’textdomain’），
__（’Awesome Plugin’，’textdomain’），
‘manage_options’，
太棒了
‘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行
codeinwp_add_option_menu函數使用add_options_page將我們的選項頁面掛接到WordPress的「設置」菜單。 codeinwp_menu_callback回調在頁面上列印一個div，我們使用DOM渲染組件。最後，我們使用codeinwp_options_assets函數將腳本/樣式排入選項頁面。
現在讓我們談談我們排隊的腳本。如您在上面的代碼中看到的，build.js將包含我們選項頁面的所有代碼。
經過這麼多代碼後，您的選項頁面應該在WordPress的“設置”菜單下可見。僅使用div它將是空的，其餘的將在以後使用JavaScript添加。
現在，我們需要註冊要在插件的選項頁中放入的插件選項。讓我們為選項頁面註冊兩個選項，一個布爾值和一個字元串：
函數codeinwp_register_settings（）{
register_setting（
‘codeinwp_settings’，
‘codeinwp_analytics_status’，
數組（
‘類型’=>’布爾值’，
‘show_in_rest’=>是，
‘默認’=>否，
）
）;
register_setting（
‘codeinwp_settings’，
‘codeinwp_analytics_key’，
數組（
‘類型’=>’字元串’，
‘show_in_rest’=>是，
）
）;
}
add_action（’init’，’codeinwp_register_settings’）;
- 參考：index.php的38-59行
那就是我們需要的所有PHP代碼。現在讓我們談談JavaScript方面的內容。
在古騰堡中進行React渲染
在塊編輯器中，您不需要處理塊的渲染。您只需要註冊它們，其餘的就由編輯器處理。
使用古騰堡（Gutenberg），React被抽象為wp-element包，可用於完成React和ReactDOM的所有工作。
讓我們嘗試將示例標題呈現到我們的選項頁面。我們需要像從ReactDOM.render中一樣，從wp-element包中導入渲染器，以渲染我們的標題：
/ **
* WordPress依賴項
* /
const {render} = wp.element;
渲染（
你好，世界
，
document.getElementById（’codeinwp-awesome-plugin’）
）;
- 參考：index.js的第174行-177行
從古騰堡（Gutenberg）渲染組件
就像我們使用wp-element中的render函數一樣，我們也可以在選項頁面上使用其他組件。與我們在第一個Gutenberg教程中使用PanelBody組件的方式類似，我們還將在選項頁面中使用它：
/ **
* WordPress依賴項
* /
const {__} = wp.i18n;
const {
PanelBody，
PanelRow，
切換控制項
} = wp.components;
/>
- 參考：index.js的第85 – 169行
這些組件看起來不錯，但是它們不能單獨工作。當選項頁面上的選項更改時，我們需要某種機制來獲取和更改資料庫中的選項。
國家管理
我們可以在componentDidMount生命周期中使用WordPress的Backbone API來獲取和更新值作為組件的狀態。這使我們不必編寫REST路由或使用AJAX。
constructor（）{
超級（…參數）;
this.state = {
isAPILoaded：否，
isAPISaving：否，
codeinwp_analytics_status：否，
codeinwp_analytics_key：」
};
}
非同步componentDidMount（）{
wp.api.loadPromise.then（（）=> {
this.settings = new wp.api.models.Settings（）;
如果（false === this.state.isAPILoaded）{
this.settings.fetch（）。then（response => {
this.setState（{
codeinwp_analytics_status：布爾值（response.codeinwp_analytics_status），
codeinwp_analytics_key：response.codeinwp_analytics_key，
isAPILoaded：true
}）;
}）;
}
}）;
}
- 參考：index.js的第30-57行
現在，componentDidMount生命周期從資料庫中獲取選項並將其設置為狀態。我們可以在控制項中使用這些狀態來設置值。
最後，我們需要編寫一個onChange函數以將狀態更新到資料庫。
changeOptions（選項，值）{
this.setState（{isAPISaving：true}）;
const model = new wp.api.models.Settings（{
// eslint-disable-next-line camelcase
[option]：值
}）;
model.save（）。then（response => {
this.setState（{
[option]：回應[option]，
isAPISaving：否
}）;
}）;
}
- 參考：index.js的第59 – 73行
將changeOptions函數綁定到該函數後，即可用於更改狀態。像這樣：
/>
- 參考：index.js的第132 – 137行
這就是您可以使用Gutenberg中的組件創建插件選項頁面的方法！可能性是無限的。
在我的代碼示例中，我還向選項頁面添加了輸入欄位和頁腳部分：
但是，使用古騰堡組件並不是全部。您還可以使用第三方React庫，例如使用帶有react-chartjs2軟體包的圖表添加到頁面中。
古騰堡（Gutenberg）已成為WordPress核心不可或缺的一部分，並且將繼續存在。它帶來了我們開發人員可以在我們的項目中使用的許多工具。
例如，在ThemeIsle，我們一直在使用WordPress自定義程序中來自Gutenberg的組件來增強Neve主題的體驗。
那麼，您是否嘗試過在編輯器之外使用Gutenberg組件？讓我們在評論中知道！
…
別忘了加入我們的速成班，以加快WordPress網站的速度。通過一些簡單的修復，您甚至可以減少50-80％的載入時間：
Karol K的布局，演示和編輯。