Opprette et innstillingsgrensesnitt for en tilpasset WordPress-blokk

Så langt har vi dekket hvordan du arbeider med data fra en ekstern API i en tilpasset WordPress-blokk. Vi gikk gjennom prosessen med hente disse dataene for bruk på grensesnittet av et WordPress-nettsted, og hvordan gjengi den direkte i WordPress Block Editor når du plasserer blokken i innhold. Denne gangen skal vi bygge bro over disse to artiklene ved å koble til blokkredigeringskontrollpanelet for å lage et innstillingsgrensesnitt for blokken vi laget.

Du kjenner kontrollpanelet jeg sikter til, ikke sant? Det er panelet til høyre som inneholder innlegg og blokkeringsinnstillinger i blokkredigeringsprogrammet.

Ser du det røde uthevede området? Det er kontrollpanelet. En avsnittsblokk er for øyeblikket valgt og innstillingene for den vises i panelet. Vi kan endre stiler, farger, typografi ... en rekke ting!

Vel, det er akkurat det vi gjør denne gangen. Vi skal lage kontrollene for innstillingene for fotballrankingsblokken vi jobbet med i de to siste artiklene. Forrige gang laget vi en knapp i blokken vår som henter de eksterne dataene til fotballrankingen. Vi visste allerede URLen og endepunktene vi trengte. Men hva om vi ønsker å hente rangering for et annet land? Eller kanskje en annen liga? Hva med data fra en annen sesong?

Vi trenger skjemakontroller for å gjøre det. Vi kan bruke interaktive React-komponenter - som Reager-Velg – for å bla gjennom de forskjellige API-alternativene som er tilgjengelige for å analysere disse dataene. Men det er ikke nødvendig siden WordPress leveres med en haug med kjernekomponenter som vi kobler rett inn i!

De dokumentasjon for disse komponentene - kalt InspectorControls — blir bedre i WordPress Block Editor Håndbok. Det vil bli enda bedre over tid, men i mellomtiden har vi også WordPress Gutenberg historiebok og WordPress Gutenberg-komponenter nettsteder for ytterligere hjelp.

API-arkitekturen

Før vi hekter på noe, er det lurt å kartlegge hva det er vi trenger i utgangspunktet. Jeg har kartlagt strukturen til RapidAPI-dataene vi henter, slik at vi vet hva som er tilgjengelig for oss:

Sesonger og land er to endepunkter på toppnivå som tilordnes et endepunkt i en liga. Derfra har vi resten av dataene vi allerede bruker for å fylle ut rangeringstabellen. Så det vi ønsker å gjøre er å lage innstillinger i WordPress Block Editor som filtrerer dataene etter sesong, land og liga, og sender deretter de filtrerte dataene inn i rangeringstabellen. Det gir oss muligheten til å slippe blokkeringen på en hvilken som helst WordPress-side eller post og vise varianter av dataene i blokken.

For å få plassering, må vi først få ligaene. Og for å få ligaene, må vi først få landene og/eller sesongene. Du kan se de ulike endepunktene i RapidAPI-dashbordet.

Det finnes ulike kombinasjoner av data som vi kan bruke for å fylle ut rangeringene, og du kan ha en preferanse for hvilke data du ønsker. Av hensyn til denne artikkelen skal vi lage følgende alternativer i blokkinnstillingspanelet:

• Velg land
• Velg League
• Velg sesong

Da har vi en knapp for å sende inn disse valgene og hente de relevante dataene og sende dem inn i rangeringstabellen.

Last inn og lagre en liste over land

Vi kan ikke velge hvilket land vi vil ha data for hvis vi ikke har en liste over land å velge mellom. Så vår første oppgave er å hente en liste over land fra RapidAPI.

Det ideelle er å hente listen over land når blokkeringen faktisk brukes i siden eller innleggsinnholdet. Det er ikke nødvendig å hente noe hvis blokken ikke er i bruk. Tilnærmingen er veldig lik det vi gjorde i den første artikkelen, forskjellen er at vi bruker et annet API-endepunkt og forskjellige attributter for å lagre listen over returnerte land. Det er andre WordPress-måter å hente data på, som api-henting, men det er utenfor rammen av det vi gjør her.

Vi kan enten inkludere landlisten manuelt etter å ha kopiert den fra API-dataene, eller vi kan bruke et eget API eller bibliotek for å fylle ut landene. Men API-en vi bruker har allerede en liste over land, så jeg ville bare brukt ett av endepunktene. La oss sørge for at den første landlisten lastes inn når blokken settes inn på siden eller legger ut innhold i blokkredigeringsprogrammet:

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

Vi har en tilstandsvariabel for å lagre listen over land. Deretter skal vi importere en komponent fra @wordpress/block-editor pakken heter InspectorControls det er der alle komponentene vi trenger for å lage innstillingskontrollene våre, er plassert.

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

Pakkens GitHub repo gjør en god jobb med å forklare InspectorControls. I vårt eksempel kan vi bruke den til å kontrollere API-datainnstillingene som Country, League og Season. Her er en forhåndsvisning slik at du får en ide om brukergrensesnittet vi lager:

