So erstellen Sie einen einfachen Block für den Gutenberg-Editor mit Javascript und React

Sie möchten eigene Blöcke für den Gutenberg-Editor erstellen, wissen aber nicht wie? Haben Sie schon von JavaScript und React gehört, wissen aber nicht, wie Sie sie in Ihren Code implementieren sollen? Suchen Sie nicht weiter! Dieser Artikel führt Sie Schritt für Schritt durch die Verwendung von JavaScript und React, um einen einfachen Block für den Gutenberg-Editor zu erstellen – damit Sie mit der Erstellung benutzerdefinierter Blöcke beginnen können.

Einführung

WordPress ist ein weit verbreitetes Content-Management-System (CMS), das die Art und Weise, wie Websites erstellt werden, revolutioniert hat. Seine intuitive Benutzeroberfläche und benutzerfreundlichen Funktionen machen es zur idealen Wahl für Webmaster und Entwickler, die mühelos moderne Websites erstellen können. In den letzten Jahren hat WordPress sein Arsenal mit der Entwicklung des Gutenberg-Editors um neue Funktionen erweitert – ein fortschrittlicher Blockeditor, mit dem Benutzer interaktive und flexible Webseiten erstellen können.

Das Erstellen eines benutzerdefinierten Blocks für den Gutenberg-Editor erfordert jedoch grundlegende Kenntnisse der JavaScript- und React-Technologien, was zunächst ziemlich einschüchternd sein kann. Glücklicherweise bietet dieser Artikel eine umfassende Anleitung, wie man mit JavaScript und React einen einfachen Block für den Gutenberg-Editor erstellt. Vom Einrichten der Umgebung bis zum Debuggen des Codes führt Sie dieser Artikel durch alle Schritte, die zum Erstellen Ihres eigenen Blocks erforderlich sind. Darüber hinaus werden verschiedene Konzepte im Zusammenhang mit JavaScript und React ausführlich erläutert, z. B. die Codestruktur, die Renderfunktion und benutzerdefinierte Attribute. Schließlich bietet es Beispiele, die Ihnen helfen, den Prozess der Erstellung eines Blocks für den Gutenberg-Editor mit JavaScript und React besser zu verstehen.

Wenn Sie also lernen möchten, wie Sie mit JavaScript und React Ihren eigenen benutzerdefinierten Block für den Gutenberg-Editor erstellen, ist dieser Artikel genau das Richtige für Sie! Lesen Sie also weiter, um loszulegen!

Einrichten der Umgebung

Bevor Sie einen Block für den Gutenberg-Editor erstellen können, müssen Sie zunächst Ihre Umgebung einrichten. Dazu gehören das Installieren von Node.js, das Erstellen einer Ordnerstruktur und das Erstellen einer package.json-Datei. Darüber hinaus kann die Verwendung eines Quellcode-Editors wie Visual Studio Code oder Sublime Text dazu beitragen, das Codieren viel einfacher und effizienter zu gestalten.

Die Installation von Node.js ist der erste Schritt zur Einrichtung der Umgebung. Node bietet eine Umgebung, in der Pakete installiert und JavaScript serverseitig ausgeführt werden können. Außerdem können Entwickler den Node Package Manager (npm) verwenden, um Abhängigkeiten für ihr Projekt zu installieren. Um Node zu installieren, öffnen Sie die Befehlszeile Ihres Systems und geben Sie Folgendes ein: „node -v“, um zu prüfen, ob es bereits installiert ist; Wenn es nicht installiert ist, geben Sie „npm install node -g“ ein, um den Installationsvorgang zu starten.

Das Erstellen einer Ordnerstruktur zum Speichern Ihrer Projektdateien ist ein weiterer wichtiger Schritt beim Einrichten der Umgebung. Erstellen Sie innerhalb dieser Struktur ein „src“-Verzeichnis, in dem alle Ihre Quelldateien für das Projekt gespeichert werden, z. B. JavaScript- und React-Dateien. Darüber hinaus sollten Sie ein „Build“-Verzeichnis erstellen, das alle Ihre kompilierten Assets enthält, die später bei der Registrierung Ihres Blocks im Editor verwendet werden.

Durch das Erstellen einer package.json-Datei können Sie Ihren Block im Editor registrieren und npm-Befehle ausführen. Diese Datei enthält Metadaten zu Ihrem Projekt, z. B. den Namen, die Versionsnummer und eine Liste der Abhängigkeiten, die während der Entwicklung und Produktion benötigt werden. Die Eingabe dieser Informationen in die Datei „package.json“ ist erforderlich, um npm-Befehle auszuführen und Ihren Block im Editor zu registrieren.

