Rendern externer API -Daten in WordPress -Blöcken am hinteren Ende

Dieser Artikel folgt dem vorherigen Artikel über "Rendern externer API -Daten am vorderen Ende des WordPress -Blocks". Im vorherigen Beitrag haben wir gelernt, wie man eine externe API bekommt und sie in einen Block integriert, der die abgerufenen Daten am vorderen Ende einer WordPress -Website rendert.

Das Problem ist, dass die Art und Weise, wie wir es implementieren, uns daran hindert, Daten im WordPress -Block -Editor zu sehen. Mit anderen Worten, wir können den Block in die Seite einfügen, aber wir können keine Vorschau dazu sehen. Blöcke sind erst nach der Veröffentlichung zu sehen.

Lassen Sie uns das im vorherige Beitrag erstellte Beispiel -Block -Plugin überprüfen. Dieses Mal werden wir WordPress's JavaScript und React -Ökosystem verwenden, um Daten im Backend -Block -Editor zu erhalten und zu rendern.

Verwenden von externer API im WordPress -Block

• Front-End-Rendering-Daten
• Backend -Rendering -Daten (Ihr aktueller Standort)
• Benutzerdefinierte Einstellungen ui
erstellen
• benutzerdefinierte Blockeinstellungen speichern
• Verwenden von Echtzeit-API-Daten (bald kommt)

Die Ergebnisse des vorherigen Artikels

Vor dem Start ist hier eine Demo, die wir im vorherigen Beitrag abgeschlossen haben, auf die Sie sich beziehen können. Möglicherweise haben Sie festgestellt, dass ich die render_callback -Methode in meinem vorherigen Beitrag verwendet habe, um Eigenschaften zu verwenden und Inhalte in einer PHP -Datei zu rendern.

Dies ist nützlich in Situationen, in denen Sie möglicherweise einige native WordPress- oder PHP -Funktionen verwenden müssen, um dynamische Blöcke zu erstellen. Wenn Sie jedoch nur das JavaScript- und React (JSX) -Kosystem von WordPress verwenden möchten, um statische HTML und Eigenschaften in der Datenbank zu rendern, müssen Sie sich nur auf die Funktionen Edit und Save des Block -Plugins konzentrieren.

Die Funktion
• bearbeiten rendern den Inhalt basierend auf dem, was Sie im Block -Editor sehen möchten. Hier können Sie interaktive React -Komponenten verwenden.
Die Funktion
• speichern rendert den Inhalt basierend auf dem, was Sie am vorderen Ende sehen möchten. Sie können hier keine regulären React -Komponenten oder Haken verwenden. Es wird verwendet, um statische HTML zurückzugeben, die sowohl in der Datenbank als auch in Eigenschaften gespeichert sind.

Save Funktionen stehen im Mittelpunkt unserer heutigen Diskussion. Wir können interaktive Komponenten am vorderen Ende erstellen, aber dafür müssen wir sie in einer Datei wie im vorherigen Beitrag manuell einbeziehen und darauf zugreifen.

Ich werde das gleiche mit dem gleichen Ding im vorherigen Beitrag behandeln, aber diesmal können Sie die Vorschau im Block -Editor sehen, bevor Sie in der Frontend veröffentlichen.

Blockeigenschaften

Ich habe eine Erklärung der

-Funktion Eigenschaften im vorherigen Beitrag absichtlich weggelassen, da dies den Hauptinhalt ablenkt (Rendering). edit

Wenn Sie einen React -Hintergrund haben, können Sie verstehen, was ich gesagt habe, aber wenn Sie neu für Sie sind, empfehle ich Ihnen, die Komponenten und Eigenschaften in der React -Dokumentation zu lesen.

Wenn wir das Objekt

in die Konsole aufzeichnen, gibt es eine Liste von WordPress -Funktionen und Variablen zurück, die sich auf unseren Block beziehen: props

