Speichern Sie Einstellungen für einen benutzerdefinierten WordPress -Block im Block -Editor

In dieser Reihe von Tutorials wurde viel Arbeit geleistet! Wir haben einen benutzerdefinierten WordPress -Block erstellt, der Daten von der externen API abreißt und diese am vorderen Ende rendert. Wir haben dann die Arbeit so erweitert, dass die Daten auch direkt im WordPress -Block -Editor gerendert werden können. Danach haben wir die Benutzeroberfläche für diesen Block mit den Komponenten im WordPress InspectorControls -Paket erstellt.

Der letzte Schritt besteht darin, die Einstellungsoptionen zu speichern. Wenn wir uns an den Inhalt des vorherigen Beitrags erinnern, konnten wir unsere Auswahlmöglichkeiten in der Benutzeroberfläche der Blockeinstellungen "speichern", aber diese Auswahlmöglichkeiten wurden eigentlich nirgendwo gespeichert. Wenn wir einige Auswahlen treffen, speichern und dann zum Post zurückkehren, werden die Einstellungen vollständig zurückgesetzt.

Lassen Sie uns die Schleife schließen und diese Einstellungen speichern, damit sie beim nächsten Bearbeiten eines Beitrags bestehen können, der unsere benutzerdefinierten Blöcke enthält!

Verwenden von externer API im WordPress -Block

• Front-End-Rendering-Daten
• Back-End-Rendering-Daten
• Benutzerdefinierte Einstellungen ui
erstellen
• benutzerdefinierte Blockeinstellungen speichern (hier!)
• Verwenden von Echtzeit-API-Daten (bald kommt)

Einstellungseigenschaften

speichern

Wir verwenden eine API, die Ranglisten für Fußballteams anbietet, mit der wir Ranglisten -Displays basierend auf Land, Liga und Saison erhalten. Wir können für jede Eigenschaft neue Eigenschaften erstellen, wie unten gezeigt:

// index.js

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

Als nächstes müssen wir die Eigenschaften von liaguesettings.js festlegen. Immer wenn das ComboboxControl in unserer Einstellungs -Benutzeroberfläche aktualisiert wird, müssen wir die Eigenschaften mit der setAttributes() -Methode festlegen. Dies ist einfacher, wenn wir nur einen Datenendpunkt verwenden. Aber jetzt haben wir mehrere Eingaben, es ist etwas komplizierter.

So werde ich es organisieren. Ich werde ein neues Objekt in LigaSettings.js erstellen, das der Struktur der Einstellung von Eigenschaften und deren Werten folgt.

// LeagueSettings.js

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

Ich habe auch die Ausgangszustandsvariable von Null in die entsprechende Einstellungsvariable geändert.

// LeagueSettings.js

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

In jedem handle______Change() erstelle ich einen setLocalAttributes() mit einem Parameter, der mit dem Erweiterungsbetreiber kloniert und das vorherige localSettings -Objekt mit neuen Ländern, Liga- und Saisonwerten überschreibt.

// LeagueSettings.js

function handleCountryChange(value) {
  // 初始代码
  setLocalAttributes({ ...localSettings, country: value });
  // 代码的其余部分
}

function handleLeagueChange(value) {
  // 初始代码
  setLocalAttributes({ ...localSettings, league: value });
  // 代码的其余部分
}

function handleSeasonChange(value) {
  // 初始代码
  setLocalAttributes({ ...localSettings, season: value });
  // 代码的其余部分
}

wir können es so definieren: setLocalAttributes()

// LeagueSettings.js

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

Daher verwenden wir

, um die beiden Objekte zusammenzuführen. Wir können dann das Object.assign() -Objekt zurück in newSettings klonen, da wir auch jede Einstellungseigenschaft jedes Mal in Betracht ziehen müssen, wenn eine neue Auswahl vorgenommen und Änderungen auftreten. localSettings

Schließlich können wir

wie gewohnt verwenden, um das endgültige Objekt festzulegen. Sie können bestätigen, ob sich die obigen Attribute ändern, indem die Auswahl in der Benutzeroberfläche aktualisiert wird. setAttributes()

Eine andere Möglichkeit, zu bestätigen, besteht darin,

in Devtools auszuführen, um die Eigenschaften zu finden. console.log()

Sehen Sie sich diesen Screenshot sorgfältig an. Diese Werte werden in attributes.settings gespeichert. Dank des useState() -Hakens reagieren Sie jedes Mal, wenn wir Änderungen in den Einstellungen vornehmen, Reaktionen, sodass wir sehen können, dass dies in Echtzeit geschieht.

Wert in den Blockeinstellungen ui

Speichern der Einstellungswerte in den Kontrolloptionen selbst ist nicht sehr nützlich, da jede Steuerung von anderen Einstellungswerten abhängt (z. B. Ranking nach Liga hängt von der ausgewählten Saison ab). Es ist jedoch sehr nützlich, wenn die Einstellungswerte statisch sind und unabhängig voneinander eingestellt sind.

Ohne die aktuellen Einstellungen zu komplizieren, können wir einen anderen Abschnitt im Einstellungsfeld erstellen, um die aktuellen Eigenschaften anzuzeigen. Sie können Ihren eigenen Weg auswählen, um den Einstellungswert anzuzeigen, aber ich werde eine Tippkomponente aus dem @wordpress/components -Paket importieren:

// index.js

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

Hier werde ich die Werte bedingt überprüfen, bevor ich sie in der Tippkomponente anzeige:

// LeagueSettings.js

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

So funktioniert es im Block -Editor:

API-Daten sind leistungsfähiger, wenn Echtzeitdaten angezeigt werden können, ohne sie jedes Mal manuell zu aktualisieren. Wir werden dies im nächsten Teil dieser Serie untersuchen.

Das obige ist der detaillierte Inhalt vonSpeichern Sie Einstellungen für einen benutzerdefinierten WordPress -Block im Block -Editor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!