Die Verwendung eines Quellcode-Editors wie Visual Studio Code oder Sublime Text erleichtert die Arbeit mit JavaScript und React-Code erheblich. Diese Editoren bieten Funktionen wie Syntaxhervorhebung und Autovervollständigung, die Entwickler beim Schreiben von Code unterstützen und ihnen Zeit während der Entwicklung sparen können; Sie verfügen auch über Debugging-Funktionen, die dabei helfen können, Fehler im Code zu identifizieren und die Codierung insgesamt effizienter zu gestalten.

Indem Sie diese Schritte ausgeführt haben, haben Sie die Umgebung zum Erstellen eines einfachen Blocks für den Gutenberg-Editor mit JavaScript und React erfolgreich eingerichtet!

Erstellen eines Basisblocks

Der erste Schritt beim Erstellen eines Basisblocks für den Gutenberg-Editor besteht darin, die Umgebung einzurichten. Dieser Vorgang kann einfach mit Node und npm durchgeführt werden, solange Sie eine vorhandene WordPress-Installation mit aktiviertem Gutenberg-Plugin haben. Sobald dieser Schritt abgeschlossen ist, können Sie damit fortfahren, den Kern des Blocks in eine JavaScript-Datei zu schreiben. Diese Datei enthält den gesamten Code, der zum Erstellen und Registrieren des Blocks erforderlich ist. In dieser Datei müssen Sie den Namen, die Kategorie und die Attribute Ihres Blocks definieren, die von WordPress verwendet werden, um Blöcke im Editor zu identifizieren und zu gruppieren.

Der nächste Schritt besteht darin, die Methode edit() zu definieren, die bestimmt, was im Block angezeigt wird, wenn er bearbeitet wird. Dazu gehört das Erstellen von React-Komponenten wie Textfeldern, Bildern oder anderen Elementen, damit sie von Benutzern konfiguriert werden können, wenn sie einen Block zu ihrem Beitrag oder ihrer Seite hinzufügen. Darüber hinaus müssen Sie angeben, wie jedes Feld von WordPress gespeichert und gespeichert werden soll, wenn jemand einen Beitrag oder eine Seite mit Ihrem darin enthaltenen Block veröffentlicht.

Zuletzt müssen Sie eine save()-Methode definieren, die bestimmt, wie Ihr Block gespeichert werden soll, wenn er veröffentlicht wird. Dazu gehört das Schreiben von HTML-Markup, das Ihre Inhalte auf einer Website oder in einem Blogbeitrag korrekt anzeigt, und das Sicherstellen, dass alle benutzerdefinierten Attribute korrekt in den benutzerdefinierten Feldern von WordPress gespeichert werden. Das Debuggen Ihres Codes in dieser Phase ist unerlässlich. Dadurch können Sie Probleme erkennen, bevor ein Benutzer dies kann, wodurch Zeit gespart und die Benutzererfahrung verbessert wird.

Sobald diese Schritte abgeschlossen sind, haben Sie mithilfe von JavaScript und React erfolgreich einen Basisblock für den Gutenberg-Editor erstellt!

Registrieren des Blocks im Blockeditor

Sobald der Basisblock erstellt ist, muss er im Blockeditor registriert werden, damit er beim Erstellen von Beiträgen oder Seiten als verfügbare Option angezeigt wird. Die Schritte zum Registrieren eines neuen Blocks sind ziemlich einfach: Der erste Schritt besteht darin, die Funktion registerBlockType() aus dem wp-blocks-Paket von WordPress zu verwenden und einige wichtige Informationen über den Block wie seinen Namen, Titel und ob oder nicht zu übergeben Es unterstützt Inserter oder wiederverwendbare Blöcke. Darüber hinaus ermöglicht dieser Schritt auch zusätzliche Anpassungen, z. B. das Hinzufügen einer Stilvariation für den Block oder das Bereitstellen benutzerdefinierter Eigenschaften für Benutzereingaben auf seiner Einstellungsseite. Darüber hinaus sollte dieser Schritt auch das Einbinden aller relevanten Komponenten aus externen Paketen wie React beinhalten, um Funktionalität für Ihre maßgeschneiderten Blöcke bereitzustellen.

