Beállítások felhasználói felület létrehozása egyéni WordPress blokkhoz

Eddig bemutattuk, hogyan lehet külső API-ból származó adatokkal dolgozni egy egyéni WordPress blokkban. Végigjártuk a folyamatot az adatok lekérése az előlapon való használatra egy WordPress-webhelyről, és hogyan jelenítse meg közvetlenül a WordPress blokkszerkesztőben amikor a blokkot elhelyezi a tartalomban. Ezúttal ezt a két cikket hidaljuk át úgy, hogy a blokkszerkesztő vezérlőpultjára csatlakozunk, és létrehozunk egy beállítási felhasználói felületet az általunk készített blokkhoz.

Ismered a vezérlőpultot, amire gondolok, igaz? Ez az a jobb oldali panel, amely a blokkszerkesztő bejegyzési és blokkolási beállításait tartalmazza.

Látod azt a pirosan kiemelt területet? Ez a vezérlőpult. Jelenleg egy bekezdésblokk van kiválasztva, és a hozzá tartozó beállítások megjelennek a panelen. Megváltoztathatjuk a stílust, a színt, a tipográfiát… számos dolgot!

Nos, ezúttal pontosan ezt tesszük. Létre fogjuk hozni a vezérlőelemeket a Football Rankings blokk beállításaihoz, amelyeken az előző két cikkben dolgoztunk. Legutóbb a blokkunkban készítettünk egy gombot, amely lekéri a futballranglista külső adatait. Már tudtuk a szükséges URL-t és végpontokat. De mi van akkor, ha egy másik ország rangsorát akarjuk elérni? Vagy esetleg egy másik liga? Mit szólnál egy másik évszak adataihoz?

Ehhez űrlapvezérlőkre van szükségünk. Használhatnánk interaktív React komponenseket – mint pl React-Select – az adatok elemzéséhez rendelkezésre álló API-beállítások böngészése. De erre nincs szükség, mivel a WordPress egy csomó alapvető összetevőt tartalmaz, amelyekhez közvetlenül csatlakoztatjuk!

A dokumentáció ezekre az alkatrészekre – ún InspectorControls — egyre jobb a WordPress blokkszerkesztő kézikönyv. Ez idővel még jobb lesz, de közben nálunk is megvan a WordPress Gutenberg mesekönyv és a WordPress Gutenberg komponensek oldalak további segítségért.

Az API architektúra

Mielőtt bármibe belevágnánk, jó ötlet feltérképezni, mire van szükségünk. Feltérképeztem az általunk beolvasott RapidAPI-adatok szerkezetét, hogy tudjuk, mi áll a rendelkezésünkre:

Az évszakok és az országok két legfelső szintű végpont, amelyek a liga végpontjához kapcsolódnak. Innentől kezdve rendelkezésünkre áll a többi adat, amelyet már a rangsorolási táblázat kitöltéséhez használunk. Tehát a WordPress blokkszerkesztőben olyan beállításokat szeretnénk létrehozni, amelyek szezon, ország és liga szerint szűrik az adatokat, majd átadjuk a szűrt adatokat a ranglista táblázatába. Ez lehetővé teszi számunkra, hogy eldobjuk a blokkot bármely WordPress oldalon vagy bejegyzésben, és megjelenítsük a blokkban lévő adatok változatait.

Ahhoz, hogy megszerezzük a tabellát, először a bajnokságot kell megszereznünk. És ahhoz, hogy megszerezzük a bajnokságokat, először meg kell szereznünk az országokat és/vagy a szezonokat. A különböző végpontokat a RapidAPI irányítópultján tekintheti meg.

Különféle adatkombinációkat használhatunk a rangsor feltöltéséhez, és előfordulhat, hogy Ön dönti el, hogy melyik adatot szeretné. A cikk kedvéért a következő lehetőségeket fogjuk létrehozni a blokkbeállítások panelen:

• Válassz országot
• Válassza a Liga lehetőséget
• Válassza a Szezon lehetőséget

Ezután lesz egy gomb, amellyel elküldhetjük ezeket a kijelöléseket, lekérhetjük a releváns adatokat, és továbbíthatjuk a rangsor táblázatába.

Töltse be és tárolja az országok listáját

Nem tudjuk kiválasztani, hogy melyik országhoz szeretnénk adatokat kérni, ha nem áll rendelkezésünkre az országok listája, amelyek közül választhatunk. Tehát az első feladatunk az, hogy megragadjuk az országok listáját a RapidAPI-ból.

Az ideális megoldás az országok listájának lekérése, amikor a blokkot ténylegesen használják az oldalon vagy a tartalom közzétételében. Nem kell letölteni semmit, ha a blokk nincs használatban. A megközelítés nagyon hasonló ahhoz, amit mi csináltunk az első cikk, a különbség az, hogy más API-végpontot és különböző attribútumokat használunk a visszaadott országok listájának tárolására. Vannak más WordPress-módszerek is az adatok lekérésére, mint pl api-fetch, de ez kívül esik azon, amit itt csinálunk.

Az országlistát manuálisan is felvehetjük, miután kimásoltuk az API-adatokból, vagy használhatunk külön API-t vagy könyvtárat az országok feltöltéséhez. De az általunk használt API-nak már van országok listája, ezért csak az egyik végpontját használnám. Győződjön meg arról, hogy a kezdeti országlista betöltődik, amikor a blokkot beillesztik az oldalba, vagy közzétesznek tartalmat a blokkszerkesztőben:

// 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));
}, []);

Van egy állapotváltozónk az országok listájának tárolására. Ezután importálunk egy összetevőt a @wordpress/block-editor nevű csomagot InspectorControls ahol a beállításvezérlőink létrehozásához szükséges összes összetevő található.

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

