Erstellen einer Einstellungs -Benutzeroberfläche für einen benutzerdefinierten WordPress -Block

Dieser Artikel zeigt, dass das Erstellen einer Einstellungs -Benutzeroberfläche für einen benutzerdefinierten WordPress -Block erstellt wird, der mit einer externen API interagiert. Der Block zeigt Fußball -Rankings an, und die Einstellungen ermöglichen es den Benutzern, die Daten nach Land, Liga und Saison zu filtern.

Vorherige Artikel umfassten das Abrufen und Rendern von API-Daten im Blockeditor und im Front-End. Dieser Artikel konzentriert sich auf die Integration eines Einstellungsbereichs in das Bedienfeld des WordPress-Block-Editors (der rechten Seitenleiste). Mit diesem Panel können Benutzer die vom Block angezeigten Daten anpassen.

Der Prozess umfasst die Nutzung von WordPress InspectorControls und Kernkomponenten wie PanelBody und ComboboxControl, um eine benutzerfreundliche Schnittstelle zu erstellen. Die API -Architektur wird umrissen, wodurch die Beziehungen zwischen Ländern, Ligen, Jahreszeiten und Rankingsdaten hervorgehoben werden.

Die Schlüsselschritte umfassen:

1. Abrufen von Länderdaten: Der Artikel zeigt, wie eine Liste von Ländern aus dem Rapidapi mit useEffect und fetch abgerufen wird, wobei die Ergebnisse im Staat gespeichert werden.

2. implementieren InspectorControls: Die InspectorControls -Komponente wird importiert und verwendet, um die benutzerdefinierte Einstellungen UI zu unterbringen.

3. Erstellen einer benutzerdefinierten Komponente (LeagueSettings.js): Eine separate Komponente verwaltet die UI -Einstellungs -UI, die die Code -Organisation verbessert. Diese Komponente verwendet PanelBody für Gruppeneinstellungen und ComboboxControl für die Auswahl von Land-, Liga und Saison. Das ComboboxControl ermöglicht die Suche in den Optionen.

4. Datenänderungen zur Handhabung von Daten Änderungen: Funktionen wie handleCountryChange, handleLeagueChange und handleSeasonChange aktualisieren Sie den Status der Komponente basierend auf Benutzerauswahlen, wodurch die API -Daten dynamisch gefiltert werden.

5. Daten zum Senden abrufen: Eine "Daten abrufen" löst einen API -Aufruf mithilfe der ausgewählten Einstellungen aus, wobei die angezeigten Ranglisten aktualisiert werden.

Der Artikel enthält Code -Snippets, die diese Schritte veranschaulichen, einschließlich der Umwandlung von API -Daten in ein für ComboboxControl geeignetes Format. Es befasst sich auch mit der potenziellen Fehlerbehandlung für Fälle, in denen Daten in der API fehlen.

Während die aktuelle Implementierung dynamisches Daten abrufen, sind die Einstellungen noch nicht bestehen. Der nächste Artikel behandelt das Speichern dieser Einstellungen, um die Benutzerauswahl dauerhaft zu gestalten.

Das obige ist der detaillierte Inhalt vonErstellen einer Einstellungs -Benutzeroberfläche für einen benutzerdefinierten WordPress -Block. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!