Gutenberg lernen: Was ist Gutenberg,  überhaupt?

Gutenberg ist die neue React-gesteuerte SPA-Bearbeitungserfahrung in WordPress. Oh halt, eine Aneinanderreihung von Schlagwörtern zählt nicht als brauchbare Erklärung für Software? Wir werden diese Aneinanderreihung von Schlagwörtern aufschlüsseln, während wir erklären, was Gutenberg ist.

Zuerst einmal könnte ein Vorher-Nachher-Screenshot die Idee für Sie verdeutlichen

Schlagwort Nr. 1: Bearbeitungserfahrung

Gutenberg ist ein Redesign des WordPress WYSIWYG-Editors.

Der Editor in WordPress war traditionell dieses eine WYSIWYG-Feld (der Blob an Inhalt), der den gesamten Inhalt des Beitrags in die Spalte post_content der Datenbanktabelle wp_posts speichert. Gutenberg ändert das nicht: Er speichert den gesamten Beitragsinhalt in der Tabelle post_content, um ihn durch Aufruf von the_content() in unseren PHP-Vorlagen abzurufen.

Also ja, Gutenberg ist nur ein Redesign des Editors… aber es ist eine Schande, Gutenberg nur als ein Redesign des Editors zu bezeichnen! Es ist so viel mehr als das!

Gutenberg führt eine völlig neue Denkweise über Inhalte in WordPress ein. Es gibt Entwicklern nicht nur eine native Möglichkeit, Inhalte in Blöcken zu verarbeiten (wir werden sie tatsächlich als Blöcke bezeichnen, was ihr offizieller Name ist), sondern es ermöglicht Endbenutzern, reichhaltige, dynamische Seitenlayouts mit WordPress out of the box zu erstellen. Ohne Gutenberg würde dies wahrscheinlich eine Menge von Drittanbieter-Plugins erfordern (lesen Sie: Shortcode-Gewürge und Serverbelastung), wie es derzeit bei dem der Fall ist, was als WordPress "Classic" Editor bekannt sein wird.

Für die Zwecke dieses Artikels und unseres Lernens gilt: Gutenberg ändert nicht, wie WordPress im Kern funktioniert. Es ist zu 99 % eine Änderung der Benutzeroberfläche des Editors. Wenn Sie auf "Veröffentlichen" klicken, wird der Inhalt immer noch in post_content gespeichert – es gibt nur viel mehr Möglichkeiten, das Benutzererlebnis beim Schreiben und Bearbeiten von Inhalten zu gestalten.

Schlagwort Nr. 2: SPA

Übersetzung: Gutenberg ist eine Single Page Application innerhalb von WordPress.

In einer Single Page Application (SPA) läuft eine Anwendung nach einem einzigen Seitenaufruf, und nachfolgende Interaktionen werden zu 100 % durch JavaScript und Ajax-Anfragen gesteuert.

Beachten Sie den Teil „innerhalb von WordPress“ der obigen Aussage – Gutenberg beeinflusst (derzeit) keinen Teil von WordPress über den Bereich hinaus, in dem man normalerweise den Editor sehen würde. Im Wesentlichen ersetzt Gutenberg den WYSIWYG-Editor TinyMCE durch eine SPA.

Das bedeutet, dass das Schreiben von Inhalten in Gutenberg schnell und befriedigend ist, und ich wünschte, ich könnte sagen, dass meine (begrenzte) Erfahrung mit der Entwicklung von Blöcken die gleiche war. Für unsere Reise bedeutet dieses SPA-Geschäft langsame Seitenladezeiten während der Entwicklung (wir laden viel JavaScript), obskure und frustrierende Konsolenfehler und tagelang npm-Module.

Natürlich ist das eine Glas-halb-leer-Betrachtung der Situation. Glas halb voll? Es fühlt sich wirklich gut an, wenn etwas funktioniert. Die Erfolge sind am Anfang selten und weit verstreut, aber bleiben Sie dran!

Schlagwort Nr. 3: React-gesteuert

Übersetzung: Ja, Gutenberg ist in React gebaut. Das wird sich wahrscheinlich so schnell nicht ändern, wenn überhaupt.

Im September/Oktober 2017 gab es etwas #heißesDrama um die Wahl eines Frameworks für WordPress, da Facebook eine Patentklausel zu React hinzugefügt hat. Aber nach erheblichem Gegenwind von Open-Source-Communities, einschließlich WordPress (das, äh, ~30 % der Websites antreibt), hat Facebook es zurückgeändert.