Wenn Sie Ihren neuen Block gestalten, können Sie CSS-Klassen entweder über Inline-Stile oder durch Verwendung vordefinierter Klassennamen einbeziehen, die vom wp-blocks-Paket von WordPress bereitgestellt werden. Um Ihre Blöcke noch auffälliger und attraktiver zu machen, können Sie einen Ordner in Ihrem Plugin-Verzeichnis erstellen, der alle externen JavaScript- und CSS-Dateien enthält, die zum Gestalten Ihrer maßgeschneiderten Blöcke mit benutzerdefinierten Stilen und Effekten verwendet werden. Dieser Schritt ist optional, kann aber dazu beitragen, dass sich Ihre Blöcke von den anderen abheben.

Bevor Sie einen neuen Block registrieren, ist es jedoch wichtig sicherzustellen, dass alle erforderlichen Komponenten in der Datei „package.json“ Ihres Projekts enthalten sind, damit sie beim Ausführen von Webpack oder beim Einreihen von Skripts in die Admin-Bildschirme von WordPress ordnungsgemäß geladen werden. Nachdem Sie Ihre package.json-Datei überprüft und sichergestellt haben, dass alle relevanten Komponenten korrekt hinzugefügt wurden, sollten Sie überprüfen, ob alle erforderlichen Registrierungsparameter korrekt an die registerBlockType()-Funktion des wp-blocks-Pakets von WordPress übergeben wurden, bevor Sie den neuen Block in Gutenberg registrieren -Editor. Dies hilft, Fehler zu vermeiden und einen reibungsloseren Prozess beim Erstellen von Beiträgen und Seiten mit Ihrem neu erstellten Block zu schaffen.

Indem Sie diesen Schritten folgen, sollten Sie jetzt erfolgreich Ihren eigenen maßgeschneiderten Block in Gutenberg registriert haben und bereit sein, aufregende benutzerdefinierte Inhalte damit zu erstellen!

Debuggen des Codes

Das Debuggen ist ein wesentlicher Bestandteil der Erstellung eines WordPress-Plugins für den Gutenberg-Editor, da es hilft, eventuell auftretende Fehler oder falsche Ergebnisse zu identifizieren. Glücklicherweise gibt es zahlreiche Tools, die Entwickler beim Debuggen ihres Codes unterstützen. Zu wissen, wie man Chrome DevTools verwendet, ist für das Debuggen von JavaScript- und React-Code unerlässlich, da es Entwicklern ermöglicht, den Code zu überwachen, während er im Browser ausgeführt wird, und ihnen Einblick in potenzielle Probleme mit ihrem Code gibt. Darüber hinaus ist es wichtig, die verschiedenen Arten von Fehlern und Warnungen zu verstehen, die vom Debugger erzeugt werden können, damit Entwickler alle Probleme, auf die sie in ihrem Code stoßen, schnell diagnostizieren und beheben können.

Neben dem Zugriff auf Debugging-Tools gibt es einige nützliche Tipps und Tricks, die das Debuggen von WordPress-Plugins mit dem Gutenberg-Editor erleichtern. Beispielsweise hilft es oft, den Code in kleinere Teile zu zerlegen und diese Teile einzeln zu testen, um die Quelle von Fehlern oder Problemen zu lokalisieren. Darüber hinaus kann es sehr nützlich sein, vorhandene WordPress-Plugins zu durchsuchen und zu sehen, wie diese Plugins strukturiert sind, da es Entwicklern eine gute Vorstellung davon gibt, wie ihr eigenes Plugin aussehen sollte und wie sie bei Bedarf debuggen können.

Indem Sie diese Schritte befolgen und alle verfügbaren Tools zum Debuggen Ihres Codes verwenden, können Sie mit Leichtigkeit ein zuverlässiges WordPress-Plugin für den Gutenberg-Editor erstellen. Sobald alle Fehler identifiziert und behoben wurden, können Sie mit der Gewissheit fortfahren, dass Ihr Plugin ordnungsgemäß funktioniert. Mit etwas Übung und Hingabe kann jeder lernen, wie man seinen Code debuggt und ein erfolgreiches WordPress-Plugin für den Gutenberg-Editor erstellt.

Erläutern der JavaScript- und React-Code-Struktur