Wir brauchen nur das attributes -Objekt und die setAttributes -Funktion, und ich werde sie aus dem props -Objekt in meinem Code dekonstruieren. Im vorherigen Beitrag habe ich den Code von Rapidapi so geändert, dass die API -Daten über setAttributes() gespeichert werden können. Props ist schreibgeschützt, sodass wir sie nicht direkt ändern können.

Das Attribut

Block ähnelt den Zustandsvariablen und setState in React, aber React läuft auf dem Client, während setAttributes() verwendet wird, um das Attribut in der WordPress -Datenbank nach dem Speichern des Posts dauerhaft zu speichern. Wir müssen sie also in attributes.data speichern und sie dann als Anfangswert der useState() -Revariablen aufrufen.

Funktion bearbeiten

Ich werde den HTML -Code kopieren und einfügen, den wir im vorherigen Beitrag in football-rankings.php verwendeten, und bearbeiten, um sich dem JavaScript -Hintergrund zuzuwenden. Denken Sie daran, dass wir im vorherigen Beitrag zwei zusätzliche Dateien für Front-End-Stile und Skripte erstellt haben? Folgen Sie unserem noch heute Ansatz. Es besteht keine Notwendigkeit, diese Dateien zu erstellen. Stattdessen können wir alles in die Edit -Funktion verschieben.

Voller Code

