Asetuskäyttöliittymän luominen mukautetulle WordPress-lohkolle

Tähän mennessä olemme käsitelleet ulkoisen API:n tietojen käsittelyä mukautetussa WordPress-lohkossa. Kävelimme prosessin läpi noutamalla nämä tiedot etupäässä käytettäväksi WordPress-sivustosta ja miten renderöi se suoraan WordPress Block Editorissa kun sijoitat lohkon sisältöön. Tällä kertaa aiomme yhdistää nämä kaksi artikkelia kytkemällä lohkoeditorin ohjauspaneeliin luodaksemme asetuskäyttöliittymän tekemällemme lohkolle.

Tiedätkö ohjauspaneelin, johon tarkoitan, eikö niin? Oikealla oleva paneeli sisältää viesti- ja estoasetukset lohkoeditorissa.

Näetkö tuon punaisella korostetun alueen? Se on ohjauspaneeli. Kappalelohko on tällä hetkellä valittuna ja sen asetukset näkyvät paneelissa. Voimme vaihtaa tyylejä, värejä, typografiaa… monia asioita!

No, juuri sitä me teemme tällä kertaa. Aiomme luoda säätimet Football Rankings -lohkon asetuksille, joita työskentelimme kahdessa edellisessä artikkelissa. Viime kerralla teimme lohkoomme painikkeen, joka hakee ulkoiset tiedot jalkapallon rankingista. Tiesimme jo tarvitsemamme URL-osoitteen ja päätepisteet. Mutta entä jos haluamme hakea sijoituksen toiselle maalle? Tai kenties eri liiga? Entä eri kauden tiedot?

Tarvitsemme lomakehallintaa tehdäksemme sen. Voisimme hyödyntää interaktiivisia React-komponentteja - kuten Reagoi-Valitse — selata erilaisia ​​API-vaihtoehtoja, jotka ovat käytettävissä näiden tietojen jäsentämiseksi. Mutta sille ei ole tarvetta, sillä WordPressin mukana tulee joukko ydinkomponentteja, joihin liitämme suoraan!

- dokumentointi näille komponenteille - ns InspectorControls - on paranemassa WordPress Block Editorin käsikirja. Se paranee ajan myötä, mutta sillä välin meillä on myös WordPress Gutenbergin tarinakirja ja WordPressin Gutenbergin komponentit sivustoja lisäapua varten.

API-arkkitehtuuri

Ennen kuin puutumme mihinkään, on hyvä idea kartoittaa, mitä tarvitsemme. Olen kartoittanut haemme RapidAPI-tietojen rakenteen, jotta tiedämme, mitä meillä on saatavilla:

Vuodenajat ja maat ovat kaksi huipputason päätepistettä, jotka liittyvät liigan päätepisteeseen. Sieltä meillä on loput tiedoista, joita käytämme jo sijoitustaulukon täyttämiseen. Haluamme siis luoda WordPress Block Editorissa asetukset, jotka suodattavat tiedot kauden, maan ja liigan mukaan ja välittävät sitten suodatetut tiedot ranking-taulukkoon. Tämä antaa meille mahdollisuuden pudottaa lohkon millä tahansa WordPress-sivulla tai viestissä ja näyttää muunnelmia lohkon tiedoista.

Saadaksemme sijoitukset meidän on ensin saatava liigat. Ja saadaksemme liigat, meidän on ensin hankittava maat ja/tai vuodenajat. Voit tarkastella erilaisia ​​päätepisteitä RapidAPI-hallintapaneelissa.

On olemassa erilaisia ​​​​datayhdistelmiä, joita voimme käyttää sijoituksen täyttämiseen, ja saatat valita, mitä tietoja haluat. Tämän artikkelin vuoksi aiomme luoda seuraavat vaihtoehdot lohkoasetuspaneeliin:

• Valitse maa
• Valitse Liiga
• Valitse Kausi

Sitten meillä on painike, jolla voit lähettää valinnat ja hakea tarvittavat tiedot ja siirtää ne sijoitustaulukkoon.

Lataa ja tallenna luettelo maista

Emme voi valita, mistä maasta haluamme tietoja, jos meillä ei ole luetteloa maista, joista valita. Joten ensimmäinen tehtävämme on napata luettelo maista RapidAPI:sta.

Ihanteellinen asia on noutaa luettelo maista, kun lohkoa todella käytetään sivulla tai julkaisussa. Mitään ei tarvitse hakea, jos lohko ei ole käytössä. Lähestymistapa on hyvin samanlainen kuin mitä teimme ensimmäinen artikkeli, erona on se, että käytämme eri API-päätepistettä ja eri attribuutteja palautettujen maiden luettelon tallentamiseen. On olemassa muita WordPress-tapoja hakea tietoja, kuten api-haku, mutta se ei kuulu toimintamme piiriin.

Voimme joko sisällyttää maaluettelon manuaalisesti sen jälkeen, kun se on kopioitu API-tiedoista, tai voimme käyttää erillistä sovellusliittymää tai kirjastoa maiden täyttämiseen. Mutta käyttämämme API sisältää jo luettelon maista, joten käyttäisin vain yhtä sen päätepisteistä. Varmistetaan, että alkuperäinen maaluettelo latautuu, kun lohko lisätään sivulle tai julkaistaan ​​sisältöä lohkoeditorissa:

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

Meillä on tilamuuttuja maiden luettelon tallentamiseen. Seuraavaksi tuomme komponentin tiedostosta @wordpress/block-editor nimeltään paketti InspectorControls siellä sijaitsevat kaikki komponentit, joita tarvitsemme asetusten säätimien luomiseen.

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

