Salvarea setărilor pentru un bloc WordPress personalizat în Editorul de blocuri

Am realizat o grămadă de lucruri în această serie! Am creat un bloc WordPress personalizat care preia date dintr-un API extern și le redă pe front-end. Apoi am luat acea muncă și am extins-o, astfel încât datele să fie randate și direct în editorul de blocuri WordPress. După aceea, am creat o interfață de utilizare de setări pentru bloc folosind componente din WordPress InspectorControls pachet.

Mai avem de acoperit un ultim și acesta este salvarea opțiunilor de setări. Dacă ne amintim din ultimul articol, suntem capabili din punct de vedere tehnic să „salvam” selecțiile noastre în interfața de utilizare a setărilor de bloc, dar acestea nu sunt de fapt stocate nicăieri. Dacă facem câteva selecții, le salvăm, apoi revenim la postare, setările sunt complet resetate.

Să închidem bucla și să salvăm acele setări, astfel încât să persistă data viitoare când edităm o postare care conține blocul nostru personalizat!

Salvarea atributelor setărilor

Lucrăm cu un API care ne oferă fotbal clasamentul echipelor de fotbal și îl folosim pentru a prelua pentru afișarea clasamentelor în funcție de țară, ligă și sezon. Putem crea atribute noi pentru fiecare dintre acestea, cum ar fi:

// index.js

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

Apoi, trebuie să setăm atributele de la LeagueSettings.js. Ori de câte ori a ComboboxControl este actualizat în UI de setări, trebuie să setăm atributele folosind setAttributes() metodă. Acest lucru a fost mai simplu când lucram doar cu un punct final de date. Dar acum că avem mai multe intrări, este puțin mai implicat.

Așa o să o organizez. Voi crea un obiect nou în LeagueSettings.js care urmează structura atributelor setărilor și a valorilor acestora.

// LeagueSettings.js

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

De asemenea, voi schimba variabilele de stare inițială din null la variabilele de setări respective.

// LeagueSettings.js

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

În fiecare dintre handle______Change(), voi crea un setLocalAttributes() care are un argument care clonează și suprascrie precedentul localSettings obiect cu noile valori ale țării, ligii și sezonului. Acest lucru se realizează cu ajutorul operatorului de răspândire.

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

Putem defini setLocalAttributes() asa:

// LeagueSettings.js

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

Deci, folosim Object.assign() pentru a îmbina cele două obiecte. Apoi putem clona newSettings obiect înapoi la localSettings deoarece trebuie să luăm în considerare și fiecare atribut de setări atunci când se face o nouă selecție și are loc o modificare.

În cele din urmă, putem folosi setAttributes() așa cum facem în mod normal pentru a seta obiectul final. Puteți confirma dacă atributele de mai sus se modifică prin actualizarea selecțiilor din interfața de utilizare.

O altă modalitate de a confirma este să faci un console.log() în DevTools pentru a găsi atributele.

Uită-te mai atent la acea captură de ecran. Valorile sunt stocate în attributes.settings. Putem vedea cum se întâmplă în direct, deoarece React redă din nou de fiecare dată când facem o schimbare în setări, datorită useState() cârlig.

Afișarea valorilor în UI de setări blocuri

Nu este foarte util să stocați valorile setărilor în opțiunile de control, deoarece fiecare este dependentă de cealaltă valoare a setărilor (de exemplu, clasamentul pe ligă depinde de sezonul selectat). Dar este foarte util în situațiile în care valorile setărilor sunt statice și în care setările sunt independente unele de altele.

Fără a complica setările curente, putem crea o altă secțiune în interiorul panoului de setări care arată atributele curente. Puteți alege modul în care să afișați valorile setărilor, dar voi importa a Tip component de la @wordpress/components pachet:

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

În timp ce sunt aici, voi face o verificare condiționată a valorilor înainte de a le afișa în interiorul Tip componentă:

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

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

Iată cum funcționează asta în editorul de blocuri:

Datele API sunt mai puternice atunci când datele live pot fi afișate fără a fi nevoie să le actualizați manual de fiecare dată. Vom analiza asta în următoarea ediție a acestei serii.