Spara inställningar för ett anpassat WordPress-block i blockredigeraren

Vi har åstadkommit en massa saker i den här serien! Vi skapade ett anpassat WordPress-block som hämtar data från ett externt API och renderar det på gränssnittet. Sedan tog vi det arbetet och utökade det så att data också renderas direkt i WordPress-blockredigeraren. Efter det skapade vi ett inställningsgränssnitt för blocket med hjälp av komponenter från WordPress InspectorControls paket.

Det finns en sista bit för oss att täcka och det är att spara inställningsalternativen. Om vi ​​minns från den förra artikeln kan vi tekniskt sett "spara" våra val i gränssnittet för blockinställningar, men de lagras faktiskt inte någonstans. Om vi ​​gör några val, sparar dem och återgår sedan till inlägget, inställningarna återställs helt.

Låt oss stänga slingan och spara dessa inställningar så att de kvarstår nästa gång vi redigerar ett inlägg som innehåller vårt anpassade block!

Sparar inställningsattribut

Vi arbetar med ett API som ger oss fotboll fotbollslagsrankning och vi använder den för att hämta för att visa rankningar baserat på land, liga och säsong. Vi kan skapa nya attribut för var och en av dessa så här:

// index.js

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

Därefter måste vi ställa in attributen från LeagueSettings.js. När en ComboboxControl är uppdaterad i vårt användargränssnitt för inställningar måste vi ställa in attributen med hjälp av setAttributes() metod. Detta var enklare när vi bara arbetade med en dataendpoint. Men nu när vi har flera ingångar är det lite mer involverat.

Så här ska jag organisera det. Jag ska skapa ett nytt objekt i LeagueSettings.js som följer strukturen för inställningsattributen och deras värden.

// LeagueSettings.js

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

Jag kommer också att ändra initialtillståndsvariablerna från null till respektive inställningsvariabler.

// LeagueSettings.js

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

I var och en av handle______Change(), jag ska skapa en setLocalAttributes() som har ett argument som klonar och skriver över det föregående localSettings objekt med de nya värdena för land, liga och säsong. Detta görs med hjälp av spridningsoperatö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 definiera setLocalAttributes() så här:

// LeagueSettings.js

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

Så vi använder Object.assign() för att slå samman de två objekten. Då kan vi klona newSettings objekt tillbaka till localSettings eftersom vi också måste ta hänsyn till varje inställningsattribut när ett nytt val görs och en förändring sker.

Slutligen kan vi använda setAttributes() som vi normalt gör för att ställa in det slutliga objektet. Du kan bekräfta om ovanstående attribut ändras genom att uppdatera valen i användargränssnittet.

Ett annat sätt att bekräfta är att göra en console.log() i DevTools för att hitta attributen.

Titta närmare på den skärmdumpen. Värdena lagras i attributes.settings. Vi kan se det hända live eftersom React återrenderar varje gång vi gör en förändring i inställningarna, tack vare useState() krok.

Visar värdena i blockinställningar UI

Det är inte särskilt användbart att lagra inställningsvärdena i själva kontrollalternativen eftersom var och en är beroende av det andra inställningsvärdet (t.ex. ranking per liga beror på vilken säsong som väljs). Men det är mycket användbart i situationer där inställningsvärdena är statiska och där inställningarna är oberoende av varandra.

Utan att göra de aktuella inställningarna komplicerade kan vi skapa ett annat avsnitt i inställningspanelen som visar de aktuella attributen. Du kan välja hur du vill visa inställningsvärdena men jag kommer att importera en Tip komponent från @wordpress/components paket:

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

Medan jag är här kommer jag att göra en villkorlig kontroll av värdena innan jag visar dem inuti Tip komponent:

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

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

Så här slutar det att fungera i blockredigeraren:

API-data är kraftfullare när livedata kan visas utan att behöva uppdatera dem manuellt varje gång. Vi kommer att titta på det i nästa del av den här serien.