Seadete kasutajaliidese loomine kohandatud WordPressi ploki jaoks

Siiani oleme käsitlenud, kuidas töötada välise API andmetega kohandatud WordPressi plokis. Käisime läbi protsessi nende andmete toomine esiotsas kasutamiseks WordPressi saidi kohta ja kuidas seda teha renderdage see otse WordPressi plokiredaktoris ploki sisusse paigutamisel. Seekord ühendame need kaks artiklit, ühendades plokiredaktori juhtpaneeliga, et luua meie tehtud ploki jaoks seadete kasutajaliides.

Teate juhtpaneeli, millele ma viitan, eks? See on parempoolne paneel, mis sisaldab plokiredaktoris postituste ja blokeerimise sätteid.

Kas näete seda punaselt esiletõstetud ala? See on juhtpaneel. Lõiguplokk on praegu valitud ja selle sätted kuvatakse paneelil. Saame muuta stiile, värve, tüpograafiat... palju asju!

See on täpselt see, mida me seekord teeme. Loome jalgpalli edetabeli ploki sätete juhtnupud, mille kallal töötasime kahes viimases artiklis. Eelmisel korral tegime oma plokki nupu, mis toob jalgpalli edetabeli välisandmed. Teadsime juba vajalikku URL-i ja lõpp-punkte. Aga mis siis, kui tahame saada teise riigi edetabelit? Või äkki hoopis teine ​​liiga? Kuidas oleks teise hooaja andmetega?

Selleks vajame vormi juhtelemente. Võiksime kasutada interaktiivseid Reacti komponente, näiteks Reageeri-vali — nende andmete sõelumiseks saadaolevate erinevate API-valikute sirvimiseks. Kuid seda pole vaja, kuna WordPressi tarnitakse koos hulga põhikomponentidega, mille külge me otse haakime!

. dokumentatsioon nende komponentide jaoks - nn InspectorControls - läheb paremaks WordPressi plokiredaktori käsiraamat. See muutub aja jooksul veelgi paremaks, kuid vahepeal on meil ka WordPressi Gutenbergi juturaamat ja WordPressi Gutenbergi komponendid saidid täiendava abi saamiseks.

API arhitektuur

Enne kui hakkame midagi ette võtma, on hea mõte kaardistada, mida me üldse vajame. Olen kaardistanud toodavate RapidAPI andmete struktuuri, et teaksime, mis on meile saadaval.

Hooajad ja riigid on kaks tipptaseme lõpp-punkti, mis on seotud liiga lõpp-punktiga. Sealt on meil ülejäänud andmed, mida me juba kasutame pingerea tabeli täitmiseks. Seega tahame luua WordPressi plokiredaktoris sätted, mis filtreerivad andmeid hooaja, riigi ja liiga järgi, seejärel edastame need filtreeritud andmed pingerea tabelisse. See annab meile võimaluse blokeerida plokk mis tahes WordPressi lehel või postituses ja kuvada plokis olevate andmete variatsioonid.

Tabeliseisu saamiseks peame esmalt saavutama liigad. Ja liigade saamiseks peame kõigepealt hankima riigid ja/või hooajad. Saate vaadata erinevaid lõpp-punkte RapidAPI armatuurlaual.

Edetabeli täitmiseks saame kasutada erinevaid andmete kombinatsioone ja teil võib olla eelistus, milliseid andmeid soovite. Selle artikli huvides loome plokkide seadete paneelil järgmised valikud:

• Valige Riik
• Valige Liiga
• Valige Hooaeg

Seejärel on meil nupp nende valikute esitamiseks, vastavate andmete toomiseks ja pingerea tabelisse edastamiseks.

Laadige ja salvestage riikide loend

Me ei saa valida, millise riigi kohta andmeid soovime, kui meil pole riikide loendit, mille vahel valida. Niisiis, meie esimene ülesanne on hankida RapidAPI-st riikide loend.

Ideaalne on tuua riikide loend, kui plokki lehel või sisus tegelikult kasutatakse. Kui plokki ei kasutata, pole vaja midagi tuua. Lähenemisviis on väga sarnane sellega, mida me tegime esimene artikkel, mille erinevus seisneb selles, et kasutame tagastatud riikide loendi salvestamiseks teist API lõpp-punkti ja erinevaid atribuute. Andmete toomiseks on muid WordPressi viise, näiteks api toomine, kuid see on väljaspool seda, mida me siin teeme.

Võime lisada riikide loendi käsitsi pärast selle API andmetest kopeerimist või kasutada riikide sisestamiseks eraldi API-d või teeki. Kuid meie kasutataval API-l on juba riikide loend, nii et ma kasutaksin lihtsalt ühte selle lõpp-punktidest. Veenduge, et esialgne riikide loend laaditakse, kui plokk lehele sisestatakse või sisu plokiredaktorisse postitatakse:

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

Meil on riikide loendi salvestamiseks olekumuutuja. Järgmisena impordime failist komponendi @wordpress/plokiredaktor pakk helistas InspectorControls kus asuvad kõik komponendid, mida vajame seadete juhtelementide loomiseks.

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

