為自定義WordPress塊創建設置UI

>本文演示了與外部API交互的自定義​​WordPress塊創建設置UI。 該塊顯示足球排名，並且設置使用戶可以按國家，聯盟和賽季過濾數據。

>先前的文章涵蓋了塊編輯器和前端中的提取和渲染API數據。本文著重於將設置面板集成在WordPress塊編輯器的控制面板（右側側邊欄）中。 該面板允許用戶自定義塊顯示的數據。

該過程涉及利用WordPress的InspectorControls和核心組件（例如PanelBody>和ComboboxControl）來構建一個用戶友好的接口。 概述了API架構，突出了國家，聯賽，季節和排名數據之間的關係。

關鍵步驟包括：

1. >

   >提取國家數據：本文顯示瞭如何使用和從Rapidapi獲取一個國家的列表，並將結果存儲在狀態中。 useEffect fetch

實現
2. ：

   組件是導入的，用於容納自定義設置UI。 InspectorControls InspectorControls

創建一個自定義組件（
3. ）：單獨的組件管理設置UI，改進代碼組織。該組件使用

   進行分組設置，並進行國家，聯盟和賽季選擇。 LeagueSettings.js允許在選項中搜索。 PanelBody ComboboxControlComboboxControl>處理數據更改：

   ，
>
4. >

   >基於用戶選擇更新組件的狀態，動態過濾API數據。 handleCountryChange>handleLeagueChange>在提交上獲取數據： a“獲取數據”按鈕使用選定的設置觸發API調用，更新顯示的排名。 handleSeasonChange

>文章提供了說明這些步驟的代碼片段，包括將API數據轉換為適合>當前實現允許動態數據獲取，但設置尚未持續。下一篇文章將涵蓋保存這些設置以使用戶選擇永久性。 >

以上是為自定義WordPress塊創建設置UI的詳細內容。更多資訊請關注PHP中文網其他相關文章！