在WordPress块编辑器中添加自定义欢迎指南

本文详细介绍了创建WordPress插件，该插件可提供应用程序内文档，从而避免了对单独文档的外部链接的需求。该解决方案将有用的指南直接集成到WordPress块编辑器中，在用户积极使用插件时访问。

该插件利用自定义帖子类型（CPT）和模态风格的指南组件。挑战在于将本指南无缝整合到编辑器中而不会破坏用户工作流程。

目标是：该插件是WordPress的GraphQL Server，具有通过自定义块编辑的CPT（“ GraphIQL Client”和“持续的查询选项”）。由于GraphQl查询创建可能很复杂，因此集成指南至关重要。本指南通过文档设置中的面板访问（“欢迎指南”），提供了一个跨多个页面的教程视频和详细说明。

实施步骤：

1. 创建脚本：该过程首先要在编辑器的文档设置中脚手架以注册自定义侧栏面板。由于需要JavaScript构建步骤（ESNEXT/JSX），因此作者最初使用PluginDocumentSettingPanel组件遇到挑战。该解决方案涉及利用@wordpress/create-block软件包脚手架一个块，然后修改生成的代码以注册常规脚本。这允许通过WebPack进行ESNEXT汇编。一个关键细节是将依赖关系添加到wp-edit-post脚本中，以确保wp.editPost变量的正确加载。

2. 面板限制：为防止面板出现在无关的CPT上，作者实现了基于PHP的解决方案。此方法使用get_editing_post_type()检查当前的帖子类型（），如果脚本与目标cpt匹配，则仅注册脚本。这是一种比使用JavaScript有条件渲染面板更有效的方法。

3. 构建指南：指南本身是使用WordPress构建的<guide></guide>组件及其相关的<guidepage></guidepage>分页。作者详细介绍了通过代码搜索和探索Gutenberg Storybook发现此组件的过程。该指南包括一个视频教程（外部托管）和随后的页面，并提供详细的说明。

4. 内容集成：指南的内容是使用<guidepage></guidepage>每个包含HTML的组件可能包括其他自定义组件。作者注意到次要问题，例如视频嵌入限制<guide></guide>组件和CSS改进的需求。

奖金：独立文档访问：

作者演示了如何为文档创建可重复使用的组件。例如，可以在指南和单独的模式中使用CacheControlDescription组件，从而改善用户体验。基于块选择的文档访问按钮的条件渲染可增强可用性。

结论：

此详细的演练有效地展示了WordPress块编辑器中集成的，应用程序内文档系统的开发。作者的经验突出了了解React和WordPress块编辑器在成功插件开发中的架构的重要性。该解决方案为寻求改善用户入职和支持的其他插件开发人员提供了实用且可重复使用的模型。

以上是在WordPress块编辑器中添加自定义欢迎指南的详细内容。更多信息请关注PHP中文网其他相关文章！