A csomag GitHub repo jól magyarázza InspectorControls. Példánkban az API-adatbeállítások, például az ország, a liga és a szezon vezérlésére használhatjuk. Íme egy előnézet, hogy képet kapjon az általunk készített felhasználói felületről:

És amint ezek a kijelölések megtörténtek a blokkbeállításokban, felhasználjuk őket a blokk Edit funkció:

  { countriesList && (
    
  )}

Itt megbizonyosodok arról, hogy feltételes renderelést használunk, hogy a függvény csak az összetevőt töltse be után az országok listája betöltődik. Ha ezen kíváncsi vagy LeagueSettings komponens, ez egy egyedi komponens, amelyet külön hoztam létre components almappát a blokkban, hogy tisztább és rendezettebb legyen Edit függvény több száz soros országadat helyett egyetlen fájlban kell kezelni.

Be tudjuk importálni a edit.js ilyen fájl:

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

Ezután átadjuk a szükséges kellékeket a LeagueSettings komponens a szülőtől Edit komponenst, hogy elérhessük az állapotváltozókat és attribútumokat a LeagueSettings gyermek összetevő. Ezt más módszerekkel is megtehetjük, mint pl Kontextus API hogy elkerüljük a kellékfúrást, de ami jelenleg van, az tökéletesen alkalmas arra, amit csinálunk.

A többi része a Edit függvény komponensekké is alakítható. Például a bajnoki tabella kódja behelyezhető egy külön komponensbe – például talán LeagueTable.js — és utána ugyanúgy importált, mint mi LeagueSettings be a Edit funkciót.

Bent a LeagueSettings.js filé

LeagueSettings pont olyan, mint a másik Reakció komponens ahonnan a kellékeket destrukturálhatjuk a szülőkomponensből. Három állapotváltozót és egy további állapotváltozót fogok használni leagueID állapotot, mert kivonjuk az azonosítót a league tárgy:

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

Az első dolog, amit meg fogunk tenni, az a PanelBody összetevő a @wordpress/block-editor csomagból:

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

…és belefoglaljuk a mieink közé return funkció:

Vannak egyéb panelcímkék és attribútumok - csak az én személyes preferenciám, hogy ezeket használom. A többire nincs szükség… de nézd meg az összes alkatrészt lehetőségünk van beállítási panel elkészítésére! Tetszik az egyszerűsége a PanelBody használati esetünkhöz. Kibővül és összecsukódik, hogy felfedje a blokk legördülő beállításait, és ennyi.

Ha már szóba került, van egy választási lehetőségünk a választások során. Használhatnánk a SelectControl komponens vagy a ComboBoxControl, amelyet a dokumentumok úgy írnak le, mint „továbbfejlesztett változata a SelectControl, azzal a kiegészítéssel, hogy keresési bevitellel lehet keresni a lehetőségek között." Ez jó számunkra, mert az országok listája elég hosszúra nyúlhat, és a felhasználók vagy keresést végezhetnek, vagy listából választhatnak.

Íme egy példa arra, hogyan a ComboboxControl működhetne országlistánkon:

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

A ComboboxControl konfigurálható abban az értelemben, hogy különböző méreteket alkalmazhatunk a vezérlő címkéjére és értékeire:

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

De az API-adataink nincsenek ebben a szintaxisban, így konvertálhatjuk a countriesList tömb, amely a szülőkomponensből származik, amikor a blokk szerepel:

let setupCountrySelect;

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

Ha kiválaszt egy országot a ComboboxControl, az ország értéke megváltozik, és ennek megfelelően szűrjük az adatokat:

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));
}

Vegye figyelembe, hogy további három állapotváltozót használok a változások kezelésére, amikor az országkiválasztás megváltozik:

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

Mi a helyzet a többi beállítási lehetőséggel?

Megmutatom a kódot, amit a többi beállításnál használtam, de ez csak annyit tesz, hogy figyelembe veszi a normál eseteket a speciális esetek hibáinak meghatározásakor. Például bizonyos országokban és bajnokságokban előfordulhatnak hibák, mert:

• egyes ligáknál nincs állás, és
• néhány ligának van állása, de nincsenek egyetlen táblázatban.

Ez nem JavaScript vagy React oktatóanyag, így lehetővé teszem, hogy kezelje a használni kívánt API speciális eseteit:

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);
}

A beállítások elküldése

A utolsó cikk, csináltunk egy gombot a blokkszerkesztőben, amely friss adatokat kér az API-ból. Most már nincs rá szükség, hogy megvannak a beállítások. Nos, szükségünk van rá – csak nem ott, ahol jelenleg van. Ahelyett, hogy közvetlenül a blokkszerkesztőben megjelenített blokkban lenne, áthelyezzük a PanelBody összetevőt a beállítások elküldéséhez.

Szóval vissza 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
      )
    }
    
  
)}

Íme az eredmény!

Nagyon jó helyen vagyunk a blokkunkkal. Megjeleníthetjük a blokkszerkesztőben és a webhely előlapján. Az általunk létrehozott, az adatokat szűrő beállítások alapján lekérhetünk adatokat egy külső API-ból. Rohadt funkcionális!

De van még egy dolog, amit meg kell oldanunk. Jelenleg, amikor elmentjük a blokkot tartalmazó oldalt vagy bejegyzést, a blokkoláshoz kiválasztott beállítások visszaállnak. Más szavakkal, ezeket a kijelöléseket a rendszer nem menti sehova. Van még egy kis munka, hogy ezek a kijelölések tartósak legyenek. A következő cikkben erre tervezünk eljutni, úgyhogy maradj velünk.