在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中文網其他相關文章！