Mukautetun WordPress-lohkon asetusten tallentaminen lohkoeditorissa

Olemme saaneet paljon aikaan tässä sarjassa! Loimme mukautetun WordPress-lohkon, joka hakee tiedot ulkoisesta API:sta ja renderöi sen käyttöliittymään. Sitten teimme tämän työn ja laajensimme sitä niin, että tiedot näkyvät myös suoraan WordPressin lohkoeditorissa. Sen jälkeen loimme lohkolle asetuskäyttöliittymän WordPressin komponenttien avulla InspectorControls paketti.

Meidän on käsiteltävä vielä yksi asia, ja se on asetusvaihtoehtojen tallentaminen. Jos muistamme edellisestä artikkelista, voimme teknisesti "tallentaa" valintamme estoasetusten käyttöliittymässä, mutta niitä ei itse asiassa tallenneta mihinkään. Jos teemme muutaman valinnan, tallennamme ne ja palaamme sitten viestiin, asetukset nollataan kokonaan.

Suljetaan silmukka ja tallennetaan ne asetukset, jotta ne pysyvät voimassa, kun seuraavan kerran muokkaamme viestiä, joka sisältää mukautetun lohkomme!

Tallennetaan asetusten attribuutteja

Työskentelemme API:n kanssa, joka tarjoaa meille jalkapallo jalkapallojoukkueiden sijoituksen, ja käytämme sitä hakemaan sijoituksia maan, liigan ja kauden perusteella. Voimme luoda uusia attribuutteja jokaiselle, kuten näin:

// index.js

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

Seuraavaksi meidän on asetettava määritteet kohteesta LeagueSettings.js. Aina ComboboxControl on päivitetty asetuskäyttöliittymässämme, meidän on asetettava määritteet käyttämällä setAttributes() menetelmä. Tämä oli yksinkertaisempaa, kun työskentelimme vain yhden datapäätepisteen kanssa. Mutta nyt, kun meillä on useita panoksia, se on hieman enemmän mukana.

Näin aion järjestää sen. Aion luoda uuden objektin LeagueSettings.js joka seuraa asetusmääritteiden ja niiden arvojen rakennetta.

// LeagueSettings.js

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

Aion myös muuttaa alkutilamuuttujia null vastaaviin asetusmuuttujiin.

// LeagueSettings.js

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

Jokaisessa handle______Change(), aion luoda a setLocalAttributes() jolla on argumentti, joka kloonaa ja korvaa edellisen localSettings vastustaa uusia maa-, liiga- ja kausiarvoja. Tämä tehdään levitysoperaattorin avulla.

// 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
}

Voimme määritellä setLocalAttributes() kuten tämä:

// LeagueSettings.js

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

Eli käytämme Object.assign() yhdistää nämä kaksi objektia. Sitten voimme kloonata newSettings vastustaa takaisin localSettings koska meidän on myös otettava huomioon jokainen asetusmäärite, kun siellä tehdään uusi valinta ja muutos tapahtuu.

Viimeinkin voimme käyttää setAttributes() kuten tavallisesti teemme lopullisen objektin asettamiseksi. Voit varmistaa, että yllä olevat attribuutit muuttuvat päivittämällä valinnat käyttöliittymässä.

Toinen tapa vahvistaa on tehdä console.log() DevToolsissa määritteiden etsimiseksi.

Katso tarkemmin tuota kuvakaappausta. Arvot on tallennettu attributes.settings. Voimme nähdä sen tapahtuvan livenä, koska React renderöi uudelleen aina, kun muutamme asetuksia. useState() koukku.

Arvojen näyttäminen lohkoasetusten käyttöliittymässä

Asetusarvojen tallentaminen itse ohjausvaihtoehtoihin ei ole kovin hyödyllistä, koska jokainen on riippuvainen toisesta asetusarvosta (esim. sarjakohtaiset sijoitukset riippuvat valitusta kaudesta). Mutta se on erittäin hyödyllinen tilanteissa, joissa asetusarvot ovat staattisia ja joissa asetukset ovat toisistaan ​​riippumattomia.

Muuttamatta nykyisistä asetuksista monimutkaisia, voimme luoda asetuspaneeliin toisen osion, joka näyttää nykyiset attribuutit. Voit valita tavan näyttää asetusarvot, mutta aion tuoda a Tip komponentti mistä @wordpress/components paketti:

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

Kun olen täällä, aion tehdä ehdollisen tarkistuksen arvoille ennen kuin näytän ne sisällä Tip komponentti:

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

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

Näin se päätyy toimimaan lohkoeditorissa:

API-tiedot ovat tehokkaampia, kun live-dataa voidaan näyttää ilman, että niitä tarvitsee päivittää manuaalisesti joka kerta. Tarkastelemme sitä tämän sarjan seuraavassa osassa.