Ustvarjanje uporabniškega vmesnika z nastavitvami za blok WordPress po meri

Doslej smo obravnavali, kako delati s podatki iz zunanjega API-ja v prilagojenem bloku WordPress. Sprehodili smo se skozi proces pridobivanje teh podatkov za uporabo na sprednji strani spletnega mesta WordPress in kako upodobite neposredno v urejevalniku blokov WordPress pri umestitvi bloka v vsebino. Tokrat bomo ta dva članka premostili tako, da se vključimo v nadzorno ploščo urejevalnika blokov in ustvarimo uporabniški vmesnik z nastavitvami za blok, ki smo ga naredili.

Saj poznate nadzorno ploščo, o kateri govorim, kajne? Tista plošča na desni vsebuje nastavitve objave in blokiranja v urejevalniku blokov.

Vidite tisto rdeče poudarjeno območje? To je nadzorna plošča. Blok odstavka je trenutno izbran in nastavitve zanj so prikazane na plošči. Spreminjamo lahko sloge, barve, tipografijo ... številne stvari!

No, točno to počnemo tokrat. Ustvarili bomo kontrolnike za nastavitve bloka Football Rankings, na katerem smo delali v zadnjih dveh člankih. Zadnjič smo v našem bloku naredili gumb, ki pridobiva zunanje podatke za nogometno lestvico. Poznali smo že URL in končne točke, ki jih potrebujemo. Kaj pa, če želimo pridobiti uvrstitev za drugo državo? Ali morda druga liga? Kaj pa podatki iz druge sezone?

Za to potrebujemo nadzor obrazca. Lahko bi uporabili interaktivne komponente React - kot je React-Select — za brskanje po različnih možnostih API-ja, ki so na voljo za razčlenjevanje teh podatkov. Toda za to ni potrebe, saj je WordPress opremljen s kupom osnovnih komponent, na katere se neposredno priključimo!

O Dokumentacija za te komponente — imenovan InspectorControls — se izboljšuje v Priročnik za urejevalnik blokov WordPress. To bo sčasoma še boljše, medtem pa imamo tudi WordPress Gutenberg Storybook in Komponente WordPress Gutenberg strani za dodatno pomoč.

Arhitektura API-ja

Preden se zataknemo v karkoli, je dobro, da si začrtamo, kaj sploh potrebujemo. Začrtal sem strukturo podatkov RapidAPI, ki jih pridobivamo, da vemo, kaj nam je na voljo:

Sezone in države sta dve končni točki najvišje ravni, ki se preslikata v končno točko lige. Od tam imamo preostale podatke, ki jih že uporabljamo za zapolnjevanje razvrstitvene tabele. Torej želimo ustvariti nastavitve v urejevalniku blokov WordPress, ki filtrirajo podatke glede na sezono, državo in ligo, nato pa te filtrirane podatke posredovati v razvrstitveno tabelo. To nam daje možnost, da opustimo blok na kateri koli strani ali objavi v WordPressu in prikažemo različice podatkov v bloku.

Da bi dosegli lestvico, moramo najprej pridobiti lige. In da bi dobili lige, moramo najprej pridobiti države in/ali sezone. Različne končne točke si lahko ogledate na nadzorni plošči RapidAPI.

Obstajajo različne kombinacije podatkov, ki jih lahko uporabimo za zapolnitev uvrstitev, in morda boste imeli prednost, katere podatke želite. Zaradi tega članka bomo na plošči z nastavitvami blokov ustvarili naslednje možnosti:

• Izberite državo
• Izberite ligo
• Izberite Sezona

Nato bomo imeli gumb za predložitev teh izbir in pridobitev ustreznih podatkov ter jih posredovali v razvrstitveno tabelo.

Naložite in shranite seznam držav

Ne moremo izbrati, za katero državo želimo podatke, če nimamo seznama držav, med katerimi lahko izbiramo. Torej, naša prva naloga je pridobiti seznam držav iz RapidAPI.

Idealno je pridobiti seznam držav, ko je blok dejansko uporabljen v vsebini strani ali objave. Če blok ni v uporabi, vam ni treba ničesar pridobiti. Pristop je zelo podoben temu, kar smo naredili v prvi članek, razlika je v tem, da uporabljamo drugo končno točko API-ja in druge atribute za shranjevanje seznama vrnjenih držav. Obstajajo tudi drugi načini WordPressa za pridobivanje podatkov, npr api-fetch, vendar je to zunaj obsega tega, kar počnemo tukaj.

Seznam držav lahko vključimo ročno, potem ko ga kopiramo iz podatkov API-ja, ali pa uporabimo ločen API ali knjižnico za zapolnitev držav. Toda API, ki ga uporabljamo, že ima seznam držav, zato bi uporabil samo eno od njegovih končnih točk. Poskrbimo, da se začetni seznam držav naloži, ko je blok vstavljen na stran ali objavi vsebino v urejevalniku blokov:

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

Za shranjevanje seznama držav imamo spremenljivko stanja. Nato bomo uvozili komponento iz @wordpress/urejevalnik blokov paket poklican InspectorControls kjer se nahajajo vse komponente, ki jih potrebujemo za ustvarjanje kontrolnikov nastavitev.

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