Die JavaScript- und React-Codestruktur ist die Grundlage für die Erstellung eines einfachen Blocks für den Gutenberg-Editor. Das Verständnis der Grundlagen von JavaScript und der React-Codestruktur ist für die Erstellung eines erfolgreichen Blocks unerlässlich. Wenn Sie einen JavaScript- und React-Code schreiben, ist es wichtig, daran zu denken, Ihren Code organisiert und gut strukturiert zu halten. Dadurch wird das Debuggen erheblich vereinfacht und sichergestellt, dass Ihr Code korrekt übermittelt wird.

Es gibt bestimmte Kernelemente, die beim Schreiben von Code in JavaScript und React enthalten sein müssen. Dazu gehören die Import-Anweisung, Variablen, Komponenten, Requisiten, JSX-Tags, Funktionen, Klassen, Zustandsobjekte, Bedingungen und Schleifen. Darüber hinaus gibt es bestimmte Schlüsselkonzepte wie Komponenten, Props und Zustandsobjekte, die verstanden werden müssen, um erfolgreich effektiven Code in JavaScript und React zu schreiben.

Die import-Anweisung wird verwendet, um andere Dateien oder Komponenten in die aktuelle Datei zu importieren, damit sie verwendet werden können. Importanweisungen ermöglichen es, importierten Modulen einfachere Namen zu geben, die dann im gesamten Skript oder in der Anwendung verwendet werden können. Variablen ermöglichen das Speichern von Daten, auf die dann im gesamten Skript oder in der gesamten Komponente zugegriffen werden kann. Komponenten sind wiederverwendbare Codeteile, die ein bestimmtes Element auf der Webseite darstellen. Props ermöglichen das Übergeben von Werten von einer Komponente an eine andere innerhalb einer Anwendung, wodurch Komponenten mit unterschiedlichen Werten wiederverwendet werden können. JSX-Tags sind HTML-ähnliche Tags, die beim Schreiben von Code in React anstelle von HTML-Tags verwendet werden. Funktionen sind Codeblöcke, die bestimmte Aufgaben ausführen, wenn sie aufgerufen werden, während Klassen als Container für verschiedene Funktionen oder Methoden fungieren, die durch ein gemeinsames Thema miteinander verbunden sind. Zustandsobjekte enthalten Daten, die sich im Laufe der Zeit ändern können, um Änderungen zu erleichtern, die durch Benutzerinteraktionen innerhalb einer Anwendung oder eines Skripts vorgenommen werden. Bedingungen ermöglichen unterschiedliche Ergebnisse basierend auf der Erfüllung bestimmter Bedingungen, während Schleifen ermöglichen, dass Codeabschnitte wiederholt ausgeführt werden, bis bestimmte Anforderungen erfüllt sind.

Es ist auch wichtig, sich des Konzepts der modularen Programmierung bewusst zu sein, wenn Sie Code in JavaScript und React schreiben. Modulare Programmierung ist ein Ansatz, bei dem Teile der Funktionalität in kleinere Teile oder Module zerlegt werden, die dann einzeln entwickelt oder getestet werden können, bevor sie wieder zu einem vollständigen Programm zusammengesetzt werden. Dies ermöglicht Entwicklern, effiziente Strukturen zu schaffen, die Wiederholungen minimieren und die Lesbarkeit sowie Wartbarkeit der Codierungsbasis jedes Projekts über seinen Lebenszyklus hinweg erhöhen.

Wenn Sie diese Schlüsselkonzepte und Elemente von JavaScript und React verstehen, können Sie mühelos einen einfachen Block für den Gutenberg-Editor erstellen. Sie finden es auch einfacher, Ihren Code zu debuggen

Erläuterung der Render-Funktion

Die Render-Funktion ist ein wesentlicher Bestandteil der React-Codestruktur. Es ist für die Interpretation und Anzeige der Ausgabe einer React-Komponente verantwortlich. Die Render-Funktion besteht aus verschiedenen Komponenten, wie z. B. dem Element-Tag, Klassenname und Requisiten. Das Element-Tag wird verwendet, um den Typ der HTML-Elemente zu definieren, die im Code Ihres Blocks verwendet werden. Das className-Element identifiziert bestimmte Klassen innerhalb der HTML-Elemente, auf die abgezielt wird. Schließlich übergibt das props-Element innerhalb des Codes Ihres Blocks Daten von einer Komponente an eine andere.

