Shranjevanje nastavitev za blok WordPress po meri v urejevalnik blokov

V tej seriji smo dosegli kup stvari! Ustvarili smo WordPress blok po meri, ki pridobiva podatke iz zunanjega API-ja in jih upodablja na sprednji strani. Nato smo to delo prevzeli in ga razširili, tako da so podatki tudi upodobljeni neposredno v urejevalniku blokov WordPress. Po tem smo ustvarili uporabniški vmesnik z nastavitvami za blok z uporabo komponent iz WordPressa InspectorControls paket.

Še zadnji del, ki ga moramo pokriti, je shranjevanje možnosti nastavitev. Če se spomnimo iz prejšnjega članka, tehnično lahko svoje izbire »shranimo« v uporabniškem vmesniku nastavitev blokov, vendar te dejansko niso nikjer shranjene. Če naredimo nekaj izbir, jih shranimo in se nato vrnemo k objavi, se nastavitve popolnoma ponastavijo.

Zaprimo zanko in shranimo te nastavitve, da bodo obdržale naslednjič, ko bomo urejali objavo, ki vsebuje naš blok po meri!

Shranjevanje atributov nastavitev

Delamo z API-jem, ki nam ponuja nogomet uvrstitev nogometnih ekip in jo uporabljamo za pridobivanje za prikaz uvrstitev na podlagi države, lige in sezone. Za vsakega od njih lahko ustvarimo nove atribute, kot je ta:

// index.js

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

Nato moramo nastaviti atribute iz LeagueSettings.js. Kadar koli ComboboxControl posodobljen v našem uporabniškem vmesniku nastavitev, moramo atribute nastaviti z uporabo setAttributes() metoda. To je bilo bolj preprosto, ko smo delali samo z eno končno točko podatkov. Toda zdaj, ko imamo več vhodov, je malo bolj vključeno.

Takole bom to organiziral. Ustvaril bom nov predmet v LeagueSettings.js ki sledi strukturi atributov nastavitev in njihovih vrednosti.

// LeagueSettings.js

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

Prav tako bom spremenil spremenljivke začetnega stanja iz null na ustrezne spremenljivke nastavitev.

// LeagueSettings.js

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

V vsakem od handle______Change(), ustvaril bom a setLocalAttributes() ki ima argument, ki klonira in prepisuje prejšnjega localSettings objekt z novo državo, ligo in vrednostmi sezone. To se naredi s pomočjo operaterja širjenja.

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

Lahko definiramo setLocalAttributes() Všečkaj to:

// LeagueSettings.js

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

Torej, uporabljamo Object.assign() za združitev obeh predmetov. Potem lahko kloniramo newSettings predmet nazaj na localSettings ker moramo upoštevati tudi vsak atribut nastavitev, ko je narejen nov izbor in pride do spremembe.

Končno lahko uporabimo setAttributes() kot običajno za nastavitev končnega predmeta. Če se zgornji atributi spreminjajo, lahko potrdite tako, da posodobite izbire v uporabniškem vmesniku.

Drug način za potrditev je, da naredite console.log() v DevTools, da poiščete atribute.

Poglejte bližje ta posnetek zaslona. Vrednosti so shranjene v attributes.settings. To lahko vidimo v živo, ker React znova upodobi vsakič, ko spremenimo nastavitve, zahvaljujoč useState() kavelj.

Prikaz vrednosti v uporabniškem vmesniku nastavitev blokov

Shranjevanje vrednosti nastavitev v samih kontrolnih možnostih ni zelo uporabno, saj je vsaka odvisna od druge vrednosti nastavitve (npr. uvrstitev po ligi je odvisna od izbrane sezone). Je pa zelo uporaben v situacijah, ko so vrednosti nastavitev statične in kjer so nastavitve neodvisne ena od druge.

Ne da bi zapletali trenutne nastavitve, lahko znotraj plošče z nastavitvami ustvarimo še en razdelek, ki prikazuje trenutne atribute. Izberete lahko svoj način za prikaz vrednosti nastavitev, vendar bom uvozil a Tip komponenta Iz @wordpress/components Paket:

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

Medtem ko sem tukaj, bom opravil pogojno preverjanje vrednosti, preden jih prikažem znotraj Tip komponenta:

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

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

Takole deluje v urejevalniku blokov:

Podatki API-ja so zmogljivejši, če jih je mogoče prikazati v živo, ne da bi jih bilo treba vsakič ročno posodobiti. To bomo preučili v naslednjem delu te serije.