Kohandatud WordPressi ploki sätete salvestamine plokiredaktoris

Oleme selles sarjas saavutanud palju asju! Lõime kohandatud WordPressi ploki, mis hangib andmeid välisest API-st ja renderdab need esiotsas. Seejärel võtsime selle töö ette ja laiendasime seda, nii et andmed renderdatakse ka otse WordPressi plokiredaktoris. Pärast seda lõime WordPressi komponentide abil ploki seadete kasutajaliidese InspectorControls pakend.

Meil on veel viimane asi, mida peame käsitlema ja see on seadete valikute salvestamine. Kui meenutada viimast artiklit, saame tehniliselt oma valikud plokiseadete kasutajaliidesesse salvestada, kuid neid ei salvestata tegelikult kuhugi. Kui teeme mõned valikud, salvestame need ja naasime postituse juurde, lähtestatakse seaded täielikult.

Sulgeme tsükli ja salvestame need sätted, et need jääksid kehtima ka järgmisel korral, kui muudame meie kohandatud plokki sisaldavat postitust!

Seadete atribuutide salvestamine

Töötame API-ga, mis meile pakub jalgpall jalgpallimeeskondade paremusjärjestus ja me kasutame seda riigi, liiga ja hooaja alusel edetabeli kuvamiseks. Iga sellise jaoks saame luua uusi atribuute, näiteks:

// index.js

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

Järgmisena peame määrama atribuudid alates LeagueSettings.js. Alati kui ComboboxControl on meie seadete kasutajaliideses värskendatud, peame atribuudid määrama, kasutades setAttributes() meetod. See oli lihtsam, kui töötasime ainult ühe andmete lõpp-punktiga. Kuid nüüd, kui meil on mitu sisendit, on see veidi rohkem kaasatud.

Ma kavatsen seda niimoodi korraldada. Ma kavatsen luua uue objekti LeagueSettings.js mis järgib seadete atribuutide ja nende väärtuste struktuuri.

// LeagueSettings.js

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

Samuti kavatsen muuta algolekumuutujaid null vastavatele seadistusmuutujatele.

// LeagueSettings.js

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

Igas handle______Change(), kavatsen luua a setLocalAttributes() millel on argument, mis kloonib ja kirjutab eelmise üle localSettings vaidlustada uue riigi, liiga ja hooaja väärtustega. Seda tehakse levioperaatori abiga.

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

Saame määratleda setLocalAttributes() nagu nii:

// LeagueSettings.js

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

Niisiis, me kasutame Object.assign() kahe objekti ühendamiseks. Siis saame kloonida newSettings objekti tagasi localSettings sest me peame arvestama ka iga seadete atribuudiga, kui seal tehakse uus valik ja toimub muudatus.

Lõpuks saame kasutada setAttributes() nagu me tavaliselt lõppobjekti määramiseks teeme. Saate kontrollida, kas ülaltoodud atribuudid muutuvad, värskendades kasutajaliidese valikuid.

Teine viis kinnitamiseks on teha atribuutide leidmiseks DevToolsis käsk console.log().

Vaadake seda ekraanipilti lähemalt. Väärtused on salvestatud attributes.settings. Näeme seda reaalajas, sest React renderdab uuesti iga kord, kui seadeid muudame, tänu useState() konks.

Väärtuste kuvamine plokkide seadete kasutajaliideses

Seadete väärtuste salvestamine juhtsuvanditesse pole eriti kasulik, kuna igaüks neist sõltub teisest seadistusväärtusest (nt liigade paremusjärjestus sõltub valitud hooajast). Kuid see on väga kasulik olukordades, kus seadete väärtused on staatilised ja kus seaded on üksteisest sõltumatud.

Praeguseid sätteid keeruliseks muutmata saame seadistuspaneeli sisse luua veel ühe jaotise, mis näitab praeguseid atribuute. Saate valida seadete väärtuste kuvamise viisi, kuid ma impordin a Tip komponent alates @wordpress/components pakendis:

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

Siin viibides kontrollin väärtusi tingimuslikult enne nende kuvamist Tip komponent:

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

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

See toimib plokiredaktoris järgmiselt.

API andmed on võimsamad, kui reaalajas andmeid saab kuvada ilma neid iga kord käsitsi värskendamata. Vaatleme seda selle sarja järgmises osas.