Beim Schreiben einer Renderfunktion ist es wichtig zu berücksichtigen, wie jede dieser Komponenten miteinander interagiert. Wenn Sie beispielsweise eine Schaltfläche in Ihrem Block haben, auf die geklickt werden muss, um eine Aktion auszuführen, müssen Sie sicherstellen, dass das Element-Tag ein href-Attribut enthält, das es mit der entsprechenden JavaScript-Funktion oder -Aktion verknüpft. Darüber hinaus müssen Sie den entsprechenden Klassennamen und die entsprechenden Props festlegen, damit sie ordnungsgemäß mit den erforderlichen Funktionen und Aktionen verknüpft sind, die in Ihrem Block benötigt werden.

Die Renderfunktion ermöglicht auch benutzerdefinierte Attribute, die dabei helfen, Daten von einer Komponente zur anderen weiterzugeben. Benutzerdefinierte Attribute bieten Flexibilität beim Erstellen von Blöcken, da sie zum Anpassen oder Anpassen von Elementen innerhalb des Codes Ihres Blocks wie Schriftgröße, Ränder, Polsterung usw. verwendet werden können. Um benutzerdefinierte Attribute in Ihrer Renderfunktion zu verwenden, müssen Sie zuerst ein „Requisiten“-Objekt erstellen und verwenden Sie den Schlüssel „attributes“, um alle benutzerdefinierten Attribute zu speichern, die für Ihren Block benötigt werden.

Es ist wichtig zu beachten, dass Sie bei der Verwendung von benutzerdefinierten Attributen im Code Ihres Blocks sicherstellen müssen, dass sie richtig formatiert und validiert sind, da sie leicht Fehler verursachen können, wenn sie nicht korrekt ausgeführt werden. Wenn Sie benutzerdefinierte Attribute in Kombination mit anderen Komponenten Ihrer Renderfunktion (wie Element-Tags und className) verwenden, ist es außerdem wichtig sicherzustellen, dass die Syntax richtig geschrieben ist, damit sich der Block wie erwartet verhält, wenn er in der Ausgabe des Gutenberg-Editors angezeigt wird Bereich.

Zusammenfassend ist es wichtig zu verstehen, wie man eine richtige Renderfunktion schreibt, wenn man Blöcke mit JavaScript- und React-Codestruktur für den Gutenberg-Editor erstellt. Dieser Artikel hat einen Überblick darüber gegeben, welche Komponenten eine Renderfunktion bilden und wie benutzerdefinierte Attribute darin verwendet werden können. Zusätzlich wurden Beispiele bereitgestellt, um zu helfen, jedes der diskutierten Konzepte zu verdeutlichen.

Grundlegendes zu benutzerdefinierten Attributen

Beim Erstellen eines WordPress-Plugins für den Gutenberg-Editor mit JavaScript-React ist es wichtig, die Verwendung von benutzerdefinierten Attributen zu verstehen. Benutzerdefinierte Attribute ermöglichen es Entwicklern, die Attribute einer React-Komponente zu ändern, ohne ihr Markup oder ihre Codierungsstruktur zu ändern. Durch das Verständnis der Syntax und Verwendung von benutzerdefinierten Attributen können Entwickler erfolgreiche Blöcke für den Gutenberg-Editor einfacher und effizienter erstellen.

Es gibt zwei Haupttypen von benutzerdefinierten Attributen: Props und State. Props sind unveränderlich, d. h. sie können nicht geändert werden, wenn sie einmal festgelegt wurden. Sie werden normalerweise verwendet, um Daten von einer Komponente an eine andere zu übergeben sowie um Anfangswerte für Komponenten beim Laden einer Seite festzulegen. Beispielsweise können Props verwendet werden, um den Platzhaltertext in einem Eingabefeld zu definieren oder festzulegen, ob eine Schaltfläche aktiviert werden soll oder nicht. Der Status hingegen ist veränderlich und kann dynamisch sein – er kann sich im Laufe der Zeit als Reaktion auf Benutzeraktionen oder Ereignisse ändern, die von der Anwendungslogik ausgelöst werden. Wenn ein Benutzer beispielsweise auf eine Schaltfläche klickt, kann der Status verwendet werden, um Informationen über den aktuellen Status der Anwendung zu speichern (z. B. ob die Schaltfläche aktiviert oder deaktiviert ist).

