...
✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

Erstellen und Abrufen von benutzerdefinierten REST-Endpunkten in Gutenberg-Blöcken

206

In diesem Beitrag werde ich versuchen, einen Überblick darüber zu geben, wie benutzerdefinierte REST-API-Endpunkte erstellt und Anfragen für sie in einem benutzerdefinierten Gutenberg-Block ausgeführt werden. Das heißt, Anfragen mit fetchMethoden für Informationen zu stellen, die nicht in den registrierten Datenspeichern von WordPress verfügbar sind.

Eine freundliche Erinnerung: Die meisten grundlegenden Informationen sind bereits in den Datenspeichern von WordPress verfügbar. Beispielsweise sind grundlegende Abfragen von Beiträgen, Seiten, benutzerdefinierten Beitragstypen, Taxonomien, Autoren, Medien und mehr so ​​verfügbar, wie sie sind, ohne dass Sie Ihre eigenen benutzerdefinierten Endpunkte erstellen müssen. Um auf diese Stores zuzugreifen, verwenden Sie lieber das WordPress-Kerndatenmodul (withSelectund select()). Unten finden Sie einen Tutorial-Teil, der ausführlich erklärt, wie das geht.

WordPress-REST-API

Falls Sie es noch nicht wussten; WordPress REST API ist eine JSON-Schnittstelle zum Senden und Empfangen von Daten von Ihrer WordPress-Site. Es kann extern oder intern verwendet werden. Mit dem Gutenberg-Editor und der Umstellung auf Javascript hat die Nutzung der REST-API definitiv zugenommen. Die WordPress-REST-API hat eine ganze Reihe von Endpunkten, die wir verwenden können. Eine vollständige Referenz zu allen REST-API-Endpunkten finden Sie hier. Sie finden zum Beispiel Endpunkte für Beiträge und die meisten anderen internen Inhalte – sowohl zum Lesen als auch zum Aktualisieren. Design- oder Plug-in-Entwickler können ihre eigenen benutzerdefinierten Endpunkte registrieren.

Ihre WordPress-Site hat eine Root-REST-API-URL, die sich standardmäßig unter befindet <your domain>/wp-json. Beispielsweise kann ein lokales WordPress mit der URL http://localhost/wordpress/auf die REST-API unter zugreifen http://localhost/wordpress/wp-json. Von dort müssen wir Endpunkte anhängen. Unter Bezugnahme auf die obige Referenz von Endpunkten können wir eine Liste der neuesten Posts im Endpunkt abrufen /wp/v2/posts. Das heißt, wenn Sie http://localhost/wordpress/wp-json/wp/v2/postsin Ihrem Browser zu gehen, erhalten Sie eine JSON-formatierte Antwort auf die neuesten Beiträge auf Ihrer WordPress-Site.

Eine Anmerkung zu Namespaces ist angebracht. Eine REST-API-URL beginnt mit einem Namespace („ wp/v2” ist der Namespace von WordPress, wie in den obigen Beispiel-URLs zu sehen). Namespaces ist ein Konzept, um Konflikte im Kern von WordPress, Themes und Plugins zu vermeiden, die Endpunkte mit demselben Namen hinzufügen. Erstellen Sie Ihren eigenen eindeutigen Namensraum – normalerweise eine Slug-Form Ihres Themen- oder Plug-in-Namens. Nach dem Slug fügt eine allgemeine Regel die Versionsnummer hinzu, normalerweise beginnend mit v1. Als Beispiel ist der Slug meines Themes „ awhitepixel“, wenn ich also benutzerdefinierte Endpunkte in meinem Theme erstellen würde, würde ich den Namespace „ awhitepixel/v1” verwenden. Mit diesem Namensraum könnte ich einen Endpunkt „ posts” registrieren und es würde keine Probleme verursachen, obwohl er mit dem Endpunktnamen von WordPress identisch ist.

