カスタムWordPressブロックの設定UIを作成します

この記事では、外部APIと対話するカスタムWordPressブロックの設定UIを作成することを示しています。 ブロックにはフットボールのランキングが表示され、設定により、ユーザーは国、リーグ、シーズンごとにデータをフィルタリングできます。

以前の記事では、ブロックエディターとフロントエンドでAPIデータのフェッチとレンダリングをカバーしました。この記事では、WordPressブロックエディターのコントロールパネル（右側のサイドバー）内に設定パネルの統合に焦点を当てています。 このパネルを使用すると、ユーザーはブロックによって表示されるデータをカスタマイズできます。

このプロセスでは、

や

などのWordPressの

>およびコアコンポーネントを活用して、ユーザーフレンドリーなインターフェイスを構築することが含まれます。 APIアーキテクチャの概要が概説されており、国、リーグ、季節、ランキングデータ間の関係を強調しています。 InspectorControls重要な手順には次のようなものが含まれます PanelBody ComboboxControl

国のデータの取得：

この記事では、

および
1. を使用してRapidapiの国のリストを取得する方法を示し、結果を状態に保存します。

   useEffectの実装fetch：

コンポーネントはインポートされ、カスタム設定UIを収容するために使用されます。

2. InspectorControlsカスタムコンポーネントの作成（）：個別のコンポーネントが設定UIを管理し、コード組織を改善します。このコンポーネントは、グループ設定にInspectorControlsを使用し、国、リーグ、シーズンの選択には

   を使用します。
では、オプション内で検索することができます。

3. LeagueSettings.jsデータの変更の処理：PanelBody、ComboboxControl、ComboboxControl、

   のような関数ユーザーの選択に基づいてコンポーネントの状態を更新し、APIデータを動的にフィルタリングします。

4. 送信に関するデータの取得：「データの取得」ボタンは、選択した設定を使用してAPI呼び出しをトリガーし、表示されたランキングを更新します。 handleCountryChange handleLeagueChange handleSeasonChangeこの記事では、APIデータを

   に適した形式に変換するなど、これらの手順を示すコードスニペットを提供します。 また、APIからデータが欠落している場合の潜在的なエラー処理にも対応しています。
現在の実装により動的なデータフェッチが可能になりますが、設定はまだ永続的ではありません。次の記事では、これらの設定を保存するために、ユーザーの選択を永続的にすることを取り上げます。

以上がカスタムWordPressブロックの設定UIを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。