Stand Januar dieses Jahres (2018) gab es immer noch Gerüchte, dass eine Framework-Entscheidung für den Kern noch aussteht, aber bis wir offizielle Nachrichten von den Entscheidungsträgern erhalten, betrachten wir die Fakten.

• Gutenberg ist in aktiver Entwicklung.
• Themes und Plugins sind in aktiver Entwicklung und bereiten sich auf Gutenberg vor.
• All das geschieht in React.

Ich setze mein Geld auf React, und wenn sich das ändert, großartig! Ich werde React in meinem Lebenslauf haben und lernen, was auch immer sein Ersatz sein mag.

Wichtige Ressourcen

1. Das GitHub-Repo – Dies dient hauptsächlich dazu, Issues bei der Entwicklung zu suchen, um zu sehen, ob sie bereits gemeldet wurden.
2. Das Gutenberg-Handbuch – Hier lebt die offizielle Gutenberg-Dokumentation.

Vorsicht!

Während das Gutenberg-Projekt so weit fortgeschritten ist, dass es keine größeren infrastrukturellen Änderungen mehr geben wird, müssen wir bedenken, dass Gutenberg eine brandneue Software in aktiver Entwicklung ist und alles passieren kann. Warum nicht an vorderster Front dabei sein? Das ist aufregend.

Die WordPress-Community hat bereits begonnen, die Aufgabe der Erstellung von Tools, Tutorials, Fallstudien, Kursen und von der Community beigesteuerten Ressourcen zu übernehmen.

Das heißt, Sie könnten nach einer Frage suchen, die noch nie zuvor gestellt wurde. Irgendwann werden Sie wahrscheinlich den Quellcode von Gutenberg zur Dokumentation lesen, und Sie könnten feststellen, dass die vorhandene Dokumentation veraltet ist. Sie könnten ein Beispiel aus einem zwei Wochen alten Tutorial ausprobieren, nur um festzustellen, dass es eine veraltete API-Methode verwendet.

Wenn Sie auf etwas stoßen, von dem Sie glauben, dass es nicht so ist, wie es sein sollte, recherchieren Sie und melden Sie das Problem auf GitHub, fragen Sie im #core-editor-Kanal des WordPress Slack danach oder benachrichtigen Sie den Autor des oben genannten veralteten Blogbeitrags. Und wenn es sich um Dokumentation handelt, können Sie sie immer selbst korrigieren!

Einrichtung

Nun möchte ich, dass Sie eine Entwicklungsumgebung einrichten, damit wir diese Diskussion mit mehr Kontext fortsetzen können. Machen Sie Folgendes:

1. Richten Sie eine lokale WordPress-Installation ein, wie auch immer Sie dies tun möchten – es kann ein bestehendes Projekt oder eine frische Installation sein. Nur etwas, das zu Demozwecken sehr kaputt sein kann.
2. Aktivieren Sie ein relativ einfaches Theme. Twenty Seventeen funktioniert gut. Das Einzige, was Ihr Theme haben muss, ist ein Aufruf zu the_content(); in seinen Beitrags- und Seitenvorlagen, und die meisten Out-of-the-box-Themes haben das.
3. Installieren Sie Gutenberg. Sie finden es im Plugin-Repository. Diese Version ist recht weit fortgeschritten und wird regelmäßig aktualisiert, sodass wir uns keine Sorgen machen müssen, von einer Entwicklungsversion aus zu arbeiten.
4. Aktivieren Sie das Gutenberg-Plugin und erstellen Sie einen neuen Beitrag.

Wenn Sie noch nie eine WordPress-Site lokal ausgeführt haben, sehen Sie sich diese Anleitung an. Wir empfehlen dringend, etwas wie MAMP, XAMPP oder ähnliches herunterzuladen, wenn dies Ihre erste Erfahrung ist.

Lasst uns erkunden

Sie sollten etwas Ähnliches wie das hier haben

Wie im obigen Bild zeigt die Eingabe eines / eine Liste von Blöcken. Löschen Sie dieses / und auf der rechten Seite sollten Sie ein + sehen, das nach dem Klicken eine weitere Liste von Blöcken anzeigt, organisiert nach Kategorien.

Beachten Sie die Leiste auf der rechten Seite mit Tabs für "Dokument" und "Block". Der Tab "Block" ist bekannt als Block-Inspektor und bietet uns einen schönen Bereich für blockspezifische Optionen, wie hier für den Absatzblock.