Die Arbeit mit der REST-API in WordPress ist ein großes Thema mit vielen guten verfügbaren Informationen. In diesem Beitrag konzentriere ich mich auf die Benutzerfreundlichkeit im Gutenberg-Editor und wie man sie in Javascript abruft.

Was wir machen und was wir brauchen

Die Benutzerfreundlichkeit zum Anfordern benutzerdefinierter Informationen hat eine Vielzahl von Anwendungsfällen, sodass Sie normalerweise die folgenden Codebeispiele an Ihre Anforderungen anpassen müssen. Die Daten können eine benutzerdefinierte Post-Abfrage, eine benutzerdefinierte SQL-Abfrage oder etwas völlig anderes sein.

Wenn wir einen benutzerdefinierten Endpunkt erstellen, haben wir die volle Kontrolle über seine Rückkehr. Wir können beliebige Operationen und Abfragen in WordPress/PHP durchführen und als JSON weitergeben. Und in unserem Gutenberg-Block können wir diese Rückgabe abrufen und innerhalb der editFunktion des Blocks damit machen, was wir wollen. Normalerweise verwenden Sie die Daten, um dem Endbenutzer eine Auswahl oder Informationen im Blockeditor zu präsentieren, aber Sie können auch Informationen daraus in Ihrem Block zur weiteren Verwendung speichern. Sie können auch Ihre eigenen benutzerdefinierten Speicher für diese Daten erstellen, aber ich werde nicht darauf eingehen, wie das geht.

Ich gehe davon aus, dass Sie bereits damit vertraut sind, benutzerdefinierte Gutenberg-Blöcke zu erstellen, daher werde ich hier nicht im Detail darauf eingehen.

Erstellen eines REST-API-Endpunkts