Pakendi oma GitHub repo teeb seletamisega head tööd InspectorControls. Meie näites saame seda kasutada API andmesätete (nt riik, liiga ja hooaeg) juhtimiseks. Siin on eelvaade, et saaksite aimu meie loodava kasutajaliidese kohta:

Ja kui need valikud on ploki seadetes tehtud, kasutame neid ka sisse ploki oma Edit funktsioon:

  { countriesList && (
    
  )}

Siin veendun, et kasutame tingimuslikku renderdamist, nii et funktsioon laadib ainult komponendi pärast riikide loend on laaditud. Kui sa selle üle imestad LeagueSettings komponent, see on kohandatud komponent, mille lõin eraldi components ploki alamkausta, et saaksime olla puhtam ja paremini organiseeritud Edit funktsioon sadade riigiandmete ridade asemel, mida ühes failis käsitleda.

Saame selle importida edit.js selline fail:

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

Järgmisena edastame vajalikud rekvisiidid LeagueSettings komponent vanemalt Edit komponent, et saaksime olekumuutujatele ja atribuutidele juurde pääseda LeagueSettings lapskomponent. Saame seda teha ka teiste meetoditega, näiteks Konteksti API et vältida rekvisiitide puurimist, kuid see, mis meil praegu on, on meie tegevuse jaoks täiesti sobiv.

Muud osad Edit funktsiooni saab ka komponentideks teisendada. Näiteks liiga edetabeli koodi saab panna eraldi komponendi sisse - näiteks võib-olla LeagueTable.js — ja seejärel imporditi täpselt nii, nagu meie importisime LeagueSettings sisse Edit funktsiooni.

Toas LeagueSettings.js fail

LeagueSettings on täpselt nagu teine Reageerige komponent millest saame põhikomponendi rekvisiidid hävitada. Ma kasutan kolme olekumuutujat ja täiendavat leagueID olekut, sest me eraldame ID-st league objekt:

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

Esimene asi, mida me tegema hakkame, on importida PanelBody komponent paketist @wordpress/block-editor:

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

…ja lisage see meie hulka return funktsioon:

Seal on muud paneelisildid ja atribuudid — nende kasutamine on minu isiklik eelistus. Ühtegi teist pole vaja… aga vaata kõiki komponente meil on võimalik teha seadete paneel! Mulle meeldib selle lihtsus PanelBody meie kasutusjuhtumi jaoks. See laieneb ja aheneb, et kuvada ploki rippmenüü sätted ja ongi kõik.

Sellest rääkides on meil nende valikute jaoks valik teha. Me võiksime kasutada SelectControl komponent või a ComboBoxControl, mida dokumendid kirjeldavad kui "täiustatud versiooni a SelectControl, millele lisandub võimalus otsida valikuid kasutades otsingusisendit. See on meie jaoks tore, sest riikide loend võib olla üsna pikk ja kasutajad saavad kas teha otsingupäringu või valida loendist.

Siin on näide sellest, kuidas a ComboboxControl võiks töötada meie riikide nimekirjas:

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

. ComboboxControl on konfigureeritav selles mõttes, et saame kasutada juhtelemendi sildi ja väärtuste jaoks erinevat suurust:

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

Kuid meie API andmed pole selles süntaksis, nii et saame teisendada countriesList massiiv, mis pärineb ploki kaasamisel emakomponendist:

let setupCountrySelect;

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

Kui riik on valitud hulgast ComboboxControl, riigi väärtus muutub ja me filtreerime andmed vastavalt:

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

Pange tähele, et riigi valiku muutumisel kasutan muudatuste käsitlemiseks veel kolme olekumuutujat:

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

Kuidas on lood muude seadistusvõimalustega?

Näitan koodi, mida kasutasin teiste seadete jaoks, kuid see võtab ainult tavajuhtumeid erijuhtumite jaoks vigade määratlemisel. Näiteks esineb mõnes riigis ja liigas tõrkeid järgmistel põhjustel:

• osade liigade tabeliseis puudub ja
• mõnel liigal on tabeliseis, kuid need pole ühes tabelis.

See ei ole JavaScripti ega Reacti õpetus, seega luban teil käsitleda kasutatava API erijuhtumeid:

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

Seadete valikute esitamine

aasta viimane artikkel, tegime plokkide redaktorisse nupu, mis toob API-st värskeid andmeid. Nüüd, kui meil on seaded, pole seda enam vaja. Noh, me vajame seda - lihtsalt mitte seal, kus see praegu on. Selle asemel, et panna see otse plokiredaktoris renderdatud plokki, teisaldame selle meie PanelBody seadete valikute esitamiseks.

Niisiis, tagasi sisse 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
      )
    }
    
  
)}

Siin on tulemus!

Oleme oma blokiga väga heas kohas. Saame selle renderdada plokiredaktoris ja saidi esiosas. Saame tuua andmeid välisest API-st, lähtudes meie loodud seadete valikust, mis andmeid filtreerivad. See on päris funktsionaalne!

Kuid on veel üks asi, millega peame tegelema. Praegu, kui salvestame plokki sisaldava lehe või postituse, lähtestatakse ploki jaoks valitud sätted. Teisisõnu, neid valikuid ei salvestata kuhugi. Nende valikute püsivaks muutmiseks on veel veidi tööd. See on koht, kuhu järgmises artiklis plaanime minna, nii et olge kursis.