Ich empfehle Ihnen, ein paar Minuten mit Ihrem Beitrag herumzuspielen und die verschiedenen Blocktypen auszuprobieren. Behalten Sie die Seitenleiste des Inspektors im Auge, um zu sehen, welche Anpassungsoptionen jeder Block bietet. All diese Blöcke, die Sie jetzt sehen, sind in einer Bibliothek von Kernblöcken enthalten und können als Referenzpunkt für die Erstellung benutzerdefinierter Blöcke (was wir im nächsten Teil dieser Serie tun werden!) dienen.

Nachdem Sie einen Beitrag mit etwa fünf Blöcken unterschiedlicher Art erstellt haben, speichern und veröffentlichen Sie den Beitrag und betrachten Sie ihn dann von der Frontend-Seite. Schön!

Nun wollen wir etwas Verrücktes tun. Deaktivieren Sie Gutenberg auf der Plugin-Seite. Gehen Sie zurück zum Bearbeitungsbildschirm dieses Beitrags, und Sie sollten etwas Ähnliches wie hier im "Classic"-Editor sehen:

Was sind all diese Kommentare? Das sind Blöcke! Sie entsprechen eins zu eins den Blöcken, die Sie bei der Erstellung des Beitrags ausgewählt haben.

Unter der Haube sind Blöcke HTML-Schnipsel, die durch ihre umgebenden HTML-Kommentare identifiziert werden. Im obigen Beispiel werden Sie feststellen, dass einige der Blocknamen, z. B. wp:block-name, von JSON begleitet werden, wie z. B. der zweite Absatzblock. Als ich einige Anpassungsoptionen im Block-Inspektor festlegte, wurden diese zusammen mit der Block-ID gespeichert, sodass, wenn ich Gutenberg wieder aktiviere, meine Einstellungen nicht verloren gehen; sie sind direkt neben der Blockdefinition selbst gespeichert.

Bevor Sie das Plugin wieder aktivieren, betrachten Sie den Beitrag jedoch erneut von der Frontend-Seite aus. Haben Sie etwas Styling verloren? Ich habe.

Aktivieren Sie das Gutenberg-Plugin wieder und überprüfen Sie den Editor, um sicherzustellen, dass Ihre Blöcke noch intakt sind. Dank dieser HTML-Kommentare sollten sie das!

Nun wollen wir uns ansehen, woher diese Styles kommen. Wenn ich meinen Absatzblock von der Frontend-Seite inspiziere, sehe ich einige Inline-Styles – ein Ergebnis der im Block-Inspektor ausgewählten Optionen – sowie einige Struktur-Styles von etwas, das wie eine style.css-Datei aussieht, die vom Gutenberg-Plugin enqueued wird (nachdem 5.0 veröffentlicht wurde, denken Sie daran, dies wird nur von WordPress und nicht von einem Plugin sein).

Versuchen Sie nun, diesen Absatzblock aus der Editor-Ansicht zu inspizieren. Sie sollten die gleiche Reihe von Inline-Styles und denselben p.has-background-Selektor sehen, der im Editor-Modus auf den Block angewendet wird. Interessant!

Dies führt die Tatsache ein, dass Blöcke gemeinsame Styles zwischen dem Frontend des Themes und dem Editor haben können. Vor Gutenberg hatten wir Theme- oder Frontend-Styles, und wir konnten separat eine editor-style.css enqueuen, um dem WordPress-Adminbereich CSS hinzuzufügen. Jetzt jedoch teilen unsere Blöcke so gut wie standardmäßig Styles zwischen dem Frontend und der Editor-Ansicht.

Glas-halb-voll-Perspektive: Dies ermöglicht es uns, eine Inhaltsansicht für Publisher zu erstellen, die viel näher daran ist, was sie auf dem Frontend sehen werden. Sie müssen nicht mehr ein Dutzend oder mehr Mal auf die Vorschau-Schaltfläche klicken, um kleine Inhaltsänderungen anzuzeigen, bevor sie veröffentlicht werden.

Glas-halb-leer-Perspektive: Dies könnte für uns mehr Arbeit bedeuten – als Designer und Entwickler haben wir jetzt eine Editor-Erfahrung, die wir zusätzlich zur Website für Endnutzer erstellen müssen! Und wir müssen herausfinden, welche Styles zwischen beiden geteilt werden. Ich würde jedoch argumentieren, dass dies mit einem gut durchdachten Design und einer durchdachten Frontend-Strategie kein so großes Problem sein wird, wie man denken könnte.

Ähm… Wo ist das JavaScript?

Wir werden JavaScript benötigen, um einen Block in Gutenberg zu erstellen. Also machen wir schon mal einen Block! Das ist der Schwerpunkt des nächsten Beitrags dieser Reihe.