Share
Der neue WordPress-Editor (Codename Gutenberg) wird in Version 5.0 veröffentlicht. Jetzt ist der perfekte Zeitpunkt, um sich damit vertraut zu machen, bevor es im WordPress-Kern landet.
Ich zeige Ihnen, wie Sie mit der Block-API arbeiten und erstellen Sie eigene Inhaltsblöcke, mit denen Sie Ihre Posts und Seiten erstellen können.
Es gibt noch kein genaues Datum für die Veröffentlichung von WordPress 5.0, aber es sollte einige Zeit in den nächsten Monaten sein. Bis dahin ist Gutenberg als eigenständiges Plugin verfügbar.
Ich würde wärmstens empfehlen, den neuen Gutenberg-Editor auszuprobieren, wenn Sie es noch nicht getan haben. Es ist sehr einfach, direkt von Ihrem WordPress-Administrator zu installieren. Da es sich jedoch immer noch um eine Betaversion des neuen Editors handelt, wird davon abgeraten, dass Sie ihn noch auf Produktionsstandorten verwenden. Bewahren Sie es nur für lokale Entwicklungsstandorte auf.
Die Installation von Gutenberg ist auch der Schlüssel, wenn Sie diesem Tutorial folgen möchten. Auf diese Weise können Sie mit dem Erstellen Ihrer eigenen Blöcke experimentieren. Die Entwicklung des neuen Editors hat in den letzten Monaten rasant zugenommen, mehrere Releases bereits im Jahr 2018. Die neueste Version von Gutenberg ist derzeit 2.7.0.
Mit jeder Version werden neue Funktionen hinzugefügt, und die Benutzeroberfläche des Editors wird basierend auf dem Feedback der Benutzer ständig verbessert. Es fängt an, viel schlanker als frühere Versionen auszusehen. Außerdem wurden viele Fehler behoben, die den Editor wesentlich robuster machen.
Gutenberg bietet eine neue Möglichkeit, Postinhalte mithilfe von "Blöcken" zu erstellen, die zu einer vollständigen Seite aufeinander gestapelt werden können. Jeder einzelne Block existiert unabhängig von anderen Blöcken und kann nahezu alle gewünschten Markierungen, Stile und JavaScript enthalten.
In diesem Tutorial behandeln wir alles, was Sie über die Block-API wissen müssen, damit Sie sofort eigene Blöcke erstellen können. Sobald Sie die Grundlagen beherrschen, ist das Erstellen komplexer Blöcke einfacher als Sie denken!
Das Gutenberg-Projekt ist aus einem anderen wichtigen Grund für WordPress eine große Neuigkeit. Es ist auf React aufgebaut. Das ist richtig, zum ersten Mal in WordPress wird React in Core aufgenommen! Dies ist eine großartige Neuigkeit für Entwickler von Designs und Plugins, da React jeder Seite problemlos hinzugefügt werden kann, indem die in WordPress Core enthaltenen React- und ReactDOM-Bibliotheken genutzt werden.
In Kürze können Sie UI-Komponenten für alle Ihre WordPress-Projekte direkt in React erstellen. Wenn Sie zuvor React- und ReactDOM-Bibliotheken verwenden wollten, mussten Sie sie manuell einschließen. Sie im Kern zu haben, macht es viel bequemer.
Denken Sie nur daran, wie fantastisch es ist, einen Bildschirm für Plugin-Optionen vollständig in React zu erstellen! Oder wie wäre es mit einigen coolen erweiterten Anpassungssteuerelementen? Diese neuen Tools geben Entwicklern viel Freiheit und Flexibilität, um interaktive Benutzeroberflächen zu erstellen.
Ich gehe davon aus, dass die Entwicklung von WordPress in den nächsten Jahren sehr interessant und auch sehr lustig sein wird!
Das Konzept der Blöcke im neuen Editor ist eine echte Verschiebung gegenüber dem aktuellen Editor, der auf TinyMCE basiert. Schauen wir uns also genau an, was ein Block ist, bevor wir in die Block-API einsteigen. Stellen Sie sich Blöcke als schwarze Kästchen vor, die jeweils eine Reihe von Markierungen, Stilen und JavaScript enthalten, die alle in einer praktischen Einheit namens "Block" zusammengefasst sind..
Wenn ein Block zum Editor hinzugefügt wird, zeigt er eine Vorschau dessen, wie er am Frontend aussehen wird. Fast alle Blöcke verfügen über Einstellungen, um ihr Aussehen und / oder ihr Verhalten weiter anzupassen.
Einige der Blöcke, die standardmäßig im neuen Editor verfügbar sind, sind:
Dadurch erhalten Sie eine Vorstellung von der Art des Inhalts, den Sie mithilfe von Blöcken, die im neuen Editor enthalten sind, zum Editor hinzufügen können. Alle diese Blocktypen sind nützlich, aber ziemlich einfach. Erwarten Sie also, dass viele Plugins erscheinen werden, mit weitaus umfangreicheren Blöcken für das Hinzufügen fast aller Arten von Inhalten.
Sie haben möglicherweise bereits an einige Inhaltsblöcke gedacht, die Sie für Ihre eigenen Projekte benötigen. Wenn keine dieser Optionen in Gutenberg verfügbar ist, sind sie wahrscheinlich gute Kandidaten für die Erstellung eines eigenen benutzerdefinierten Blocks.
Ich würde empfehlen, den in dieser Tutorialserie vorgestellten Code auszuprobieren, da dies die beste Möglichkeit ist, um mithilfe der Block-API eigene Blöcke zu erstellen. Lesen Sie auf jeden Fall zuerst das Tutorial durch, um sich mit der Funktionsweise der Block-API vertraut zu machen. Kommen Sie jedoch zurück, probieren Sie den Code selbst aus und erstellen Sie einige Blöcke!
Dies ist eine mittlere bis fortgeschrittene Lernreihe, daher wird davon ausgegangen, dass Sie mit der WordPress-Entwicklung nicht neu sind. Um das Beste aus dieser Serie herauszuholen, sollten Sie mindestens über folgende Kenntnisse verfügen:
Wenn Sie eines dieser Themen auf den neuesten Stand bringen möchten, empfiehlt es sich, dies zu tun, bevor Sie fortfahren. Ich werde die Konzepte im weiteren Verlauf erläutern, aber es ist außerhalb des Tutorials, jedes kleine Detail zu erklären.
Es ist üblich, in WordPress benutzerdefinierte Blöcke mit JSX zu erstellen, dies ist jedoch keinesfalls erforderlich. Wenn Sie es gewohnt sind, React-Komponenten in Vanilla-JavaScript zu entwickeln, können Sie dies auch in WordPress tun. Die Wahl liegt ganz bei Ihnen. Der größte Teil des Blockcodes, auf den Sie stoßen, wird jedoch in JSX geschrieben (einschließlich dieses Lernprogramms). Daher werden Sie die Konzepte leichter verstehen, wenn Sie auch JSX verwenden.
Das Gutenberg-Projekt ist immer noch sehr in der Entwicklung, daher können sich auch einige Dinge ändern, wenn Sie dieses Tutorial lesen. Dies kann Änderungen an der Editorschnittstelle, neue Kernkomponenten usw. umfassen.
Der neue Editor ist jedoch jetzt ziemlich stabil, und die kürzlich hinzugefügten Funktionen wie verschachtelte Blöcke und die Neuanordnung von Drag / Drop sind ziemlich aufregend. Auch wenn einige der kleineren Details von Wie Wenn Sie Blöcke implementieren, ändern sich möglicherweise. Wichtig ist dabei das Gesamtkonzept der Blöcke und die Art und Weise, wie Sie diese verwenden können, um beliebige Inhalte zu erstellen.
Wenn Sie nicht weiterkommen, empfehle ich einen Blick auf das offizielle Gutenberg-Handbuch, das mit den neuesten Änderungen auf dem neuesten Stand ist. Schauen Sie sich auch das Gutenberg-Projekt auf GitHub an, um den Quellcode zu überprüfen und eventuelle Probleme zu protokollieren.
Dies wird nur dazu beitragen, dass das Projekt stärker wird, je mehr Leute es testen. Dies ist ein weiterer guter Grund, jetzt mit dem Entwickeln von Blöcken zu beginnen, bevor sie offiziell Teil von WordPress sind!
Um dem Code in diesem Lernprogramm zu folgen, benötigen Sie Folgendes:
Wenn Sie noch keine lokale Entwicklungsumgebung eingerichtet haben, können Sie so etwas wie Local by Flywheel oder DesktopServer verwenden, da beide über freie Versionen verfügen und mehrere Betriebssysteme unterstützen.
Stellen Sie sicher, dass Sie die neuesten Versionen von WordPress und das Gutenberg-Plugin ausführen, um sicherzustellen, dass Sie die neuesten Funktionen verwenden. Außerdem gibt es einige großartige Code-Editoren. Wenn Sie noch keinen installiert haben, schauen Sie sich kostenlose Editoren wie Visual Studio Code oder Atom an, die mehr als ausreichend sein sollten.
Um neue Blöcke einfach zu erstellen, verwenden wir ein relativ neues Toolkit namens Create-guten-Block. Damit können Sie schnell ein neues Plugin mit allen Setup- und Starter-Codes erstellen, die zum Erstellen von Blöcken erforderlich sind. Es ist auch ein Zero-Configuration-Toolkit, daher funktioniert es direkt nach dem Auspacken ähnlich wie das Create-React-App Toolkit für das Gerüstbau neuer React-Apps mit minimalem Aufwand. Also wenn du jemals benutzt hast Create-React-App, Sie wissen, was Sie erwartet.
Lassen Sie uns jetzt einen Blick darauf werfen, wie wir dieses Werkzeug zum Erstellen von Gutenberg-Blöcken verwenden können. Öffnen Sie ein Terminalfenster in Ihrem Plugin-Ordner (/ wp-content / plugins /) für Ihre lokale Entwicklungsseite und geben Sie Folgendes ein:
npx create-guten-block my-custom-block cd mein-custom-block npm start
(Hinweis: Zur Verwendung von ist npm v5.2 + erforderlich npx Befehl.)
Nach einigen Minuten wird ein neues Plugin in einem Ordner namens erstellt Mein-Custom-Block enthält alle Dateien und Werkzeuge, die zum Erstellen von Blöcken mithilfe von React! Nicht schlecht, nicht wahr??
Der Name des Plugins im WordPress-Administrator lautet my-custom-block - CGB Gutenberg Block Plugin. Fahren Sie fort und aktivieren Sie es.
Das Plugin erstellt einen neuen Block, der im Gutenberg-Editor zur Verfügung steht. Um unseren neuen Block zu testen, navigieren Sie zum Post-Editor und klicken Sie auf den mit Platzhaltern beschrifteten Text Schreibe deine Geschichte.
Als nächstes drücken Sie die / Taste, um ein Popup-Fenster anzuzeigen, mit dem wir alle verfügbaren Blöcke durchsuchen können.
Hinweis: Es gibt andere Möglichkeiten, nach einem Block zu suchen, aber ich mag es zu verwenden / um das Suchblockfenster ziemlich schnell und bequem anzuzeigen. Verwenden Sie jedoch die Methode, mit der Sie sich am wohlsten fühlen.
Wenn das Suchfeld geöffnet ist, beginnen Sie mit der Eingabe Mein-Custom-Block und wählen Sie my-custom-block - CGB-Block. Dadurch wird unser benutzerdefinierter Block im Editorfenster angezeigt.
Im Moment handelt es sich nur um einen Boilerplate-Block, der eigentlich nichts anderes tut, als Platzhaltertext in einem farbigen Feld anzuzeigen. Es zeigt jedoch einen interessanten Aspekt beim Erstellen von Blöcken.
Klicken Beitrag anzeigen um zu sehen, wie der Beitrag für die Besucher der Website aussehen wird.
Wie Sie sehen können, unterscheiden sich sowohl der Inhalt als auch die Stile des gerenderten Blocks im Frontend und im Backend. Dies gilt auch für JavaScript-Code, der sich auch für das Frontend unterscheiden kann.
Der Grund für den Unterschied beim Rendern liegt darin, dass Sie beim Erstellen von Blöcken gesonderte Front-End- und Back-End-Renderfunktionen definieren müssen.
Dies liegt daran, dass für viele Blöcke zusätzliche UI-Elemente im Post-Editor gerendert werden müssen, um die Blockeinstellungen zu konfigurieren. Da dies nur für den Post-Editor relevant ist, ist es beim Rendern des Blocks auf der Vorderseite völlig überflüssig. Daher geben Sie die Ausgabe an, die im Frontend in einer separaten Renderfunktion angezeigt werden muss.
Während dieser Ansatz sinnvoll ist und gut funktioniert, wirft er Probleme mit der Duplizierung von Code auf. Wenn Sie nicht vorsichtig sind, kann es zu doppelten Definitionen von Inhalten kommen.
Wenn möglich, sollten Sie den Inhalt der Front-End- und Back-End-Rendering-Funktionen gemeinsam aufteilen, um Doppelarbeit zu vermeiden. Wir werden diesen Ansatz in dieser Reihe von Tutorials verfolgen.
In diesem Tutorial habe ich vorgestellt, was ein Block ist und warum der neue Gutenberg-Editor große Neuigkeiten sein wird, wenn er mit WordPress 5.0 ausgeliefert wird. Es ist eine echte Änderung gegenüber dem aktuellen TinyMCE-basierten Editor.
Um zu helfen, Blöcke schnell zu erstellen, Create-guten-Block ist ein sehr nützliches Werkzeug, mit dem Sie ein komplettes Plugin erstellen können, das einen funktionierenden Starterblock enthält, der zur Anpassung bereit ist.
Abgerundet wurden die Dinge durch die Verwendung unseres benutzerdefinierten Blocks im neuen Post-Editor, und wir stellten fest, dass das Rendern auf der Vorder- und Rückseite sehr unterschiedlich aussehen kann. In Gutenberg müssen Sie nicht mit der Ausgabe übereinstimmen!
In Teil 2 werden wir auf die Besonderheiten der Block-API eingehen und wie Sie diese nutzen können, um Ihre eigenen benutzerdefinierten Blöcke zu erstellen.
In der Zwischenzeit können Sie einige unserer anderen Beiträge über WordPress Gutenberg lesen!
Accentsconagua