Salvataggio delle impostazioni per un blocco WordPress personalizzato nell'editor blocchi

Abbiamo realizzato un sacco di cose in questa serie! Abbiamo creato un blocco WordPress personalizzato che recupera i dati da un'API esterna e li rende sul front-end. Quindi abbiamo preso quel lavoro e l'abbiamo esteso in modo che i dati vengano visualizzati anche direttamente nell'editor di blocchi di WordPress. Successivamente, abbiamo creato un'interfaccia utente delle impostazioni per il blocco utilizzando i componenti di WordPress InspectorControls pacchetto.

C'è un ultimo pezzo da coprire e questo sta salvando le opzioni delle impostazioni. Se ricordiamo dall'ultimo articolo, siamo tecnicamente in grado di "salvare" le nostre selezioni nell'interfaccia utente delle impostazioni di blocco, ma in realtà non vengono memorizzate da nessuna parte. Se effettuiamo alcune selezioni, le salviamo, quindi torniamo al post, le impostazioni vengono completamente ripristinate.

Chiudiamo il ciclo e salviamo quelle impostazioni in modo che persistano la prossima volta che modifichiamo un post che contiene il nostro blocco personalizzato!

Salvataggio degli attributi delle impostazioni

Stiamo lavorando con un'API che ci fornisce calcio classifica della squadra di calcio e la stiamo usando per recuperare la visualizzazione delle classifiche in base a paese, campionato e stagione. Possiamo creare nuovi attributi per ognuno di quelli come questo:

// index.js

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

Successivamente, dobbiamo impostare gli attributi from LeagueSettings.js. ogni volta che un ComboboxControl viene aggiornato nell'interfaccia utente delle impostazioni, è necessario impostare gli attributi utilizzando il file setAttributes() metodo. Questo era più semplice quando lavoravamo solo con un endpoint di dati. Ma ora che abbiamo più input, è un po' più complicato.

Ecco come lo organizzerò. Creerò un nuovo oggetto in LeagueSettings.js che segue la struttura degli attributi delle impostazioni e dei loro valori.

// LeagueSettings.js

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

Ho anche intenzione di cambiare le variabili di stato iniziali da null alle rispettive variabili di impostazione.

// LeagueSettings.js

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

In ciascuno dei handle______Change(), creerò un file setLocalAttributes() che ha un argomento che clona e sovrascrive il precedente localSettings oggetto con i nuovi valori di paese, campionato e stagione. Questo viene fatto usando l'aiuto dell'operatore spread.

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

Possiamo definire il setLocalAttributes() come questo:

// LeagueSettings.js

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

Quindi, stiamo usando Object.assign() per unire i due oggetti. Quindi possiamo clonare il file newSettings oggetto di nuovo a localSettings perché dobbiamo anche tenere conto di ogni attributo delle impostazioni quando viene effettuata una nuova selezione e si verifica una modifica.

Infine, possiamo usare il file setAttributes() come facciamo normalmente per impostare l'oggetto finale. Puoi confermare se gli attributi di cui sopra stanno cambiando aggiornando le selezioni nell'interfaccia utente.

Un altro modo per confermare è eseguire un console.log() in DevTools per trovare gli attributi.

Guarda più da vicino quello screenshot. I valori sono memorizzati in attributes.settings. Siamo in grado di vederlo accadere dal vivo perché React esegue nuovamente il rendering ogni volta che apportiamo una modifica alle impostazioni, grazie al useState() gancio.

Visualizzazione dei valori nell'interfaccia utente delle impostazioni dei blocchi

Non è molto utile memorizzare i valori delle impostazioni nelle stesse opzioni di controllo poiché ognuno dipende dall'altro valore di impostazione (ad es. la classifica per campionato dipende dalla stagione selezionata). Ma è molto utile in situazioni in cui i valori delle impostazioni sono statici e in cui le impostazioni sono indipendenti l'una dall'altra.

Senza complicare le impostazioni correnti, possiamo creare un'altra sezione all'interno del pannello delle impostazioni che mostra gli attributi correnti. Puoi scegliere il modo in cui visualizzare i valori delle impostazioni, ma importerò un file Tip componente dal @wordpress/components pacchetto:

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

Mentre sono qui, eseguirò un controllo condizionale dei valori prima di visualizzarli all'interno del file Tip componente:

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

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

Ecco come finisce per funzionare nell'editor di blocchi:

I dati API sono più potenti quando i dati in tempo reale possono essere visualizzati senza doverli aggiornare manualmente ogni volta. Lo esamineremo nella prossima puntata di questa serie.