Die Registrierung eines benutzerdefinierten REST-API-Endpunkts erfolgt in PHP. Sie würden diesen Code in Ihrem Design functions.phpoder einem aktiven Plugin-Code hinzufügen. Verbinden Sie eine Funktion mit der Aktion rest_api_initund führen Sie die Funktion [register_rest_route](https://developer.wordpress.org/reference/functions/register_rest_route/)()für jeden Endpunkt aus, den Sie registrieren möchten.

Geben Sie Ihren Namespace als ersten Parameter, Ihre Endpunktroute als zweiten und ein Array von Einstellungen als dritten Parameter für an register_rest_route(). Der vierte Parameter steuert, ob Sie eine vorhandene Route überschreiben möchten oder nicht; nicht etwas, das wir uns hier ansehen werden. Im Array für den dritten Parameter sollten Sie mindestens die Eigenschaft ‘ callback‘ auf eine Funktion setzen, die für die Rückgabe der Daten des Endpunkts verantwortlich ist. Die Einstellung „ method” ist ebenfalls üblich, z. B. die Einstellung Ihres Endpunkts auf „ GET“, „ POST“, „ PUT” usw.

Beginnen wir mit der Registrierung eines einfachen Endpunkts.

Der Namensraum meines Themas ist „ awhitepixel/v1” und ich registriere einen Endpunkt „ mydata” innerhalb dieses Namensraums. Das bedeutet, dass ich unter auf meine benutzerdefinierte REST-API zugreifen kann http://localhost/wordpress/wp-json/awhitepixel/v1/mydata.

Wenn Sie REST-API-Routen registrieren (oder ändern), müssen Sie Ihre Permalinks leeren, damit es funktioniert. Sie können dies tun, indem Sie Einstellungen > Permalinks besuchen und einfach auf Speichern klicken.

Der obige Code funktioniert noch nicht, da ich die Funktion set noch nicht als Callback definiert habe: awhitepixel_rest_route_mydata. Die Callback-Funktion erhält einen Parameter; ein Array von Daten mit Informationen und Argumenten, die von der Anfrage übergeben wurden. Schließlich müssen Sie die Rückgabe Ihrer Callback-Funktion sorgfältig prüfen.

Erstens müssen Sie immer etwas von Ihrem Endpunkt-Callback zurückgeben. Jede Rückgabe wird von WordPress automatisch in JSON konvertiert. Das bedeutet, dass Sie praktisch jede Form von Daten in Ihrer Funktion zurückgeben können; eine Zeichenfolge, null, ein Array oder eine [WP_Error](https://developer.wordpress.org/reference/classes/wp_error/)Instanz. Sie können sich auch für die Rückgabe eines [WP_REST_Response](https://developer.wordpress.org/reference/classes/wp_rest_response/)Objekts entscheiden, um mehr Kontrolle über z. B. Statuscode oder Header-Informationen zu erhalten. Ich empfehle, die Rückgabe in die Funktion einzuschließen [rest_ensure_response](https://developer.wordpress.org/reference/functions/rest_ensure_response/)(), um sicherzustellen, dass Ihre Antwort eine gültige REST-Antwort ist.

Lassen Sie uns unsere Callback-Funktion definieren und als Start eine einfache Zeichenfolge zurückgeben.

function awhitepixel_rest_route_mydata($data) { $response = 'Hello there!'; return rest_ensure_response($response); }

Mit dem obigen Code (und gespülten Permalinks) kann ich jetzt zur URL gehen http://localhost/wordpress/wp-json/awhitepixel/v1/mydata.

Erstellen und Abrufen von benutzerdefinierten REST-Endpunkten in Gutenberg-Blöcken

Von hier an können wir jede Art von Code in unsere Callback-Funktion einfügen, um die richtigen Daten für die Rückgabe zu generieren. Sie können beispielsweise WordPress-Inhalte abfragen [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/), Abfragen in der Datenbank durchführen oder externe Daten anfordern. Dieser Teil liegt bei Ihnen.

Gehen wir nun zur gegenüberliegenden Seite über; wie man die Anträge stellt.

Erstellen von REST-API-Anforderungen in Javascript

Das Ausführen von REST-Anforderungen erfolgt üblicherweise mit [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)Javascript. WordPress bietet einen eigenen Wrapper fetch, der WordPress-REST-API-Anforderungen vereinfacht; [wp.apiFetch](https://developer.wordpress.org/block-editor/packages/packages-api-fetch/). Das werde ich in meinem benutzerdefinierten Gutenberg-Block verwenden. Denken Sie daran, dass eine Anfrage fetchein „Versprechen” zurückgibt – also müssen wir a verketten .then(), um die eigentliche Anfragerückgabe zu verarbeiten. Die Basisnutzung ist ungefähr so;

apiFetchermöglicht es uns, eine pathEigenschaft bereitzustellen, anstatt die vollständige URL zu erstellen. Alles, was wir bereitstellen müssen, ist der Namespace und der Endpunkt, die wir an die apiFetchREST-API-Stamm-URL von WordPress anhängen. Innerhalb der .then()Funktion haben wir Zugriff auf die Daten, die bereits in JSON konvertiert wurden. Hier würden Sie etwas mit den Daten machen. Normalerweise würden Sie die zurückgegebenen Daten zB im Zustand der Komponente speichern.

editUnten ist ein Beispiel für die Komponente eines benutzerdefinierten Gutenberg-Blocks. Es ist klassenbasiert state, um die zurückgegebenen Daten von der REST-API-Anforderung zu speichern. Dies ermöglicht es uns auch, die Anfrage auszuführen, componentDidMount()wenn sie zum ersten Mal gemountet wird (siehe Reacts Dokumentation zu Lebenszyklusmethoden ). All dies ist ein einfaches Beispiel, damit Sie das Grundkonzept verstehen; nicht als Rezept, um es genau so zu machen. Sie könnten erwägen, React-Hooks und funktionale Komponenten zu verwenden oder stattdessen eine Komponente höherer Ordnung zu konstruieren.

Das obige Beispiel ist eine klassenbasierte Komponente, die der editFunktion des Blocks in bereitgestellt wird registerBlockType(). Es richtet ein Zustandsobjekt eines Arrays ein, um die Daten zu speichern (dies hängt natürlich von den Daten ab, die Sie zurückgeben), und einen booleschen Status, um zu wissen, wann die asynchrone Anforderung zurückgegeben wurde. Sobald die Komponente gemountet (zum ersten Mal gerendert) ist, führt sie die Funktion aus, um die apiFetchAnforderung auszuführen. Wir setzen den Pfad zu dem Endpunkt, den wir oben in PHP registriert haben. Die Methode ist standardmäßig GET, sodass wir dies nicht in angeben müssen apiFetch. Und .then()wenn die Anfrage fertig ist, aktualisieren wir innerhalb der Funktion den Status der Komponente mit den zurückgegebenen Daten.

Offensichtlich würde die Renderfunktion Ihres Blocks mehr mit den zurückgegebenen Daten selbst tun. Möglicherweise möchten Sie die Daten dem Benutzer irgendwie zur Verfügung stellen, indem Sie eine Liste zur Auswahl präsentieren. Es hängt alles davon ab, um welche Art von Daten es sich handelt und wofür Sie sie verwenden möchten.

Übergeben von Argumenten an den Endpunkt

In einigen Fällen müssen wir einige Argumente an den Endpunkt übergeben. Übliche Verwendungen sind das Übergeben einer ID nach dem Endpunkt; http://localhost/wordpress/wp-json/wp/v2/posts/14würde beispielsweise die Post-ID 14 zurückgeben.

Dies ist ziemlich einfach und erfolgt durch Hinzufügen eines Regex-Suchmusters zum Endpunkt bei der Registrierung. Es erfordert einige Kenntnisse über reguläre Ausdrücke, um komplexe Muster zu erstellen, aber unten ist ein Beispiel, das eine Zahl abgleicht und ihr den Namen „id” zuweist. Die Benennung der Übereinstimmungen gibt uns die Möglichkeit, auf die Variable in unserer Callback-Funktion zuzugreifen. Lassen Sie mich Ihnen zeigen, was ich meine.

Lassen Sie uns eine neue Endpunktroute registrieren. Wir verwenden denselben Endpunkt wie zuvor (‘ awhitepixel/v1/mydata‘), aber für diese Route fügen wir am Ende eine Regex-Übereinstimmung für eine Zahl hinzu.

Das Regex-Muster (?P<id>[d]+)erscheint kryptisch, wird aber mit einem grundlegenden Verständnis von Regex ziemlich klar. Der [d]+Teil stimmt mindestens einmal mit einer beliebigen Zahl (0-9) überein. Die Teile (?P<id>und )dienen zum Abgleich einer benannten Gruppe. Der Gruppenname ist in diesem Fall id, aber Sie können Ihre Gruppe(n) beliebig benennen.

Sie können diesen Endpunkt an eine separate Callback-Funktion weiterleiten, aber ich habe mich entschieden, dieselbe Funktion zu verwenden, um sowohl /mydataals auch /mydata/<ID>Anfragen zu verarbeiten. Dies bedeutet, dass ich in meiner Callback-Funktion Folgendes tun kann:

function awhitepixel_rest_route_mydata($data) { if ($data['id']) { $response = 'Create return for ID: '. $data['id']; } else { $response = 'Create general return (no ID provided)'; } return rest_ensure_response($response); }

Denken Sie daran, dass der Parameter der Callback-Funktion die zurückgegebenen Argumente enthält. Da ich meine übereinstimmende Gruppe „ id” genannt habe, ist der übereinstimmende Wert in zugänglich $data['id']. Und schließlich, weil ich die gleiche Funktion verwende, um Anfragen mit und ohne ID zu verarbeiten, kann ich einfach zwischen den beiden verschiedenen Rückgaben wechseln.

Damit (und aktualisierten Permalinks) erhalte ich diese Antworten für meine benutzerdefinierten Endpunkte:

Erstellen und Abrufen von benutzerdefinierten REST-Endpunkten in Gutenberg-BlöckenErstellen und Abrufen von benutzerdefinierten REST-Endpunkten in Gutenberg-Blöcken

Aufnahmequelle: awhitepixel.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen