本文探討了使用側(cè)欄插件在Gutenberg編輯器中管理WordPress元數(shù)據(jù)。 WordPress的Block編輯器Gutenberg表示帖子作為塊集。雖然可以使用塊來(lái)管理元數(shù)據(jù)，但本文側(cè)重於側(cè)欄管理頻繁使用。該教程對(duì)ReactJ和Redux熟悉，因?yàn)镚utenberg大量利用了這些技術(shù)。

Gutenberg的核心是一種反應(yīng)應(yīng)用。所有編輯器元素（列表標(biāo)題，內(nèi)容區(qū)域，工具欄和側(cè)欄）都是反應(yīng)組件的。應(yīng)用狀態(tài)存儲(chǔ)在由WordPress數(shù)據(jù)模塊管理的集中式JavaScript對(duì)象（“ Store”）中，該模塊與Redux共享相似之處。這些商店持有發(fā)布數(shù)據(jù)（內(nèi)容，標(biāo)題，類別）和全局網(wǎng)站信息（類別，標(biāo)籤，帖子）。修改這些商店會(huì)更新Gutenberg UI，並保存後，WordPress REST API更新數(shù)據(jù)庫(kù)。

但是，Gutenberg默認(rèn)情況下無(wú)法通過(guò)這些全球商店管理元數(shù)據(jù)。儘管傳統(tǒng)PHP Metaboxes仍然起作用，但WordPress建議將它們遷移到使用全球商店的JavaScript方法中，並以統(tǒng)一的體驗(yàn)進(jìn)行反應(yīng)組件。

訪問(wèn)和修改Gutenberg的類似Redux的商店

要訪問(wèn)這些商店，請(qǐng)?jiān)贕utenberg編輯器中打開(kāi)瀏覽器的控制臺(tái)，並使用wp.data 。例如， wp.data.select('core/editor').getBlocks()檢索當(dāng)前帖子中的塊。 wp.data.select('core/editor').getEditedPostAttribute('title')檢索帖子標(biāo)題。要更改數(shù)據(jù)，請(qǐng)使用wp.data.dispatch() 。例如， wp.data.dispatch('core/editor').editPost({title: 'My new title'})更新帖子標(biāo)題。其他相關(guān)商店包括core （全局網(wǎng)站信息）和core/edit-post （編輯UI狀態(tài)）。

為Gutenberg側(cè)邊欄創(chuàng)建WordPress插件

要添加React側(cè)邊欄組件，請(qǐng)創(chuàng)建一個(gè)WordPress插件。 This involves setting up a plugin folder (eg, gutenberg-sidebar ), creating a plugin.php file (the plugin's entry point), and using npm to manage JavaScript dependencies ( @wordpress/scripts , @wordpress/edit-post , @wordpress/plugins , @wordpress/i18n , @wordpress/components , @wordpress/data ). plugin.php招募了npm run build創(chuàng)建的JavaScript捆綁包。

註冊(cè)Gutenberg插件和側(cè)欄

JavaScript代碼（在src/index.js中）使用@wordpress/plugins的registerPlugin來(lái)註冊(cè)插件。 @wordpress/edit-post創(chuàng)建側(cè)欄和菜單項(xiàng)以切換它的PluginSidebar和PluginSidebarMoreMenuItem 。

在經(jīng)典編輯中處理元數(shù)據(jù)

該教程使用PHP Metaboxes和函數(shù)（例如add_meta_box ， get_post_meta ， update_post_meta和wp_verify_nonce ）演示了經(jīng)典編輯器中的元數(shù)據(jù)。 Gutenberg處?kù)痘顒?dòng)狀態(tài)時(shí)， __back_compat_meta_box選項(xiàng)隱藏了Metabox。

使用JavaScript管理元數(shù)據(jù)

要使用JavaScript管理Gutenberg中的自定義字段（例如_myprefix_text_metafield ），請(qǐng)使用show_in_rest: true ， sanitize_callback和auth_callback使用register_meta進(jìn)行註冊(cè)字段，以允許REST API更新。使用wp.data.select('core/editor').getEditedPostAttribute('meta')檢索和wp.data.dispatch('core/editor').editPost({meta: {_myprefix_text_metafield: 'new value'}})

創(chuàng)建一個(gè)反應(yīng)組件

使用TextControl @wordpress/components的PanelBody創(chuàng)建React組件（ PluginMetaFields ）。從@wordpress/data withDispatch組件withSelect到類似Redux的商店，啟用數(shù)據(jù)檢索和更新。 onChange事件將向商店派遣更新。最後，添加了一個(gè)ColorPicker組件，以使用@wordpress/components中的其他組件進(jìn)行演示。完整的代碼可在GitHub上找到。

以上是使用側(cè)欄插件在Gutenberg中管理WordPress元數(shù)據(jù)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！