カスタム WordPress ブロックの設定 UI の作成

これまで、カスタム WordPress ブロックで外部 API からのデータを操作する方法について説明してきました。 のプロセスをたどりました フロントエンドで使用するためにそのデータをフェッチする WordPress サイトの、およびその方法 WordPress Block Editor で直接レンダリングする ブロックをコンテンツに配置するとき。 今回は、ブロック エディターのコントロール パネルにフックして、作成したブロックの設定 UI を作成することで、これら XNUMX つの記事を橋渡しします。

私が言及しているコントロールパネルを知っていますよね？ ブロック エディターの投稿とブロックの設定を含む右側のパネルです。

赤くハイライトされた部分が見えますか? それがコントロールパネルです。 段落ブロックが現在選択されており、その設定がパネルに表示されています。 スタイル、色、タイポグラフィなど、さまざまなことを変更できます。

さて、それがまさに今回私たちがやっていることです。 前回の XNUMX つの記事で取り組んだ Football Rankings ブロックの設定のコントロールを作成します。 前回は、サッカーランキングの外部データを取得するボタンをブロックに作成しました。 必要な URL とエンドポイントはすでにわかっています。 しかし、別の国のランキングを取得したい場合はどうすればよいでしょうか? それとも違うリーグ？ 別の季節のデータはどうですか？

そのためにはフォーム コントロールが必要です。 インタラクティブな React コンポーネントを利用できます — のように 反応選択 — そのデータを解析するために使用できるさまざまな API オプションを参照します。 しかし、WordPress には、すぐに接続できるコア コンポーネントが多数同梱されているため、その必要はありません。

　 ドキュメント これらのコンポーネントの — と呼ばれる InspectorControls — で良くなっています WordPress ブロックエディターハンドブック. 時間の経過とともにさらに良くなるでしょうが、それまでの間、 WordPress グーテンベルク ストーリーブック & WordPress Gutenberg コンポーネント 追加のヘルプのサイト。

API アーキテクチャ

何かに取り掛かる前に、まず何が必要なのかを明確にすることをお勧めします。 フェッチしている RapidAPI データの構造をマッピングしたので、何が利用できるかがわかります。

シーズンと国は、リーグ エンドポイントにマップされる XNUMX つの最上位エンドポイントです。 そこから、ランキング テーブルに入力するために既に使用している残りのデータを取得します。 そこで、WordPress のブロック エディターで、シーズン、国、リーグでデータをフィルター処理する設定を作成し、フィルター処理されたデータをランキング テーブルに渡します。 これにより、任意の WordPress ページまたは投稿にブロックをドロップして、ブロック内のデータのバリエーションを表示することができます。

順位を取得するには、まずリーグを取得する必要があります。 リーグを取得するには、まず国やシーズンを取得する必要があります。 RapidAPI ダッシュボードでさまざまなエンドポイントを表示できます。

ランキングの作成に使用できるデータにはさまざまな組み合わせがあり、どのデータが必要か好みがある場合があります。 この記事のために、ブロック設定パネルで次のオプションを作成します。

• 国を選択
• リーグを選択
• 季節を選ぶ

次に、これらの選択を送信し、関連データを取得してランキング テーブルに渡すボタンを用意します。

国のリストを読み込んで保存する

選択できる国のリストがないと、データが必要な国を選択できません。 したがって、最初のタスクは、RapidAPI から国のリストを取得することです。

理想的なのは、ブロックがページまたは投稿コンテンツで実際に使用されているときに、国のリストを取得することです。 ブロックが使用されていない場合は、何も取得する必要はありません。 このアプローチは、私たちが行ったものと非常によく似ています 最初の記事違いは、異なる API エンドポイントと異なる属性を使用して、返された国のリストを保存していることです。 WordPress でデータを取得する方法は他にもあります。 APIフェッチですが、それはここで行っていることの範囲外です。

API データからコピーした後に国リストを手動で含めることも、別の API またはライブラリを使用して国を入力することもできます。 しかし、使用している API には既に国のリストがあるため、そのエンドポイントの XNUMX つだけを使用します。 ブロックがページに挿入されたとき、またはブロック エディターでコンテンツを投稿したときに、最初の国リストが読み込まれることを確認しましょう。

// edit.js
const [countriesList, setCountriesList] = useState(null);

