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

So erstellen Sie einen benutzerdefinierten WordPress-Gutenberg-Block: Tutorial-Serie

9

Dies ist eine detaillierte Tutorial-Serie, die beschreibt, wie Sie Ihre eigenen benutzerdefinierten WordPress Gutenberg-Blöcke erstellen. Es ist für Sie, die ein Theme- oder Plugin-Entwickler sind und wie ich frustriert über den Mangel an Dokumentation sind. Das meiste, was ich gelernt habe, wenn es um die Entwicklung in der neuen Javascript-Welt von WordPress geht, ist durch Ausprobieren, energisches Experimentieren und Lesen von allem, was mir dazu in die Quere kam. Und so dachte ich, ich könnte alles, was ich bisher gelernt habe, in einem großen Tutorial zusammenfassen.

In 10 Teilen soll dieses Tutorial Ihnen beibringen, wie Sie Ihre eigenen benutzerdefinierten Blöcke schreiben. Ganz gleich, wofür sie gedacht sind, angefangen bei den Grundlagen bis hin zu komplexeren Funktionen. Ich empfehle, dass Sie alles selbst schreiben, anstatt den Code zu kopieren und einzufügen. So lernt man am besten! Folgen Sie der Serie von Schritt 1 bis 10, da wir im weiteren Verlauf auf dem Block aufbauen.

Was Sie wissen müssen, bevor wir beginnen

Bevor wir uns in die Stufen stürzen; ein Haftungsausschluss. Es gibt ein paar Dinge, die Sie bereits vorher wissen sollten, was diese Serie ist und was sie nicht ist.

Die Programmiersprachen

Sie müssen Javascript beherrschen – das ist eine Selbstverständlichkeit. Sie müssen kein Experte sein, aber dies ist kein Javascript-Tutorial. Wie für die ECMAScript-JavaScript-Version; Sie können in ES5 schreiben und müssen sich nicht um das Kompilieren Ihres Codes mit Babel und so kümmern. Diese Serie ist jedoch mit ES6- und ESNext-Code geschrieben. Keine Sorge – Schritt 1 dient dazu, Sie bei der Einrichtung einer Entwicklungsumgebung zu unterstützen, die bereit ist, in ESNext mit all ihren neuen Syntaxen zu programmieren.

Wie Sie wahrscheinlich wissen, basiert Gutenberg auf React JS. Diese Serie ist auch kein React-Tutorial und setzt Grundkenntnisse von React und seiner Funktionsweise voraus. Auch hier muss man kein Experte sein. Da es React schon eine Weile gibt, gibt es viele gute Tutorials, Dokumentationen und Ressourcen, die Ihnen React beibringen. Ich empfehle daher, diese zuerst nachzuschlagen.

Diese Serie konzentriert sich auf das Erlernen der Javascript-, React- und JSX-Teile und befasst sich nicht mit Styling / CSS. Da das Ziel für Ihren Block drastisch anders sein kann, habe ich mich entschieden, mich nicht auf das Styling zu konzentrieren und nur sehr einfaches HTML bereitzustellen. Es liegt an Ihnen, Ihr Styling und die erforderliche HTML-Ausgabe hinzuzufügen, damit Ihr Block genau so gerendert wird, wie Sie es benötigen.

Das Alter dieses Tutorials

Und schließlich bedenken Sie bitte die Zeit, in der diese Serie geschrieben wurde. Gutenberg ist noch ziemlich neu, wird aber drastisch verändert und verbessert.

Wenn Sie dies in ferner Zukunft feststellen, wird möglicherweise Code veraltet oder durch bessere Methoden ersetzt. Dieser Leitfaden wurde in WordPress Version 5.2.3 (Ende des Jahres 2019) geschrieben und fertiggestellt.

Was Sie lernen werden

In den ersten Teilen konzentrieren wir uns auf die Grundlagen. Wir richten eine Entwicklungsumgebung mit laufender Kompilierung unseres Codes ein. Und die Grundlagen, wie man einen Block und die notwendigen PHP-Teile davon registriert. Wir lernen die riesige Bibliothek von Komponenten und Methoden kennen, die uns von WordPress Gutenberg zur Verfügung stehen.