Benutzerdefinierte Attribute bieten eine einfache Möglichkeit, auf Daten im Code eines Blocks zuzugreifen und diese zu ändern, sodass Entwickler ihre Blöcke schnell an sich ändernde Anforderungen anpassen können, ohne große Codeabschnitte neu schreiben zu müssen. Darüber hinaus ermöglichen benutzerdefinierte Attribute in Kombination mit anderen React-Funktionen wie Lebenszyklusmethoden Entwicklern, Blöcke zu erstellen, die dynamisch auf verschiedene Benutzerinteraktionen oder Ereignisse in der Umgebung der Anwendung reagieren. Dadurch ist es möglich, leistungsstarke Blöcke zu erstellen, die schnell und genau auf Benutzereingaben reagieren können, ohne die Leistung oder Benutzerfreundlichkeit zu beeinträchtigen.

Zusammenfassend ist das Verständnis der Syntax und Verwendung von benutzerdefinierten Attributen ein wesentlicher Bestandteil der Erstellung erfolgreicher Blöcke für den Gutenberg-Editor mit JavaScript-React. Mit benutzerdefinierten Attributen können Entwickler problemlos auf Daten in ihren Blöcken zugreifen und diese ändern, ohne große Codeabschnitte neu schreiben zu müssen. Darüber hinaus ermöglichen es benutzerdefinierte Attribute Entwicklern, leistungsstarke Blöcke zu erstellen, die in der Lage sind, dynamisch auf verschiedene Benutzerinteraktionen oder Ereignisse innerhalb der Anwendungsumgebung zu reagieren.

Beispiele

Beispiele sind eine großartige Möglichkeit, um zu lernen, wie man die in diesem Artikel beschriebenen Konzepte und Techniken anwendet. Dieser Abschnitt enthält mehrere Beispiele, die die verschiedenen Aspekte der Erstellung eines einfachen Blocks für den Gutenberg-Editor mit JavaScript und React veranschaulichen.

Das erste Beispiel konzentriert sich darauf, wie der Code innerhalb der Renderfunktion einer Blockkomponente geschrieben wird. Es beschreibt, welche Komponenten verwendet werden müssen, wie sie strukturiert sein sollten und was ihr Zweck ist. Darüber hinaus wird die Verwendung von Requisiten und benutzerdefinierten Attributen innerhalb der Renderfunktion erläutert, um die gewünschte Ausgabe zu erzielen.

Dieser Block ermöglicht es dem Benutzer, eine Nachricht einzugeben und ein Bild hochzuladen . In der editFunktion verwendet es die RichTextKomponente, um ein bearbeitbares Nachrichtenfeld zu erstellen, und eine MediaUploadKomponente, um ein Bild hochzuladen. Das attributesObjekt enthält die Eigenschaften messageund imageUrl, die zum Speichern der vom Benutzer eingegebenen Daten verwendet werden. Die setAttributesFunktion wird verwendet, um die Attribute mit den vom Benutzer eingegebenen neuen Daten zu aktualisieren.

In der saveFunktion verwendet es ein divElement, um die Nachricht anzuzeigen, und ein imgElement, um das Bild anzuzeigen. Der classNamewird verwendet, um dem div-Element eine Klasse hinzuzufügen, die für das Styling verwendet werden kann.

Die renderFunktion dient dazu, den Block im Editor anzuzeigen. Die valuemit der RichText-Komponente verwendete Prop wird verwendet, um den eingegebenen Text an das Nachrichtenattribut zu binden, die onChangeProp wird verwendet, um das Nachrichtenattribut auf den eingegebenen Text festzulegen. Die onClickRequisite wird verwendet, um die Medienbibliothek zu öffnen, wenn auf die Schaltfläche zum Hochladen geklickt wird. Das imgElement hat ein srcAttribut, das an das imageUrl-Attribut gebunden ist. Die onChangeProp wird verwendet, um das imageUrl-Attribut zu aktualisieren, wenn ein neues Bild ausgewählt wird.

Die saveFunktion wird verwendet, um den Block auf dem Frontend anzuzeigen, sie verwendet die Attribute messageund imageUrl, um den eingegebenen Text und das hochgeladene Bild anzuzeigen.

 

Das nächste Beispiel zeigt, wie benutzerdefinierte Attribute verwendet werden können, um verschiedene Eigenschaften für eine Blockkomponente festzulegen:

