Gem indstillinger for en brugerdefineret WordPress-blok i Block Editor

Vi har opnået en masse ting i denne serie! Vi oprettede en brugerdefineret WordPress-blok, der henter data fra en ekstern API og gengiver den på frontend. Så tog vi det arbejde og udvidede det, så dataene også gengives direkte i WordPress-blokeditoren. Derefter oprettede vi en indstillings-UI for blokken ved hjælp af komponenter fra WordPress InspectorControls pakke.

Der er en sidste smule for os at dække, og det er at gemme indstillingsmulighederne. Hvis vi husker fra den sidste artikel, er vi teknisk set i stand til at "gemme" vores valg i blokindstillingernes brugergrænseflade, men de er faktisk ikke gemt nogen steder. Hvis vi foretager et par valg, gem dem, og vend derefter tilbage til posten, indstillingerne nulstilles fuldstændigt.

Lad os lukke sløjfen og gemme disse indstillinger, så de bevarer næste gang vi redigerer et indlæg, der indeholder vores brugerdefinerede blok!

Gemmer indstillingsattributter

Vi arbejder med en API, der giver os Fodbold fodboldholdsrangering, og vi bruger den til at hente for at vise ranglister baseret på land, liga og sæson. Vi kan oprette nye attributter for hver af dem som dette:

// index.js

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

Dernæst skal vi indstille attributterne fra LeagueSettings.js. Hver gang en ComboboxControl er opdateret i vores indstillinger-brugergrænseflade, skal vi indstille attributterne ved hjælp af setAttributes() metode. Dette var mere ligetil, da vi kun arbejdede med ét dataendepunkt. Men nu hvor vi har flere input, er det lidt mere involveret.

Sådan vil jeg organisere det. Jeg vil oprette et nyt objekt i LeagueSettings.js der følger strukturen af ​​indstillingsattributterne og deres værdier.

// LeagueSettings.js

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

Jeg vil også ændre initialtilstandsvariablerne fra null til de respektive indstillingsvariabler.

// 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 af de handle______Change(), jeg skal lave en setLocalAttributes() der har et argument, der kloner og overskriver det foregående localSettings objekt med de nye lande-, liga- og sæsonværdier. Dette gøres ved hjælp af 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() sådan her:

// LeagueSettings.js

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

Så vi bruger Object.assign() at flette de to objekter sammen. Så kan vi klone newSettings objekt tilbage til localSettings fordi vi også skal tage højde for hver indstillingsattribut, når der foretages et nyt valg, og der sker en ændring.

Endelig kan vi bruge setAttributes() som vi normalt gør for at sætte det endelige objekt. Du kan bekræfte, om ovenstående attributter ændres, ved at opdatere valgene i brugergrænsefladen.

En anden måde at bekræfte er at lave en console.log() i DevTools for at finde attributterne.

Se nærmere på det skærmbillede. Værdierne er gemt i attributes.settings. Vi er i stand til at se det ske live, fordi React gengiver hver gang vi foretager en ændring i indstillingerne, takket være useState() krog.

Visning af værdierne i blokindstillinger UI

Det er ikke særlig nyttigt at gemme indstillingsværdierne i selve kontrolmulighederne, da hver enkelt er afhængig af den anden indstillingsværdi (f.eks. ranking efter liga afhænger af, hvilken sæson der er valgt). Men det er meget nyttigt i situationer, hvor indstillingsværdierne er statiske, og hvor indstillingerne er uafhængige af hinanden.

Uden at gøre de aktuelle indstillinger komplicerede, kan vi oprette en anden sektion inde i indstillingspanelet, der viser de aktuelle attributter. Du kan vælge din måde at vise indstillingsværdierne på, men jeg vil importere en Tip komponent fra @wordpress/components pakke:

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

Mens jeg er her, vil jeg foretage en betinget kontrol for værdierne, før jeg viser dem inde i Tip komponent:

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

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

Sådan ender det med at fungere i blokeditoren:

API-data er mere kraftfulde, når live-data kan vises uden at skulle opdatere dem manuelt hver gang. Det vil vi se nærmere på i den næste del af denne serie.