使用侧栏插件在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中文网其他相关文章！