Paketin GitHub repo tekee hyvää selittämistä InspectorControls. Esimerkissämme voimme käyttää sitä hallitsemaan API-tietoasetuksia, kuten maa, liiga ja kausi. Tässä on esikatselu, jotta saat käsityksen tekemästämme käyttöliittymästä:

Ja kun nämä valinnat on tehty lohkoasetuksissa, käytämme niitä lohkon Edit toiminto:

  { countriesList && (
    
  )}

Tässä varmistan, että käytämme ehdollista renderöintiä niin, että toiminto lataa vain komponentin jälkeen maiden luettelo on ladattu. Jos sitä ihmettelet LeagueSettings komponentti, se on mukautettu komponentti, jonka loin erillisenä components alikansio lohkossa, jotta voimme olla puhtaampia ja järjestäytyneempiä Edit toiminto satojen rivejen sijasta maatietoja käsitellä yhdessä tiedostossa.

Voimme tuoda sen sisään edit.js tiedosto näin:

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

Seuraavaksi välitämme tarvittavat rekvisiitta LeagueSettings komponentti vanhemmalta Edit komponentti, jotta voimme käyttää tilamuuttujia ja attribuutteja LeagueSettings lapsikomponentti. Voimme tehdä sen myös muilla menetelmillä, kuten Konteksti-sovellusliittymä välttääksemme potkuriporauksen, mutta se, mitä meillä on tällä hetkellä, sopii täydellisesti siihen, mitä teemme.

Muut osat Edit Toiminto voidaan myös muuntaa komponenteiksi. Esimerkiksi sarjataulukon koodi voidaan laittaa erillisen komponentin sisään - kuten ehkä LeagueTable.js - ja sitten tuodaan aivan kuten toimme LeagueSettings osaksi Edit toiminto.

Sisällä LeagueSettings.js tiedosto

LeagueSettings on aivan kuin toinen Reagoi komponentti josta voimme tuhota emokomponentin rekvisiitta. Aion käyttää kolmea tilamuuttujaa ja ylimääräistä leagueID tilassa, koska aiomme poimia tunnuksen league esine:

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

Ensimmäinen asia, jonka aiomme tehdä, on tuoda PanelBody komponentti @wordpress/block-editor-paketista:

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

…ja sisällytä se joukkoomme return toiminto:

On muut paneelitunnisteet ja attribuutit - On vain henkilökohtainen mieltymys käyttää näitä. Mitään muita ei vaadita… mutta katso kaikki komponentit meillä on mahdollisuus tehdä asetuspaneeli! Pidän yksinkertaisuudesta PanelBody meidän käyttötapauksellemme. Se laajenee ja kutistuu paljastaen lohkon pudotusvalikon asetukset, ja siinä kaikki.

Siitä puheen ollen, meillä on valinnanvaraa näiden valintojen osalta. Voisimme käyttää SelectControl komponentti tai a ComboBoxControl, jota asiakirjat kuvailevat "parannelluksi versioksi a SelectControl, jonka lisäksi voit etsiä vaihtoehtoja hakusyötteen avulla." Se on meille mukavaa, koska maiden luettelo voi olla melko pitkä ja käyttäjät voivat joko tehdä hakukyselyn tai valita luettelosta.

Tässä on esimerkki siitä, kuinka a ComboboxControl voisi toimia maaluettelossamme:

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

- ComboboxControl on konfiguroitavissa siinä mielessä, että voimme käyttää eri kokoja ohjausobjektin tunnisteelle ja arvoille:

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

Mutta API-tietomme eivät ole tässä syntaksissa, joten voimme muuntaa countriesList taulukko, joka tulee pääkomponentista, kun lohko sisällytetään:

let setupCountrySelect;

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

Kun maa on valittu joukosta ComboboxControl, maan arvo muuttuu ja suodatamme tiedot sen mukaisesti:

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

Huomaa, että käytän kolmea muuta tilamuuttujaa muutosten käsittelemiseen, kun maan valinta muuttuu:

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

Entä muut asetusvaihtoehdot?

Näytän koodin, jota käytin muissa asetuksissa, mutta se vain ottaa normaalit tapaukset huomioon määritellessään virheitä erikoistapauksille. Esimerkiksi joissakin maissa ja liigoissa on virheitä, koska:

• joissakin liigoissa ei ole sijoituksia, ja
• joillakin liigoilla on sijoitukset, mutta ne eivät ole yhdessä taulukossa.

Tämä ei ole JavaScript- tai React-opetusohjelma, joten annan sinun käsitellä erikoistapauksia API:lle, jota aiot käyttää:

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

Asetusten valintojen lähettäminen

In viimeinen artikkeli, teimme lohkoeditoriin painikkeen, joka hakee tuoretta dataa API:sta. Sitä ei enää tarvita nyt, kun meillä on asetukset. No, me tarvitsemme sitä – vain emme siellä, missä se tällä hetkellä on. Sen sijaan, että se olisi suoraan lohkoeditorissa hahmonnetussa lohkossa, siirrämme sen PanelBody komponenttia asetusten valintojen lähettämiseen.

Eli takaisin sisään 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
      )
    }
    
  
)}

Tässä tulos!

Olemme lohkomme kanssa erittäin hyvässä paikassa. Voimme renderoida sen lohkoeditorissa ja sivuston etuosassa. Voimme hakea tietoja ulkoisesta API:sta luomiemme asetusten perusteella, jotka suodattavat tiedot. Se on ihan hirveän toimiva!

Mutta on toinen asia, johon meidän on puututtava. Juuri nyt, kun tallennamme lohkon sisältävän sivun tai viestin, estolle valitsemamme asetukset nollataan. Toisin sanoen niitä valintoja ei tallenneta minnekään. Näistä valinnoista on vielä vähän työtä. Sinne aiomme mennä seuraavassa artikkelissa, joten pysy kuulolla.