Instellingen opslaan voor een aangepast WordPress-blok in de Block Editor

We hebben een heleboel dingen bereikt in deze serie! We hebben een aangepast WordPress-blok gemaakt dat gegevens ophaalt van een externe API en deze aan de voorkant weergeeft. Vervolgens hebben we dat werk overgenomen en uitgebreid, zodat de gegevens ook rechtstreeks in de WordPress-blokeditor worden weergegeven. Daarna hebben we een instellingen-UI voor het blok gemaakt met behulp van componenten van WordPress InspectorControls pakket.

Er is nog een laatste punt dat we moeten behandelen en dat is het opslaan van de instellingsopties. Als we ons herinneren uit het laatste artikel, zijn we technisch in staat om onze selecties te "opslaan" in de gebruikersinterface van de blokinstellingen, maar die worden nergens echt opgeslagen. Als we een paar selecties maken, opslaan en vervolgens terugkeren naar de post, worden de instellingen volledig gereset.

Laten we de lus sluiten en die instellingen opslaan, zodat ze behouden blijven de volgende keer dat we een bericht bewerken dat ons aangepaste blok bevat!

Instellingen attributen opslaan

We werken met een API die ons voorziet voetbal ranglijst van voetbalteams en we gebruiken het om op te halen voor het weergeven van ranglijsten op basis van land, competitie en seizoen. We kunnen nieuwe attributen maken voor elk van deze zoals deze:

// index.js

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

Vervolgens moeten we de attributen instellen van LeagueSettings.js. Wanneer een ComboboxControl wordt bijgewerkt in onze instellingen-UI, moeten we de attributen instellen met behulp van de setAttributes() methode. Dit was eenvoudiger toen we maar met één data-eindpunt werkten. Maar nu we meerdere ingangen hebben, is het een beetje meer betrokken.

Zo ga ik het organiseren. Ik ga een nieuw object maken in LeagueSettings.js die de structuur van de instellingsattributen en hun waarden volgt.

// LeagueSettings.js

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

Ik ga ook de beginstatusvariabelen wijzigen van null naar de respectieve instellingsvariabelen.

// LeagueSettings.js

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

In elk van de handle______Change(), ik ga een maken setLocalAttributes() dat een argument heeft dat het vorige kloneert en overschrijft localSettings bezwaar maken tegen de nieuwe land-, competitie- en seizoenswaarden. Dit wordt gedaan met behulp van de spread-operator.

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

We kunnen de definiëren setLocalAttributes() soortgelijk:

// LeagueSettings.js

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

Dus we gebruiken Object.assign() om de twee objecten samen te voegen. Dan kunnen we het klonen newSettings bezwaar terug naar localSettings omdat we ook rekening moeten houden met elk instellingsattribuut wanneer er een nieuwe selectie wordt gemaakt en er een wijziging optreedt.

Ten slotte kunnen we de setAttributes() zoals we normaal doen om het uiteindelijke object in te stellen. U kunt bevestigen of de bovenstaande kenmerken veranderen door de selecties in de gebruikersinterface bij te werken.

Een andere manier om te bevestigen is door een console.log() in DevTools uit te voeren om de attributen te vinden.

Kijk eens beter naar die schermafbeelding. De waarden zijn opgeslagen in attributes.settings. We kunnen het live zien gebeuren omdat React elke keer dat we een wijziging in de instellingen aanbrengen opnieuw wordt weergegeven, dankzij de useState() haak.

De waarden weergeven in de gebruikersinterface voor blokkeninstellingen

Het is niet erg handig om de instellingswaarden op te slaan in de besturingsopties zelf, aangezien elke instelling afhankelijk is van de andere instellingswaarde (ranglijst per competitie hangt bijvoorbeeld af van welk seizoen is geselecteerd). Maar het is erg handig in situaties waarin de instellingswaarden statisch zijn en waar instellingen onafhankelijk van elkaar zijn.

Zonder de huidige instellingen ingewikkeld te maken, kunnen we een andere sectie binnen het instellingenpaneel maken die de huidige attributen toont. U kunt uw manier kiezen om de instellingswaarden weer te geven, maar ik ga een Tip bestanddeel van het @wordpress/components pakket:

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

Terwijl ik hier ben, ga ik een voorwaardelijke controle uitvoeren op de waarden voordat ik ze weergeef in de Tip component:

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

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

Hier is hoe dat werkt in de blokeditor:

API-gegevens zijn krachtiger wanneer live gegevens kunnen worden weergegeven zonder dat ze elke keer handmatig moeten worden bijgewerkt. Daar zullen we in de volgende aflevering van deze serie naar kijken.