Paket je GitHub repo dobro razlaga InspectorControls. V našem primeru ga lahko uporabimo za nadzor nastavitev podatkov API-ja, kot so država, liga in sezona. Tukaj je predogled, da boste dobili predstavo o uporabniškem vmesniku, ki ga ustvarjamo:

In ko so te izbire narejene v nastavitvah bloka, jih uporabimo blokov Edit funkcija:

  { countriesList && (
    
  )}

Tukaj se prepričam, da uporabljamo pogojno upodabljanje, tako da funkcija naloži samo komponento po naloži se seznam držav. Če se sprašujete o tem LeagueSettings komponento, je komponenta po meri, ki sem jo ustvaril v ločenem components podmapo v bloku, da smo lahko bolj čisti in organizirani Edit namesto na stotine vrstic podatkov o državah, ki jih je treba obravnavati v eni sami datoteki.

Lahko ga uvozimo v edit.js datoteka, kot je ta:

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

Nato posredujemo zahtevane rekvizite na LeagueSettings komponenta od starša Edit tako da lahko dostopamo do spremenljivk stanja in atributov iz LeagueSettings otroška komponenta. To lahko storimo tudi z drugimi metodami, kot je Kontekst API da bi se izognili opornemu vrtanju, vendar je to, kar imamo zdaj, popolnoma primerno za to, kar počnemo.

Ostali deli Edit funkcijo je mogoče pretvoriti tudi v komponente. Na primer, kodo lestvice lige lahko vstavite v ločeno komponento - kot morda LeagueTable.js — in nato uvoženo, tako kot smo uvažali LeagueSettings v Edit Funkcija.

Znotraj LeagueSettings.js datoteka

LeagueSettings je kot drugi React komponenta iz katerega lahko destrukturiramo rekvizite iz nadrejene komponente. Uporabil bom tri spremenljivke stanja in dodatno leagueID državo, ker bomo ID pridobili iz league predmet:

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

Prva stvar, ki jo bomo naredili, je uvoz PanelBody komponenta iz paketa @wordpress/block-editor:

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

... in ga vključite v naše return funkcija:

obstajajo druge oznake in atributi plošče — to je le moja osebna prednost, da uporabljam te. Nobeden od drugih ni potreben ... ampak poglejte vse komponente imamo na voljo za izdelavo nastavitvene plošče! Všeč mi je preprostost PanelBody za naš primer uporabe. Razširi se in strne, da razkrije spustne nastavitve za blok in to je to.

Ko smo že pri tem, imamo izbiro za te izbire. Lahko bi uporabili SelectControl komponento ali a ComboBoxControl, ki ga dokumenti opisujejo kot »izboljšano različico a SelectControl, z dodatkom možnosti iskanja možnosti z uporabo iskalnega vnosa.« To je lepo za nas, ker bi lahko bil seznam držav precej dolg in uporabniki bodo lahko izvedli iskalno poizvedbo ali izbrali s seznama.

Tukaj je primer, kako a ComboboxControl lahko deluje za naš seznam držav:

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

O ComboboxControl je nastavljiv v smislu, da lahko uporabimo različne velikosti za oznako in vrednosti kontrolnika:

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

Toda naši podatki API-ja niso v tej sintaksi, zato lahko pretvorimo countriesList matrika, ki prihaja iz nadrejene komponente, ko je blok vključen:

let setupCountrySelect;

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

Ko je država izbrana med ComboboxControl, se vrednost države spremeni in podatke ustrezno filtriramo:

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

Upoštevajte, da uporabljam še tri spremenljivke stanja za obdelavo sprememb, ko se spremeni izbira države:

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

Kaj pa druge možnosti nastavitev?

Pokazal bom kodo, ki sem jo uporabil za druge nastavitve, vendar je vse, kar počne, to, da upošteva običajne primere, medtem ko definira napake za posebne primere. V nekaterih državah in ligah bodo na primer napake, ker:

• za nekatere lige ni lestvic in
• nekatere lige imajo lestvice, vendar niso v eni tabeli.

To ni vadnica za JavaScript ali React, zato vam bom dovolil, da obravnavate posebne primere za API, ki ga nameravate uporabiti:

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

Pošiljanje izbire nastavitev

v zadnji članek, smo naredili gumb v urejevalniku blokov, ki pridobiva sveže podatke iz API-ja. Zdaj, ko imamo nastavitve, ga ne potrebujemo več. No, potrebujemo ga - samo ne tam, kjer je trenutno. Namesto da bi ga imeli neposredno v bloku, ki je upodobljen v urejevalniku blokov, ga bomo premaknili v naš PanelBody komponento za predložitev izbire nastavitev.

Torej, nazaj noter 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
      )
    }
    
  
)}

Tukaj je rezultat!

Z našim blokom smo na zelo dobrem mestu. Lahko ga upodabljamo v urejevalniku blokov in na sprednji strani spletnega mesta. Podatke lahko pridobimo iz zunanjega API-ja na podlagi izbranih nastavitev, ki smo jih ustvarili in ki filtrirajo podatke. Prekleto funkcionalen je!

Ampak obstaja še ena stvar, ki se je moramo lotiti. Trenutno, ko shranimo stran ali objavo, ki vsebuje blok, se nastavitve, ki smo jih izbrali za blok, ponastavijo. Z drugimi besedami, ti izbori niso nikjer shranjeni. Malo več je dela, da bodo te izbire obstojne. Tja nameravamo iti v naslednjem članku, zato ostanite z nami.