useEffect(() => {
  let countryOptions = {
    method: "GET",
    headers: {
      "X-RapidAPI-Key": "Your Rapid API key",
      "X-RapidAPI-Host": "api-football-v1.p.rapidapi.com",
    },
  };
  fetch("https://api-football-v1.p.rapidapi.com/v3/countries", countryOptions)
    .then( (response) => response.json() )
    .then( (response) => {
      let countriesArray = { ...response };
      console.log("Countries list", countriesArray.response);
      setCountriesList(countriesArray.response);
    })
  .catch((err) => console.error(err));
}, []);

国のリストを格納する状態変数があります。 次に、からコンポーネントをインポートします。 @ワードプレス/ブロックエディタ 呼ばれるパッケージ InspectorControls ここには、設定コントロールを作成するために必要なすべてのコンポーネントが配置されています。

import { InspectorControls } from "@wordpress/block-editor";

パッケージの GitHubレポ よく説明してくれます InspectorControls. この例では、国、リーグ、シーズンなどの API データ設定を制御するために使用できます。 作成中の UI を理解していただくためのプレビューを次に示します。

そして、それらの選択がブロック設定で行われると、それらを使用します ブロックの Edit function:

  { countriesList && (
    
  )}

ここでは、関数がコンポーネントのみをロードするように、条件付きレンダリングを使用していることを確認しています。 After 国のリストが読み込まれます。 それが気になるなら LeagueSettings コンポーネント、それは私が別で作成したカスタム コンポーネントです。 components ブロック内のサブフォルダーを整理して、よりクリーンで整理された状態にすることができます Edit XNUMX つのファイルで処理する数百行の国データの代わりに関数を使用します。

にインポートできます edit.js このようなファイル：

import { LeagueSettings } from "./components/LeagueSettings";

次に、必要な小道具を LeagueSettings 親からのコンポーネント Edit コンポーネントから状態変数と属性にアクセスできるようにします LeagueSettings 子コンポーネント。 次のような他の方法でもそれを行うことができます コンテキストAPI 小道具の掘削を避けるためですが、現在持っているものは、私たちがやっていることに完全に適しています.

の他の部分 Edit 関数はコンポーネントに変換することもできます。 たとえば、リーグ順位コードは別のコンポーネント内に配置できます。 LeagueTable.js —そして、インポートしたのと同じようにインポートします LeagueSettings に Edit 機能。

内部 LeagueSettings.js file

LeagueSettings 別のようです Reactコンポーネント そこから、親コンポーネントから小道具を分解できます。 XNUMX つの状態変数と追加の状態変数を使用します。 leagueID 状態から ID を抽出するためです。 league オブジェクト：

const [country, setCountry] = useState(null);
const [league, setLeague] = useState(null);
const [season, setSeason] = useState(null);
const [leagueID, setLeagueID] = useState(null);

最初に行うことは、 PanelBody @wordpress/block-editor パッケージのコンポーネント:

import { PanelBody } from "@wordpress/block-editor";

…そしてそれを私たちの return 関数：

全 その他のパネル タグと属性 —これらを使用するのは私の個人的な好みです。 他のどれも必要ありません…しかし すべてのコンポーネントを見てください 設定パネルを作成できるようになりました！ のシンプルさが好きです PanelBody 私たちのユースケースのために。 展開したり折りたたんだりして、ブロックのドロップダウン設定を表示するだけです。

そういえば、それらの選択のために行う選択肢があります。 を使用できます SelectControl コンポーネントまたは ComboBoxControl、ドキュメントでは「の拡張バージョン」と説明されています SelectControl、検索入力を使用してオプションを検索できる機能が追加されました。」 国のリストがかなり長くなる可能性があり、ユーザーは検索クエリを実行するか、リストから選択できるため、これは私たちにとって良いことです.

以下に例を示します。 ComboboxControl 私たちの国リストのために働くことができます:

 handleCountryChange(value) }
  onInputChange={ (inputValue) => {
    setFilteredCountryOptions(
      setupCountrySelect.filter((option) =>
        option.label
          .toLowerCase()
          .startsWith(inputValue.toLowerCase())
      )
    );
  }}
/>

　 ComboboxControl コントロールのラベルと値に異なるサイズを適用できるという意味で構成可能です。

{
  value: 'small',
  label: 'Small',
},

しかし、API データはこの構文ではないため、変換できます。 countriesList ブロックが含まれているときに親コンポーネントから取得される配列:

let setupCountrySelect;

setupCountrySelect = countriesList.map((country) => {
  return {
    label: country.name,
    value: country.name,
  };
});

から国を選択すると、 ComboboxControl、国の値が変更され、それに応じてデータがフィルター処理されます。