Og når disse valgene er gjort i blokkinnstillingene, bruker vi dem i blokkens Edit funksjon:

  { countriesList && (
    
  )}

Her sørger jeg for at vi bruker betinget gjengivelse slik at funksjonen bare laster komponenten etter listen over land er lastet inn. Hvis du lurer på det LeagueSettings komponent, det er en tilpasset komponent jeg opprettet i en separat components undermappe i blokken slik at vi kan ha en renere og mer organisert Edit funksjon i stedet for hundrevis av linjer med landdata å håndtere i en enkelt fil.

Vi kan importere det til edit.js fil slik:

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

Deretter sender vi de nødvendige rekvisittene til LeagueSettings komponent fra forelderen Edit komponent slik at vi kan få tilgang til tilstandsvariablene og attributtene fra LeagueSettings barnekomponent. Vi kan også gjøre det med andre metoder som Kontekst-API for å unngå propellboring, men det vi har akkurat nå passer perfekt for det vi holder på med.

De andre delene av Edit funksjon kan også konverteres til komponenter. For eksempel kan ligaens plasseringskode settes i en separat komponent - som kanskje LeagueTable.js — og deretter importert akkurat som vi importerte LeagueSettings inn Edit funksjon.

Inne i LeagueSettings.js fil

LeagueSettings er akkurat som en annen Reaksjonskomponent hvorfra vi kan destrukturere rekvisittene fra den overordnede komponenten. Jeg skal bruke tre tilstandsvariabler og en ekstra leagueID stat fordi vi skal hente ID-en fra league gjenstand:

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

Det første vi skal gjøre er å importere PanelBody komponent fra @wordpress/block-editor-pakken:

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

...og inkludere det i vår return funksjon:

Det finnes andre panelkoder og attributter — Det er bare min personlige preferanse å bruke disse. Ingen av de andre er påkrevd... men se på alle komponentene vi har tilgjengelig for å lage et innstillingspanel! Jeg liker enkelheten i PanelBody for vårt bruk. Den utvides og kollapser for å avsløre rullegardininnstillingene for blokken, og det er det.

Når vi snakker om det, har vi et valg å gjøre for disse valgene. Vi kunne bruke SelectControl komponent eller en ComboBoxControl, som dokumentene beskriver som "en forbedret versjon av en SelectControl, med tillegg av å kunne søke etter alternativer ved å bruke en søkeinndata." Det er hyggelig for oss fordi listen over land kan bli ganske lang og brukere vil enten kunne gjøre et søk eller velge fra en liste.

Her er et eksempel på hvordan en ComboboxControl kan fungere for landlisten vår:

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

De ComboboxControl er konfigurerbar i den forstand at vi kan bruke forskjellige størrelser for kontrollens etikett og verdier:

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

Men API-dataene våre er ikke i denne syntaksen, så vi kan konvertere countriesList array som kommer fra den overordnede komponenten når blokken er inkludert:

let setupCountrySelect;

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

Når et land er valgt fra ComboboxControl, endres landsverdien, og vi filtrerer dataene deretter:

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

Merk at jeg bruker ytterligere tre tilstandsvariabler for å håndtere endringer når landvalget endres:

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

Hva med de andre innstillingsalternativene?

Jeg vil vise koden jeg brukte for de andre innstillingene, men alt det gjør er å ta hensyn til vanlige tilfeller mens jeg definerer feil for spesielle tilfeller. For eksempel vil det være feil i enkelte land og ligaer fordi:

• det er ingen plasseringer for noen ligaer, og
• noen ligaer har plasseringer, men de er ikke på en enkelt tabell.

Dette er ikke en JavaScript- eller React-opplæring, så jeg lar deg håndtere de spesielle tilfellene for API-en du planlegger å bruke:

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

Sender inn valgene

på siste artikkelen, laget vi en knapp i blokkredigeringsprogrammet som henter ferske data fra API. Det er ikke lenger behov for det nå som vi har innstillinger. Vel, vi trenger det - bare ikke der det er nå. I stedet for å ha den direkte i blokken som er gjengitt i blokkredigeringsprogrammet, skal vi flytte den til vår PanelBody komponent for å sende inn innstillingsvalgene.

Så inn igjen 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
      )
    }
    
  
)}

Her er resultatet!

Vi er på et veldig bra sted med blokken vår. Vi kan gjengi det i blokkredigeringsprogrammet og frontenden av nettstedet. Vi kan hente data fra en ekstern API basert på et utvalg innstillinger vi har laget som filtrerer dataene. Den er ganske funksjonell!

Men det er en annen ting vi må ta tak i. Akkurat nå, når vi lagrer siden eller innlegget som inneholder blokken, tilbakestilles innstillingene vi valgte for blokkeringen. Med andre ord, disse valgene lagres ikke noe sted. Det er litt mer arbeid for å gjøre disse valgene vedvarende. Det er dit vi planlegger å gå i neste artikkel, så følg med.