Egyéni WordPress blokk beállításainak mentése a Blokkszerkesztőben

Egy csomó dolgot elértünk ebben a sorozatban! Létrehoztunk egy egyéni WordPress blokkot, amely lekéri az adatokat egy külső API-ból, és megjeleníti azokat a kezelőfelületen. Aztán elvégeztük ezt a munkát, és kiterjesztettük, így az adatok közvetlenül a WordPress blokkszerkesztőben is megjelennek. Ezt követően a WordPress összetevőivel létrehoztunk egy beállítási felületet a blokkhoz InspectorControls csomag.

Még egy utolsó részletet ki kell térnünk, ez pedig a beállítási lehetőségek mentése. Ha visszaemlékezünk az előző cikkre, technikailag el tudjuk menteni a kijelöléseinket a blokkbeállítások felhasználói felületén, de valójában nem tárolódnak sehol. Ha néhány kiválasztást végzünk, elmentjük, majd visszatérünk a bejegyzéshez, a beállítások teljesen visszaállnak.

Zárjuk be a ciklust, és mentsük el ezeket a beállításokat, hogy azok megmaradjanak, amikor legközelebb olyan bejegyzést szerkesztünk, amely az egyéni blokkunkat tartalmazza!

Beállítások attribútumok mentése

Olyan API-val dolgozunk, amely biztosítja számunkra futball labdarúgócsapatok rangsorolását, és arra használjuk, hogy ország, liga és szezon alapján megjelenítsük a rangsorokat. Mindegyikhez új attribútumot hozhatunk létre, például:

// index.js

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

Ezután be kell állítanunk az attribútumokat from LeagueSettings.js. Amikor a ComboboxControl frissítve van a beállítási felületünkön, be kell állítanunk az attribútumokat a setAttributes() módszer. Ez egyszerűbb volt, amikor csak egy adatvégponttal dolgoztunk. De most, hogy több bemenetünk van, ez egy kicsit jobban érintett.

Így fogom megszervezni. Létre fogok hozni egy új objektumot LeagueSettings.js amely követi a beállítások attribútumainak és értékeinek szerkezetét.

// LeagueSettings.js

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

Meg fogom változtatni a kezdeti állapotváltozókat is null a megfelelő beállítási változókhoz.

// LeagueSettings.js

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

Mindegyikben a handle______Change(), fogok létrehozni a setLocalAttributes() amelynek van egy argumentuma, amely klónozza és felülírja az előzőt localSettings tiltakozik az új ország, liga és szezon értékeivel. Ez a spread operátor segítségével történik.

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

Meg tudjuk határozni a setLocalAttributes() mint ez:

// LeagueSettings.js

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

Szóval használjuk Object.assign() hogy egyesítse a két objektumot. Ezután klónozhatjuk a newSettings tárgy vissza localSettings mert akkor is számolnunk kell az egyes beállításokattribútumokkal, amikor új kijelölés történik és változás történik.

Végül használhatjuk a setAttributes() mint általában a végső objektum beállításához. A fenti attribútumok módosulását a felhasználói felületen lévő beállítások frissítésével ellenőrizheti.

A megerősítés másik módja a console.log() végrehajtása a DevToolsban az attribútumok megkereséséhez.

Nézze meg közelebbről azt a képernyőképet. Az értékeket a rendszer tárolja attributes.settings. Élőben láthatjuk, hogy ez megtörténik, mert a React minden alkalommal újra rendereli, amikor módosítjuk a beállításokat, köszönhetően a useState() horog.

Az értékek megjelenítése a blokkbeállítások felhasználói felületén

Nem túl hasznos a beállítási értékeket magukban a vezérlési opciókban tárolni, mivel mindegyik a másik beállítási értéktől függ (pl. a bajnokságok sorrendje attól függ, hogy melyik szezont választottuk). De nagyon hasznos olyan helyzetekben, amikor a beállítások értékei statikusak, és ahol a beállítások függetlenek egymástól.

Anélkül, hogy az aktuális beállításokat bonyolítanánk, a beállítások panelen belül létrehozhatunk egy másik részt, amely az aktuális attribútumokat mutatja. Kiválaszthatja a beállítások értékeinek megjelenítési módját, de importálni fogom a Tip összetevő tól @wordpress/components csomag:

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

Amíg itt vagyok, feltételes ellenőrzést fogok végezni az értékekre vonatkozóan, mielőtt megjelenítenék őket a következőben Tip összetevő:

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

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

A blokkszerkesztőben a következőképpen működik ez:

Az API-adatok hatékonyabbak, ha élő adatok jeleníthetők meg anélkül, hogy ezeket minden egyes alkalommal manuálisan kellene frissíteni. Ezt a sorozat következő részében fogjuk megvizsgálni.