Im Folgenden erfahren wir, wie Sie Abschnitte und Einstellungen für unseren Block in der Seitenleiste des Editors (Inspektor) hinzufügen und die Symbolleiste anpassen. Unterwegs werden wir viele verschiedene Eingabetypen ansprechen und wie man die Gutenberg-Komponente dafür verwendet. Und natürlich lernen wir, wie wir die gespeicherten Informationen speichern, aktualisieren und an unseren Block ausgeben – und wie das hinter den Kulissen funktioniert.

Am Ende betrachten wir fortgeschrittenere Dinge wie dynamische Blöcke und die Verwendung von PHP zum Rendern der Blockausgabe. Und schließlich, wie man Post-Abfragen im Editor durchführt – damit der Benutzer einen Post aus einer Liste zum Rendern auswählen kann.

Inhaltsverzeichnis

Unten finden Sie direkte Links zu jedem Teil der Serie.

  • Teil 1: Einrichten der Entwicklungsumgebung
    Im ersten Teil dieser Tutorial-Reihe zum Erstellen benutzerdefinierter Gutenberg-Blöcke müssen wir unsere Entwicklungsumgebung einrichten. Wir brauchen einen Ort, an dem wir unseren Code in ES6/ESNext-Syntax schreiben und unterwegs kompilieren können.

  • Teil 2: Registrieren eines Blocks
    In diesem Teil werden wir Javascript schreiben, um unseren benutzerdefinierten Block zu registrieren und zu konfigurieren. Am Ende registrieren wir das Skript bei PHP und führen den erforderlichen PHP-Code aus, damit WordPress es als neuen Block erkennt.

  • Teil 3: Props und WordPress-Komponenten
    Im vorherigen Schritt haben wir gelernt, wie man einen benutzerdefinierten Block sowohl in Javascript als auch in PHP registriert. In diesem Schritt lernen wir, wie man die Komponenten von WordPress verwendet, um verschiedene Arten von Feldern und Einstellungen hinzuzufügen.

  • Teil 4: Attribute
    In diesem Teil sehen wir uns an, wie Attribute definiert, ihre Werte abgerufen und aktualisiert werden. Mit Attributen können wir Eingaben vom Editor akzeptieren, speichern und nach Belieben ausgeben.

  • Teil 5: Hinzufügen von Inspector-Einstellungen
    In diesem Schritt konzentrieren wir uns auf das, was WordPress (zumindest im Code) Inspector nennt – die Seitenleiste auf der rechten Seite im Editor. Wir werden einige neue Komponenten ansprechen, die sinnvollerweise in der Seitenleiste platziert werden können, und wie man damit umgeht.

  • Teil 6: Symbolleisten hinzufügen
    In diesem Beitrag lernen wir, wie man die Symbolleisten von WordPress zu unserem Block hinzufügt, dh für Ausrichtung und Blockausrichtung. Wir werden auch lernen, unsere eigenen Symbolleisten mit unseren eigenen Schaltflächen für benutzerdefinierte Aktionen hinzuzufügen.

  • Teil 7: Erstellen Ihrer eigenen Komponenten
    Bisher haben wir in dieser Tutorial-Serie den gesamten Code innerhalbregisterBlockType()dereditFunktion von geschrieben. Es ist durchaus möglich und wird oft empfohlen, die Bearbeitung stattdessen einer separaten Komponente zuzuweisen. Auf diese Weise können wir Funktionen wie Komponentenzustand und Lebenszyklusmethoden nutzen.

  • Teil 8: Übersetzung Ihres Blocks
    In diesem Teil konzentrieren wir uns darauf, wie Sie die Texte und Werte in unserem Block übersetzen. Wir verwenden WP-CLI, um die erforderlichen Dateien zu generieren, damit Gutenberg unsere Übersetzungen laden kann, wenn die WordPress-Sprache gewechselt wird.

  • Teil 9: Dynamische Blöcke
    Bisher haben wir die Ausgabe des Blocks in Javascript gerendert. Bei dynamischen Inhalten wie aktuellen Posts oder dem Anzeigen eines Posts kann es jedoch erforderlich sein, dass wir die Ausgabe des Blocks in PHP rendern.

  • Teil 10: Abrufen von Posts und Komponenten höherer Ordnung
    Im letzten Teil lernen wir, wie man Komponenten höherer Ordnung verwendet und wie man eine Post-Abfrage aus dem Editor heraus durchführt und eine Methode zur Auswahl von Posts bereitstellt.

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