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. In dieser Serie zeige ich Ihnen, wie Sie mit der Block-API arbeiten und Ihre eigenen Inhaltsblöcke erstellen, mit denen Sie Ihre Posts und Seiten erstellen können.
Im ersten Beitrag dieser Serie hatten wir einen Überblick über die Block-API und erstellten einen einfachen Block zum Testen. Wir werden uns die Block-API in Kürze genauer ansehen, aber zuerst den Standardblock, den wir im vorherigen Beitrag erstellt haben, bearbeiten, um ein Gefühl dafür zu bekommen, wie einfach Änderungen an einem vorhandenen Block vorgenommen werden können.
Wenn Sie sich erinnern, wird unser benutzerdefinierter Block auf der Vorder- und Rückseite unterschiedlich dargestellt, um zu zeigen, dass Sie die vollständige Kontrolle darüber haben, wie der Block im Editor dargestellt wird und wie Besucher der Site den Block sehen.
Wenn Sie mitverfolgt haben, öffnen Sie die / wp-content / plugins / my-custom-block / src / block Ordner, in dem sich der Blockquellcode befindet. Dieser Ordner enthält eine JavaScript-Datei und zwei Sass-Dateien, die das Verhalten des Blocks und seine Darstellung im Editor und im Frontend steuern.
Das block.js Die JavaScript-Datei enthält JSX, das während des Erstellungsprozesses in gültiges JavaScript umgewandelt wird. Ebenso werden die beiden Sass-Dateien in Standard-CSS konvertiert.
Während des Erstellungsprozesses müssen diese Dateien verarbeitet werden, um die Verteilungsdateien im Plugin zu erstellen dist / Mappe. Dies sind die eigentlichen Dateien, die von WordPress in die Warteschlange gestellt wurden, da sie gültiges JavaScript und CSS enthalten, die von allen Browsern verstanden werden können.
Zum Glück die Create-guten-Block Das Toolkit kümmert sich um das Erstellen und Durchsuchen von Dateien, indem es auf Änderungen an unseren Blockdateien achtet. Dies ist eine wirklich schöne Funktion, da wir uns weniger Sorgen machen müssen. Wir können uns nur darauf konzentrieren, unseren Blockcode (und unsere Stile) zu schreiben, und die Plugin-Dateien werden alle automatisch aktualisiert. nett!
Stellen Sie einfach sicher, dass Sie das ausführen npm starten Befehl aus dem Plugin-Stammordner, um die Dateiüberwachung auszulösen.
Machen Sie sich keine Sorgen über die Details des JSX-Codes in block.js gerade noch, da wir das später ausführlich behandeln werden. Im Moment wollen wir uns auf einige einfache Änderungen an der Blockausgabe für die Vorder- und Rückansicht konzentrieren.
Aufmachen block.js, finde das bearbeiten Methode für das Objekt, an das das zweite Argument übergeben wird registerBlockType (), und ersetze es durch folgendes:
edit: Funktion (Requisiten) Zurück (); ,Editoransicht
Dies ist unser benutzerdefinierter Block im Editor.
Fügen wir eine ungeordnete Liste hinzu!
- Apfel
- Orange
- Birne
- Pflaume
Diese Methode steuert, wie der Block im Editorfenster dargestellt wird. Jetzt finde die sparen Methode und ersetzen Sie es mit:
speichern: Funktion (Requisiten) Zurück (); ,Frontend-Ansicht
Dies ist unser benutzerdefinierter Block für Besucher der Website.
Fügen wir eine geordnete Liste hinzu!
- rot
- Blau
- Rosa
- Braun
Diese Methode wird verwendet, um die Blockausgabe im Frontend zu rendern.
Im style.scss, Ersetzen Sie alle Stile durch:
.wp-block-cgb-block-my-custom-block background: # a7d9f1; Farbe: #ffffff; Grenze: 1px fest # 62afd4; Grenzradius: 15px; Marge: 0 auto; Max-Breite: 740px; Polsterung: 1.5rem; ol, ul margin-left: 20px! wichtig; li margin-bottom: 0; h3 color: #ffffff; Rand oben: 0;
Dann in editor.scss, Ersetzen Sie alle Stile durch:
.wp-block-cgb-block-my-custom-block background: # cba7f1; Grenze: 1px fest # a170d6;
In den folgenden Screenshots sehen Sie, wie sich diese Änderungen auf das Rendering unseres Blocks auswirken, je nachdem, ob wir ihn im Editorfenster oder im Frontend anzeigen.
Enqueueing-Block-Skripts werden wir noch nicht behandeln, aber es reicht für den Moment, das zu wissen editor.scss Stile werden nur auf das Editorfenster und angewendet style.scsswird hinzugefügt beide das Editorfenster und das Frontend. Daher können Stile, die sowohl im Editor als auch im Frontend verwendet werden, weggelassen werden style.scss.
Beachten Sie, wie in den Sass-Dateien ein langer CSS-Selektor referenziert wird, um auf unsere Blockelemente zu zielen.
.WP-Block-CGB-Block-My-Custom-Block
Diese Klasse wird von Gutenberg automatisch zum Blockcontainerelement im Frontend hinzugefügt. Sie müssen sie jedoch manuell im Editorfenster anwenden, um dieselbe Klasse zu erhalten, wie Sie im sehen können bearbeiten Methode unten.
Der von Gutenberg generierte Klassenname wird wie folgt festgelegt: wp-block- [block namespace] - [blockname.
In unserem Fall haben wir die verwendet Create-guten-Block Toolkit zum Erstellen unseres Blocks, der verwendet wird cgb standardmäßig für den Namespace und Block-My-Custom-Block basiert auf dem von uns angegebenen Blocknamen. Daraus ergibt sich der Name der CSS-Klasse WP-Block-CGB-Block-My-Custom-Block zu dem Blockcontainer hinzugefügt. Der Namensraum und der Blockname werden von Gutenberg intern verwendet, um Blöcke eindeutig zu identifizieren.
Als ich dort Änderungen an Blockdateien durchführte, fand ich einige erwähnenswerte Schmerzpunkte.
Erstens, wenn Sie Änderungen an der bearbeiten So musste ich vor der Aktualisierung des Editorfensters den Browsercache löschen, um die neuesten Änderungen anzuzeigen. Das passierte nicht immer, aber es war oft der Fall. Wenn Sie feststellen, dass dasselbe passiert, löschen Sie einfach Ihren Browser-Cache und versuchen Sie es erneut.
Zweitens beim Bearbeiten des Inhalts des sparen Methode scheint etwas seltsames mit dem Editor-Fenster zu passieren, wenn es das nächste Mal aktualisiert wird.
Um dies zu demonstrieren, habe ich ein neues Listenelement hinzugefügt (sparen Methode und dann den Post-Editor aktualisiert (nachdem der Cache natürlich wieder gelöscht wurde!). Hier ist das Ergebnis:
Wenn du dich dafür entscheidest In Blöcke konvertieren oder Als HTML bearbeiten dann werden sie mit dem inhalt des angezeigt sparen Methode, die im Frontend und nicht im Editor betrachtet werden soll.
Dies ist sehr verwirrend, und der einzige offensichtliche Weg, um die Dinge wieder normal zu machen, bestand darin, den Block aus dem Editorfenster zu löschen und ihn erneut einzufügen. Wie ich bereits im letzten Beitrag erwähnt habe, ist Gutenberg noch in Arbeit, und das ist ein gutes Beispiel dafür!
Hoffentlich wird dies in zukünftigen Versionen intuitiver, aber im Moment ist es nur etwas, worauf Sie achten sollten. Bei Änderungen am sparen Funktion, bereiten Sie sich darauf vor, die zugehörigen Blöcke im Editorfenster zu löschen und erneut hinzuzufügen.
Wie bereits erwähnt, erfolgt die Ausgabe vom sparen und bearbeiten Methoden können völlig unterschiedlich sein. In den meisten Fällen möchten Sie jedoch wahrscheinlich, dass die Front-End-Ausgabe mit der Editor-Ausgabe übereinstimmt, damit die Bearbeitungserfahrung beim Front-End-Rendering so konsistent wie möglich ist.
In unserem oben beschriebenen Beispiel habe ich zu Demonstrationszwecken nur unterschiedliche Inhalte und Stile im Editor und in der Front-End-Ansicht hinzugefügt.
Die Block-API besteht aus einer Reihe von JavaScript-Objekten, die zum globalen Objekt hinzugefügt werden wp Admin-Objekt Und weil wp ist global, wir müssen ihn nicht speziell in unseren Quellcode importieren - er ist auf Anfrage verfügbar.
Die verfügbaren Objekte in wp hängen Sie von der gerade angezeigten Admin-Seite ab. Zum Beispiel, wenn Sie Ihre Site anpassen wp enthält das Hauptanpassungs-API-Objekt.
Derzeit ist die Gutenberg-Block-API jedoch nur im Post-Editor verfügbar. Ich gehe davon aus, dass sich dies in Zukunft ändern wird, wenn sich die Integration zwischen dem Post-Editor und dem Site-Customizer näher rückt.
Sie können die Struktur von sehen wp indem Sie den Gutenberg-Editor öffnen und eintreten wp in der Browser-Konsole.
Wie du siehst, wp enthält viele Objekte, aber die, die uns am meisten interessieren, sind:
Accentsconagua
wp.elementswp.blöckeWP-Komponentenwp.datawp.i18nDiese Objekte geben Ihnen Zugriff auf alle Werkzeuge, die zum Erstellen sehr komplexer Blöcke erforderlich sind. Geben Sie die vollständigen Objektnamen in die Browserkonsole ein, um diese Objekte genauer zu untersuchen.
Zum Beispiel, wenn Sie eingeben wp.blöcke Wenn Sie das Objekt erweitern und erweitern möchten, wird eine der verfügbaren Funktionen angezeigt registerBlockType (). Dies ist eine sehr wichtige Funktion, die wir im nächsten Beitrag ausführlich behandeln werden
wp.elements ObjektDieses Objekt ist die Abstraktionsebene auf React (und ReactDom), die die React-Funktionalität auf vorhersagbare und konsistente Weise verfügbar macht. Dies gilt auch dann, wenn die zugrunde liegende Implementierung geändert oder vollständig geändert wird.
Solange die Schnittstelle gleich bleibt, sind Plugins, die mit der Block-API interagieren, in Zukunft nicht betroffen.
wp.blöcke ObjektDie Kernfunktion zum Erstellen eines Blocks (registerBlockType ()) ist in enthalten wp.blöcke zusammen mit anderen Funktionen, die für die allgemeine Blockverwaltung erforderlich sind, wie:
getBlockType ()getBlockContent ()getBlockAttributes ()hasBlockSupport ()isValidBlock ()Dieses Objekt enthält auch einen Satz wiederverwendbarer Blöcke, die Sie in Ihre eigenen Blöcke aufnehmen können, um Funktionalität ohne zusätzlichen Aufwand bereitzustellen. Diese sofort einsatzbereiten Blöcke können die Entwicklung von Blöcken dramatisch beschleunigen, und wir werden einige davon im nächsten Post verwenden, wenn wir weiter in die Blockerstellung einsteigen.
Einige der verfügbaren sind:
WP-Komponenten ObjektDas WP-Komponenten object enthält auch wiederverwendbare Komponenten, diese sind jedoch generischer und werden normalerweise verwendet, um zusätzliche Benutzeroberflächenelemente im Editorfenster zu erstellen, z. B. Bedienfelder für Blockeinstellungen.
Diese schließen ein:
wp.data ObjektDas Datenmodul verwaltet den Anwendungsstatus im Gutenberg-Editor, der das Speichern von Einstellungen für jeden Block beinhaltet. Im letzten Beitrag dieser Serie werden verschiedene Möglichkeiten zum Hinzufügen von Einstellungen zu einem Block beschrieben.
wp.data wird auf Redux implementiert. Wenn Gutenberg mit core zusammengeführt wird, haben wir nicht nur Zugriff auf React, sondern auch auf einen vollständigen zentralen, von Redux betriebenen Datenspeicher!
Plugins und Themes können PHP-Strings seit Jahren problemlos übersetzen, und eine ähnliche Methode ist auch für das Übersetzen von Strings in JavaScript dank der wp.i18n Objekt. Das bedeutet, dass alle in Ihrem Block enthaltenen Zeichenfolgen, einschließlich des Blocknamens, der Schlüsselwörter und der Labels, in jede Sprache übersetzt werden können.
Wenn Sie die Standard-Übersetzungsfunktionen von PHP bereits verwendet haben, werden Sie sich wie zu Hause fühlen, da der Prozess ziemlich gleich ist. Ich denke, das ist ein kluger Schachzug, da er Entwickler dazu anregen wird, String-Übersetzungen von Anfang an in ihren Blöcken zu ermöglichen.
In Ihrem Blockcode ist das Übersetzen einer Zeichenfolge so einfach wie:
wp.i18n .__ ('Diese Zeichenfolge kann übersetzt werden', 'Textdomain');In diesem Lernprogramm haben wir einen Basisblock implementiert und den Code bearbeitet. Wir haben auch gesehen, dass wir die vollständige Kontrolle über das Block-Rendering haben und im Editor andere Block-Views haben können als das Frontend.
Der Redakteur hat noch einige Probleme, die Sie von Zeit zu Zeit überraschen können. Dies erinnert daran, dass sich Gutenberg noch in der Entwicklung befindet und möglicherweise nicht für den Einsatz in Produktionsstätten geeignet ist.
Zum Schluss haben wir einen Überblick über die Block-API gegeben, die einige neue Objekte auf globaler Ebene einführt wp JavaScript-Objekt zum Erstellen und Verwalten von Blöcken.
Im nächsten Post werden wir das Tempo erhöhen und einen umfassenderen Block erstellen. Dazu erforschen wir die registerBlockType () Funktion in der Tiefe. Wir werden uns auch näher mit der korrekten Einreihung Ihrer Block-Skripte befassen.