`` `` JavaScript importieren {usestate} aus "@WordPress/Element"; Standardfunktion exportieren bearbeiten (Requisiten) { const {Attribute, setAttributes} = props; const [apidata, setapidata] = usemSestate (Attribute.data);

Funktion fetchData () { const options = { Methode: "get", Header: { "X-Rapidapi-Key": "Dein schneller API-Schlüssel", "X-Rapidapi-host": "api-football-v1.p.rapidapi.com", }, }; bringen( "

https://www.php.cn/link/a2a750ff64f34c66249d0f7d3ddd42004 ", Optionen ) .then ((Antwort) = & gt; response.json ()) .then ((Antwort) = & gt; { lass newdata = {... response}; setAttributes ({data: newdata}); setApidata (newdata); }) .Catch ((err) = & gt; console.Error (err)); }

zurückkehren (

Daten {/ Taste aus Fetchdaten ausgelöst /} löst die Datenerfassung aus /} {apidata && (

{/ ID für Style Selector /} hinzufügen

{/ Verwenden Sie ClassName /}

Rang

Logo

Teamname

gp

{/ ... Andere Statistiken ... /}

Form History

{apidata.response [0] .league.standings [0] .Map ((el) = & gt; { // ... Tischdaten rendern ... })}

)}

); } `` 我已经从@WordPress/Element 中包含了React钩子 usestate () ，而不是从React库中使用它。这是因为如果我以常规方式加载，它会为我使用的每个区块下载React。但是，如果我使用@WordPress/Element`, das aus einer einzelnen Quelle lädt, reagiert die WordPress -Ebene.

Diesmal habe ich anstatt den Code in useEffect() in eine Funktion zu wickeln, die nur aufgerufen wird, wenn die Schaltfläche angeklickt wird, damit wir die abgerufenen Daten in Echtzeit vorschauen können. Ich habe eine staatliche Variable namens apiData verwendet, um die Ligabelle bedingt zu rendern. Sobald die Schaltfläche klickt und die Daten abgerufen werden, setze ich apiData auf neue Daten in fetchData() fest und werde mit der verfügbaren Fußball-Ranking-Tabelle HTML erneut rendern.

Sie werden feststellen, dass nach dem Speichern der Post und der Seite der Seite der Ligabisch verschwindet. Dies liegt daran, dass wir den Null -Zustand (NULL) als Anfangswert von apiData verwenden. Wenn ein Beitrag gespeichert ist, wird die Eigenschaft in dem attributes.data -Objekt gespeichert, das wir als Anfangswert der useState() -Rearibel wie unten gezeigt nennen:

const [apiData, setApiData] = useState(attributes.data);

Funktion speichern

Wir werden fast dasselbe mit der Funktion save tun, aber mit ein wenig Modifikation. Zum Beispiel benötigt das Front -End weder die Schaltfläche "Daten abrufen", und die apiData -Statusvariable nicht, da wir sie in der Funktion edit überprüft haben. Wir brauchen jedoch eine zufällige apiData -Rehne, um attributes.data zu überprüfen, um JSX bedingt zu rendern, ansonsten wirft es einen undefinierten Fehler aus und die UI der Blockeditor wird leer.

Voller Code

`` `` JavaScript Standardfunktion Exportieren Sie die Standardfunktion Speichern (Requisiten) { const {Attribute} = props; const apidata = Attribute.data;

zurückkehren ( Apidata && (// rendern nur, wenn Apidata verfügbar ist

{/

... Rendering -Tabellendaten, die im Grunde genommen dem Code in der Bearbeitungsfunktion entsprechen ... /} ) ); } `` 如果您在区块已存在于区块编辑器中后修改 speichern "Funktion zeigt den folgenden Fehler an:

Dies liegt daran, dass sich die Tags im gespeicherten Inhalt von denen in unserer neuen save -Funktion unterscheiden. Da wir uns im Entwicklungsmodus befinden, ist es einfacher, Blöcke von der aktuellen Seite zu löschen und sie als neue Blöcke wieder einzuverkosteten. Auf diese Weise wird der aktualisierte Code verwendet und alles wird in Synchronisierung wiederhergestellt.

Wenn wir die render_callback -Methode verwenden, kann dies vermieden werden, da der Ausgang dynamisch und vom PHP und nicht von der save -Funktion gesteuert wird. Daher hat jede Methode ihre eigenen Vor- und Nachteile.

tom nowell liefert eine detaillierte Erklärung dafür, was in der Funktion save in dieser Stapelüberlaufantwort nicht getan werden soll.

Blockstile im Editor und Front-End

festlegen

In Bezug auf den Stil wird es fast genauso sein, wie wir es im vorherigen Beitrag gesehen haben, aber es gibt einige geringfügige Änderungen, die ich in den Kommentaren erklärt habe. Ich stelle hier nur den vollständigen Stil an, da es sich nur um einen Proof of Concept handelt, nicht um das, was Sie kopieren und einfügen möchten (es sei denn, Sie benötigen einen Block, der die Fußball -Rangliste im Stil wie dieses zeigt). Beachten Sie, dass ich immer noch SCSS verwende, das zur Build -Zeit zu CSS kompiliert.

Editor Style css /* 目标所有带有 data-title="Football Rankings" 的区块 */ .block-editor-block-list__layout .block-editor-block-list__block.wp-block[data-title="Football Rankings"] { /* 默认情况下，区块被限制在 650px 最大宽度加上其他设计特定代码 */ max-width: unset; /* ... 其他样式 ... */ }

Front-End-Stil

`` `CSS / Front-End-Blockstil / .WP-Block-Post-In-In-Kontent .wp-Block-Football-Rankings-Liga-Table { / ... Stil ... // }

Liga-Ständer { / Verwenden Sie ID Selector /

/ ... Stil ... // } `` <code>我们将此添加到 Wir fügen dies zu src/style.scss` hinzu, was für den Stil des Editors und Front-End verantwortlich ist. Ich kann die Demo -URL nicht teilen, da sie einen Editor -Zugriff erfordert, aber ich habe ein Video aufgezeichnet, mit dem Sie die Demo ansehen können:

Die Demo anzeigen Es ist sehr ordentlich, oder? Jetzt haben wir einen voll funktionsfähigen Block, der nicht nur am Frontend rendert, sondern auch API -Daten und im Block -Editor rendert - und es gibt eine Aktualisierung!

Wenn wir jedoch das Beste aus dem WordPress -Block -Editor nutzen möchten, sollten wir in Betracht ziehen, einige Block -UI -Elemente zu den Blockieren von Steuerelementen wie dem Festlegen von Farben, Typografie und Abstand abzubilden. Dies ist ein guter nächster Schritt auf der Block Development Learning Journey.

Das obige ist der detaillierte Inhalt vonRendern externer API -Daten in WordPress -Blöcken am hinteren Ende. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!