Dieser Block ermöglicht es dem Benutzer, Text einzugeben und die Schriftgröße und Farbe dieses Textes auszuwählen. In der editFunktion verwendet es die TextControlKomponente from @wordpress/components, um drei Textfelder zu erstellen, in die der Benutzer Daten eingeben kann. Das attributesObjekt enthält die Eigenschaften text, fontSizeund textColor, die zum Speichern der vom Benutzer eingegebenen Daten verwendet werden. Die setAttributesFunktion wird verwendet, um die Attribute mit den vom Benutzer eingegebenen neuen Daten zu aktualisieren.

Die saveFunktion verwendet ein divElement, um den Text anzuzeigen, und sie verwendet das styleAttribut, um das fontSizeund colordes Textes festzulegen. Die Attribute fontSizeund textColorwerden verwendet, um die Schriftgröße bzw. die Farbe des Textes festzulegen.

Dieser Block zeigt, wie benutzerdefinierte Attribute verwendet werden können, um verschiedene Eigenschaften für eine Blockkomponente festzulegen. Die TextControlKomponente wird verwendet, um Textfelder zu erstellen, die es dem Benutzer ermöglichen, Daten einzugeben, und die withStateKomponente wird verwendet, um den Status der Komponente zu verwalten. Die setAttributesFunktion wird verwendet, um die Attribute mit den vom Benutzer eingegebenen neuen Daten zu aktualisieren.

Dieser Block beschreibt, welche Komponenten in die Datei der Blockkomponente importiert werden müssen, um auf benutzerdefinierte Attribute zugreifen zu können, und welche Eigenschaften verfügbar sind, wenn eine Blockkomponente über Attribute angepasst wird. Das Beispiel verwendet die TextControl, withStateand registerBlockType-Komponente von @wordpress/componentsand @wordpress/blocks.

 

Diese Beispiele helfen Ihnen, die in diesem Artikel beschriebenen Konzepte und Techniken besser zu verstehen und anzuwenden. Sie demonstrieren jeden Schritt, der unternommen werden muss, um einen einfachen Block für den Gutenberg-Editor mit JavaScript und React zu erstellen. Darüber hinaus bieten sie klare Erklärungen und visuelle Darstellungen sowohl des Prozesses als auch des Ergebnisses, wodurch es einfacher wird, diese Konzepte schnell und genau zu erfassen.

Fazit

Zusammenfassend ist der Prozess, einen einfachen Block für den Gutenberg-Editor mit JavaScript und React zu erstellen, eine interessante Herausforderung. Mit sorgfältiger Planung, einem Verständnis der verschiedenen beteiligten Konzepte und Techniken und etwas Debugging zur Feinabstimmung ist es möglich, einen Block zu erstellen, der an Ihre Bedürfnisse angepasst werden kann. In diesem Artikel haben wir die Schritte und Konzepte behandelt, die erforderlich sind, um einen einfachen Block für den Gutenberg-Editor mit JavaScript und React zu erstellen und ihn im Editor zu registrieren.

Zu Beginn haben wir erklärt, wie die Umgebung eingerichtet wird, um unseren Block zu erstellen. Dann haben wir einen einfachen Block mit JavaScript und React erstellt, besprochen, wie man ihn im Blockeditor registriert und dann debuggt. Danach gingen wir die verschiedenen Konzepte durch, die in diesem Prozess verwendet werden, wie z. B. die JavaScript- und React-Codestruktur, Renderfunktionen und benutzerdefinierte Attribute.

Darüber hinaus sind wir jeden Schritt und jedes Konzept im Detail durchgegangen und haben Beispiele bereitgestellt, um sie zu verdeutlichen. Indem Sie diese Schritte befolgen und mehr über die relevanten Konzepte und Techniken erfahren, hat jeder die Möglichkeit, einen benutzerdefinierten Block für seine WordPress-Website zu erstellen. Am Ende haben Sie etwas, auf das Sie stolz sein können, wenn Sie diese Aufgabe erledigt haben.

Zusammenfassend lässt sich sagen, dass das Erstellen eines einfachen Blocks für den Gutenberg-Editor mit JavaScript und React nicht so schwierig ist, wie es scheinen mag! Wenn Sie die Grundlagen wie die JavaScript- und React-Codestruktur und die Renderfunktion sowie benutzerdefinierte Attribute verstehen, können Sie sicher einen Basisblock erstellen, ihn im Blockeditor registrieren und den Code debuggen. Mit Hilfe dieses Artikels können Sie jetzt mit Ihrem eigenen einfachen Block für den Gutenberg-Editor beginnen und Ihre eigenen einzigartigen Inhalte erstellen!