使用側欄插件在Gutenberg中管理WordPress元數據

本文探討了使用側欄插件在Gutenberg編輯器中管理WordPress元數據。 WordPress的Block編輯器Gutenberg表示帖子作為塊集。雖然可以使用塊來管理元數據，但本文側重於側欄管理頻繁使用。該教程對ReactJ和Redux熟悉，因為Gutenberg大量利用了這些技術。

Gutenberg的核心是一種反應應用。所有編輯器元素（列表標題，內容區域，工具欄和側欄）都是反應組件的。應用狀態存儲在由WordPress數據模塊管理的集中式JavaScript對象（“ Store”）中，該模塊與Redux共享相似之處。這些商店持有發布數據（內容，標題，類別）和全局網站信息（類別，標籤，帖子）。修改這些商店會更新Gutenberg UI，並保存後，WordPress REST API更新數據庫。

但是，Gutenberg默認情況下無法通過這些全球商店管理元數據。儘管傳統PHP Metaboxes仍然起作用，但WordPress建議將它們遷移到使用全球商店的JavaScript方法中，並以統一的體驗進行反應組件。

訪問和修改Gutenberg的類似Redux的商店

要訪問這些商店，請在Gutenberg編輯器中打開瀏覽器的控制台，並使用wp.data 。例如， wp.data.select('core/editor').getBlocks()檢索當前帖子中的塊。 wp.data.select('core/editor').getEditedPostAttribute('title')檢索帖子標題。要更改數據，請使用wp.data.dispatch() 。例如， wp.data.dispatch('core/editor').editPost({title: 'My new title'})更新帖子標題。其他相關商店包括core （全局網站信息）和core/edit-post （編輯UI狀態）。

為Gutenberg側邊欄創建WordPress插件

要添加React側邊欄組件，請創建一個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創建的JavaScript捆綁包。

註冊Gutenberg插件和側欄

JavaScript代碼（在src/index.js中）使用@wordpress/plugins的registerPlugin來註冊插件。 @wordpress/edit-post創建側欄和菜單項以切換它的PluginSidebar和PluginSidebarMoreMenuItem 。

在經典編輯中處理元數據

該教程使用PHP Metaboxes和函數（例如add_meta_box ， get_post_meta ， update_post_meta和wp_verify_nonce ）演示了經典編輯器中的元數據。 Gutenberg處於活動狀態時， __back_compat_meta_box選項隱藏了Metabox。

使用JavaScript管理元數據

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

創建一個反應組件

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

以上是使用側欄插件在Gutenberg中管理WordPress元數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！