function handleCountryChange(value) {
  // Set state of the country 
  setCountry(value); 

  // League code from RapidAPI
  const options = {
    method: "GET",
    headers: {
      "X-RapidAPI-Key": "Your RapidAPI key",
      "X-RapidAPI-Host": "api-football-v1.p.rapidapi.com",
    },
  };

  fetch(`https://api-football-v1.p.rapidapi.com/v3/leagues?country=${value}`, options)
    .then((response) => response.json())
    .then((response) => {
      return response.response;
    })
    .then((leagueOptions) => {
      // Set state of the league variable
      setLeague(leagueOptions);

      // Convert it as we did for Country options
      setupLeagueSelect = leagueOptions.map((league) => {
        return {
          label: league.league.name,
          value: league.league.name,
        };
      });
      setFilteredLeagueOptions(setupLeagueSelect);
    })
  .catch((err) => console.error(err));
}

国の選択が変更されたときの変更を処理するために、別の XNUMX つの状態変数を使用していることに注意してください。

const [filteredCountryOptions, setFilteredCountryOptions] = useState(setupCountrySelect);
const [filteredLeagueOptions, setFilteredLeagueOptions] = useState(null);
const [filteredSeasonOptions, setFilteredSeasonOptions] = useState(null);

他の設定オプションはどうですか？

他の設定に使用したコードを示しますが、特殊なケースのエラーを定義する際に、通常のケースを考慮に入れるだけです。 たとえば、一部の国やリーグでは、次の理由でエラーが発生します。

• 一部のリーグには順位がありません。
• 一部のリーグには順位がありますが、それらは単一のテーブルにはありません。

これは JavaScript や React のチュートリアルではないため、使用する予定の API の特殊なケースを処理できるようにします。

function handleLeagueChange(value) {
  setLeague(value);
  if (league) {
    const selectedLeague = league.filter((el) => {
      if (el.league.name === value) {
        return el;
      }
    });

    if (selectedLeague) {
      setLeague(selectedLeague[0].league.name);
      setLeagueID(selectedLeague[0].league.id);
      setupSeasonSelect = selectedLeague[0].seasons.map((season) => {
        return {
          label: season.year,
          value: season.year,
        };
      });
      setFilteredSeasonOptions(setupSeasonSelect);
    }
  } else {
    return;
  }
}

function handleSeasonChange(value) {
  setSeason(value);
}

設定選択の送信

前回の記事、API から新しいデータをフェッチするボタンをブロック エディターに作成しました。 設定ができたので、もう必要ありません。 まあ、それは必要ですが、現在の場所ではありません。 ブロック エディターでレンダリングされるブロックに直接配置する代わりに、 PanelBody コンポーネントを使用して、設定の選択を送信します。

だから、戻って LeagueSettings.js:

// When countriesList is loaded, show the country combo box
{ countriesList && (
   handleCountryChange(value)}
    onInputChange={(inputValue) => {
      setFilteredCountryOptions(
        setupCountrySelect.filter((option) =>
          option.label
            .toLowerCase()
            .startsWith(inputValue.toLowerCase())
        )
      );
    }}
  />
)}

// When filteredLeagueOptions is set through handleCountryChange, show league combobox
{ filteredLeagueOptions && (
   handleLeagueChange(value)}
    onInputChange={(inputValue) => {
      setFilteredLeagueOptions(
        setupLeagueSelect.filter((option) =>
          option.label
            .toLowerCase()
            .startsWith(inputValue.toLowerCase())
        )
      );
    }}
  />
)}

// When filteredSeasonOptions is set through handleLeagueChange, show season combobox
{ filteredSeasonOptions && (
  
     handleSeasonChange(value)}
      onInputChange={
          (inputValue) => {
            setFilteredSeasonOptions(
              setupSeasonSelect.filter((option) =>
              option.label
              .toLowerCase()
              .startsWith(inputValue.toLowerCase()
            )
          );
        }
      }
    />

    // When season is set through handleSeasonChange, show the "Fetch data" button
    {
      season && (
         getData()}>Fetch data
      )
    }
    
  
)}

これが結果です！

私たちはブロックで非常に良い場所にいます。 ブロック エディターとサイトのフロント エンドでレンダリングできます。 データをフィルタリングするために作成した設定の選択に基づいて、外部 API からデータを取得できます。 めちゃくちゃ機能的です！

しかし、私たちが取り組まなければならないことがもう XNUMX つあります。 現在、ブロックを含むページまたは投稿を保存すると、ブロック用に選択した設定がリセットされます。 つまり、これらの選択はどこにも保存されません。 これらの選択を永続化するには、もう少し作業が必要です。 それについては、次の記事で説明する予定ですので、お楽しみに。