Lagre innstillinger for en tilpasset WordPress-blokk i Block Editor

Vi har fått til en haug med ting i denne serien! Vi opprettet en tilpasset WordPress-blokk som henter data fra en ekstern API og gjengir den på frontend. Så tok vi det arbeidet og utvidet det slik at dataene også gjengis direkte i WordPress-blokkredigeringsprogrammet. Etter det opprettet vi et innstillingsgrensesnitt for blokken ved å bruke komponenter fra WordPress InspectorControls pakke.

Det er en siste bit for oss å dekke, og det er å lagre innstillingsalternativene. Hvis vi husker fra den siste artikkelen, er vi teknisk sett i stand til å "lagre" valgene våre i brukergrensesnittet for blokkinnstillinger, men de er faktisk ikke lagret noe sted. Hvis vi gjør noen få valg, lagrer dem og går tilbake til innlegget, innstillingene er fullstendig tilbakestilt.

La oss lukke loopen og lagre disse innstillingene slik at de vedvarer neste gang vi redigerer et innlegg som inneholder vår egendefinerte blokk!

Lagrer innstillingsattributter

Vi jobber med et API som gir oss fotball fotballagsrangering, og vi bruker den til å hente for å vise rangeringer basert på land, liga og sesong. Vi kan lage nye attributter for hver av disse som dette:

// index.js

attributes: {
  data: {
    type: "object",
  },
  settings: {
    type: "object",
    default: {
      country: {
        type: "string",
      },
      league: {
        type: "string",
      },
      season: {
        type: "string",
      },
    },
  },
},

Deretter må vi sette attributtene fra LeagueSettings.js. Når en ComboboxControl er oppdatert i innstillingsgrensesnittet vårt, må vi angi attributtene ved hjelp av setAttributes() metode. Dette var mer enkelt når vi bare jobbet med ett dataendepunkt. Men nå som vi har flere innspill, er det litt mer involvert.

Slik skal jeg organisere det. Jeg skal lage et nytt objekt i LeagueSettings.js som følger strukturen til innstillingsattributtene og deres verdier.

// LeagueSettings.js

let localSettings = {
  country: attributes.settings.country,
  league: attributes.settings.league,
  season: attributes.settings.season,
};

Jeg skal også endre starttilstandsvariablene fra null til de respektive innstillingsvariablene.

// LeagueSettings.js

const [country, setCountry] = useState(attributes.settings.country);
const [league, setLeague] = useState(attributes.settings.league);
const [season, setSeason] = useState(attributes.settings.season);

I hver av handle______Change(), jeg skal lage en setLocalAttributes() som har et argument som kloner og overskriver det forrige localSettings objekt med de nye land-, liga- og sesongverdiene. Dette gjøres ved hjelp av spredningsoperatøren.

// LeagueSettings.js

function handleCountryChange(value) {
  // Initial code
  setLocalAttributes({ ...localSettings, country: value });
  // Rest of the code
}

function handleLeagueChange(value) {
  // Initial code
  setLocalAttributes({ ...localSettings, league: value });
  // Rest of the code
}

function handleSeasonChange(value) {
  // Initial code
  setLocalAttributes({ ...localSettings, season: value });
  // Rest of the code
}

Vi kan definere setLocalAttributes() som dette:

// LeagueSettings.js

function setLocalAttributes(value) {
  let newSettings = Object.assign(localSettings, value);
  localSettings = { ...newSettings };
  setAttributes({ settings: localSettings });
}

Så vi bruker Object.assign() for å slå sammen de to objektene. Da kan vi klone newSettings objekt tilbake til localSettings fordi vi også må ta hensyn til hvert innstillingsattributt når det gjøres et nytt valg og en endring skjer.

Endelig kan vi bruke setAttributes() som vi vanligvis gjør for å sette det endelige objektet. Du kan bekrefte om attributtene ovenfor endres ved å oppdatere valgene i brukergrensesnittet.

En annen måte å bekrefte på er å gjøre en console.log() i DevTools for å finne attributtene.

Se nærmere på det skjermbildet. Verdiene er lagret i attributes.settings. Vi kan se det skje live fordi React gjengir hver gang vi gjør en endring i innstillingene, takket være useState() krok.

Viser verdiene i brukergrensesnittet for blokkinnstillinger

Det er lite nyttig å lagre innstillingsverdiene i selve kontrollalternativene siden hver av dem er avhengig av den andre innstillingsverdien (f.eks. rangeringer etter liga avhenger av hvilken sesong som er valgt). Men det er veldig nyttig i situasjoner der innstillingsverdiene er statiske og der innstillingene er uavhengige av hverandre.

Uten å gjøre gjeldende innstillinger kompliserte, kan vi lage en annen seksjon inne i innstillingspanelet som viser gjeldende attributter. Du kan velge hvordan du vil vise innstillingsverdiene, men jeg skal importere en Tip komponent fra @wordpress/components pakke:

// LeagueSettings.js
import { Tip } from "@wordpress/components";

Mens jeg er her, skal jeg gjøre en betinget sjekk for verdiene før jeg viser dem i Tip komponent:

  {country && league && season && (
    
      
Current Settings: 
      

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

Slik ender det opp med å fungere i blokkredigeringsprogrammet:

API-data er kraftigere når live-data kan vises uten å måtte oppdatere dem manuelt hver gang. Vi vil se nærmere på det i neste del av denne serien.