Die Grundlagen der Entwicklung für WordPress Gutenberg für Anfänger

Dieser Beitrag soll Ihnen helfen, die Schlüsselkonzepte für die Entwicklung des neuen Editors in WordPress zu verstehen; Gutenberg. Gutenberg ist zum Zeitpunkt des Schreibens noch ziemlich neu. Und wie bei allen neuen Technologien in der Geburtsphase fehlt es leider etwas an Dokumentation und Standards.

Die Dokumentationsseite von WordPress hat einen großen Abschnitt, der Gutenberg für Entwickler gewidmet ist; genannt das Gutenberg-Editor-Handbuch. Es enthält bereits einiges an Informationen. Aber es könnte ein bisschen verwirrend oder einschüchternd für jemanden sein, der mit Javascript-basierten Technologien ganz neu ist. Für PHP-fokussierte Entwickler, die vielleicht nur über grundlegende Javascript/jQuery-Kenntnisse verfügen, könnten die neuen Technologien von WordPress einschüchternd wirken. Aber glauben Sie mir, sobald Sie die Schlüsselkonzepte gelernt haben, werden Sie sehen, welche neuen Möglichkeiten Sie jetzt als WordPress-Entwickler haben.

Beginnen wir mit den absoluten Grundlagen. Welche Programmiersprache(n) und Tools müssten Sie verwenden oder lernen, um am besten für Gutenberg zu entwickeln?

Die Sprache und Bibliotheken, die Sie kennen müssen

Die kurze Antwort auf die Frage, welche Sprache Sie für die Entwicklung von Gutenberg verwenden müssen, lautet: Javascript. In der Welt von Javascript gibt es jedoch einige Konzepte, Erweiterungen und Tools, die Sie kennen sollten.

In erster Linie ist es eine Frage der Javascript-Version. Es gibt eine offizielle Standardisierung von Javascript; ECMAScript. ECMAScript 5 (oft mit ES5 abgekürzt) kam vor etwa 10 Jahren auf den Markt und ist die Javascript-Version, mit der die meisten von uns Entwicklern vertraut sind. Dann haben wir ECMAScript 6 (oft als ES6 abgekürzt ), das 2015 herauskam. Einige Leute bezeichnen diese Version als ES2015. Und schließlich gibt es noch ESNext, einen dynamischen Namen für die kommende Version, der Vorschläge enthält, von denen wir hoffen, dass sie in die nächste standardisierte Version von Javascript aufgenommen werden.

Sie denken vielleicht in die Richtung: „Also das ist alles gut und alles, neuere Versionen von Javascript bedeuten einfach mehr Funktionen. Also werde ich einfach die neueste verwenden." Aber es gibt eine sehr wichtige Sache, die Sie in Bezug auf Javascript-Versionen wissen müssen, und zwar diese: Die meisten Browser können heute nur ES5 verstehen.

Das bedeutet, dass Sie, wenn Sie Javascript in ES6 oder ESNext schreiben möchten, Tools einrichten müssen, die Ihren Code in ES5 umwandeln, damit Browser ihn verstehen können. Aber bevor Sie darüber nachdenken, das Erlernen von ES6 und ESNext ganz zu überspringen, denken Sie daran, dass ES5 10 Jahre alt ist. Und es erfordert, dass Sie viel mehr Code schreiben. Es wird auch viel weniger lesbar und komplexer sein, als wenn Sie es in ES6 oder ESNext schreiben würden.

Darüber hinaus wollen Sie für Gutenbergs Konzepte auch JSX verwenden – eine Syntaxerweiterung zu Javascript. JSX ist auch eine Sprache, die Browser nicht verstehen können, ohne sie zu transformieren.

Warum sich also mit ES6, ESNext oder JSX herumschlagen?

Wenn Sie immer noch nicht davon überzeugt sind, dass ES6/ESNext den zusätzlichen Schritt für die Transformation wert ist, lassen Sie mich Ihnen einen Codevergleich zeigen. Mit ES6 und JSX können Sie dies schreiben, um einen einfachen Absatz zurückzugeben; mit einer Klasse und dynamischer Ausgabe einer Variablen;

Für diejenigen unter Ihnen, die neu dabei sind und denken, ich hätte Zitate vergessen – nein, habe ich nicht. Das ist die Einfachheit von JSX. Vergleichen wir das Obige damit, wie Sie mit den Javascript-Bibliotheken von ES5 und WordPress schreiben würden:

return wp.element.createElement(
    'p',
    { className: 'example' },
    'Hello, my name is ' + name
);

Der gesamte obige Code ist erforderlich, um das, was ES6 und JSX können, in einer einzelnen, sehr einfach zu lesenden Zeile auszugeben! Stellen Sie sich vor, eine komplexere Benutzeroberfläche mit Ereignissen und Bedingungen zu erstellen, wenn nur ein einfacher Absatz dieses umständliche Stück Code erfordert.

Überzeugt? Gut!

Transformationstools und React JS

Das gebräuchlichste und von WordPress verwendete Tool zum Transformieren von ES6/ESNext ist Babel. Normalerweise verwenden Sie Babel als Plugin für Webpack, ein Tool, das Ihre Javascript-Dateien bündelt und minimiert. Beide Tools verwenden Node.js, wodurch Sie einige Tools zum Ausführen von Skripten für Webpack und Babel in der Befehlszeile erhalten. Wenn das alles verwirrend klingt, habe ich einen Beitrag, der ausführlich erklärt, wie man all diese Tools für die Gutenberg- Entwicklung einrichtet.

Das zweite, was Sie in Bezug auf Technologien wissen müssen, ist, dass Gutenberg auf einer Abstraktionsschicht auf React JS basiert. React JS ist eine Open-Source-JavaScript-Bibliothek, die von Facebook gepflegt und um das Jahr 2013 herum veröffentlicht wurde. Da es React schon eine Weile gibt, gibt es viele Tutorials, Anleitungen und Dokumentationen für diese Bibliothek. Die offizielle Website von React hat ein gutes, detailliertes Tutorial für Sie, die neu bei React sind. Sie müssen definitiv kein React-Experte sein, um für Gutenberg zu entwickeln, aber die Grundlagen, wie es mit Komponenten und Zuständen funktioniert, werden Ihnen sehr helfen, Gutenberg zu verstehen.

Schlussfolgern:

• Das Lernen von React JS wird einen großen Beitrag dazu leisten, zu verstehen, wie man sich für Gutenberg entwickelt. Vor allem, wenn Sie Ihre eigenen benutzerdefinierten Blöcke erstellen oder die vorhandenen anpassen möchten.
• Sie können erstellen, indem Sie nur ES5 Javascript verwenden, aber es wird definitiv empfohlen, ES6, ESNext und JSX zu lernen .
• Machen Sie sich mit den erforderlichen Tools vertraut, damit Sie Ihren ES6-/ESNext-/JSX-Code transformieren können. Diese Tools sind npm, Webpack und Babel.

Die neue Art, Post-Content zu speichern, und warum

Einer der größten Vorteile von Gutenberg ist die Abkehr von festem HTML in Post-Inhalten. WordPress, vor Gutenberg, und die meisten webbasierten CMS speichern Artikelinhalte in reinem HTML. Bei einfachen Inhalten (Titel und Absätze) ist dies in der Regel kein Problem. Bei komplexeren und dynamischeren Inhalten könnte dies jedoch ein größeres Problem darstellen.

Jedes CMS, das dynamische Inhalte innerhalb von Artikelinhalten zulässt, wird auf Probleme stoßen, wenn es darum geht, dies als gültiges HTML zu speichern. Dies kann alles sein, von einem Bild, das auf seine ID innerhalb des Systems verweist, anstatt auf die vollständige URL. Oder ein Widget, das die neuesten Beiträge innerhalb einer bestimmten Kategorie dynamisch anzeigt. Normalerweise wird dies gelöst, indem benutzerdefiniertes kryptisches HTML ausgegeben wird, dessen normale Ausgabe keinen Sinn macht. Und dann lassen Sie den CMS-Parser diese HTML-Teile in etwas Sinnvolles oder Dynamisches umwandeln. Der Nachteil dabei ist, dass wenn Sie Ihre Inhalte in ein anderes CMS übertragen, dies oft zu hässlichem HTML führt. Der Inhalt würde mit nicht geparstem HTML gefüllt, das Sie manuell bereinigen müssen. Dieses Problem will Gutenberg lösen.

Bei Gutenberg hat sich WordPress dafür entschieden, zusätzliche und dynamische Informationen als HTML-Kommentare zu speichern. HTML-Kommentare sind für Benutzer auf der Website niemals sichtbar, und im Kommentarblock ist grundsätzlich alles erlaubt. Ein HTML-Kommentar beginnt <!--und endet mit -->, und Gutenberg speichert Daten in einer bestimmten Struktur im JSON-Format. Jeder Block in Gutenberg wird von einem beginnenden HTML-Kommentar und einem abschließenden HTML-Kommentar danach umschlossen.

Die neue Art und Weise, wie Post-Inhalte gespeichert werden

Ich werde nicht näher darauf eingehen, wie die Kommentarblöcke aufgebaut sind – eine ausführliche Anleitung dazu finden Sie im WordPress Editor Handbuch. Aber als Beispiel wird ein einfacher Absatz im Inhalt eines Gutenberg-Beitrags in der Datenbank gespeichert als:

Bei dynamischen Inhalten wird normalerweise überhaupt kein HTML ausgegeben. Alle Informationen, die WordPress benötigt, um zu verstehen, was dieser Block tut, befinden sich in HTML-Kommentaren. So speichert Gutenberg einen Block mit „Neuesten Beiträgen”:

Da alles ein HTML-Kommentar ist, stellt das Übertragen Ihrer Beiträge in ein anderes WordPress ohne Gutenberg oder ein anderes CMS sicher, dass kein hässliches, nicht geparstes HTML ausgespuckt wird. Es wird einfach ignoriert und übersprungen.

Wie Sie wahrscheinlich bereits herausgefunden haben, beginnen die Kommentarblöcke mit dem Namen des Blocks, dem ein „ wp” vorangestellt ist. Wenn es benutzerdefinierte Einstellungen gibt, werden diese nach dem Namen in JSON ausgegeben, wie Sie am Beispiel des Blocks "Letzte Beiträge" sehen können. Gutenberg bezeichnet diese als Attribute, und dieses Konzept ist etwas, mit dem Sie sehr vertraut werden, wenn Sie anfangen zu lernen, für Gutenberg zu entwickeln.

Gut zu wissen: Wenn Sie genauer wissen möchten, wie die neuen Post-Inhalte gespeichert werden, können Sie in Ihrer Tabelle in Ihrer Datenbank
nachsehen. wp_postsEs gibt eine weitere einfachere Methode, um den vollständigen Datenbankwert innerhalb von WordPress-Vorlagen anzuzeigen. Verwenden Sie in Ihrer einzelnen Vorlage innerhalb der Schleife einfach „ echo get_the_content()“. Die Verwendung des normalen „ the_content()” gibt den geparsten Beitragsinhalt aus, aber das Echo des Inhaltswerts gibt genau das aus, was in der Datenbank gespeichert ist. Sie können das Inspect-Tool verwenden oder die Quelle in Chrome oder Firefox anzeigen, um die Kommentarblöcke anzuzeigen.

Was Sie als Entwickler in Gutenberg tun können

Sie haben ein paar Möglichkeiten, wie Sie Ihre Themen oder Plugins für Gutenberg anpassen können. Nachfolgend sind die häufigsten Anpassungen aufgeführt, die Sie wahrscheinlich als Entwickler vornehmen würden.

Bestehende Blöcke erweitern und anpassen

WordPress Gutenberg wird mit einem großen Bündel von Blocktypen geliefert, und Sie können jeden davon erweitern. Sie können auch einige von ihnen entfernen oder in bestimmten Fällen entscheiden, nur einige von ihnen zuzulassen oder zu entfernen.

Die gebräuchlichste Methode zum Erweitern eines Blocks ist das Hinzufügen benutzerdefinierter Blockstile – das sind Stilvariationen eines Blocks. Blockstile sind im Standard-WordPress nicht so verbreitet, aber es gibt einige. Sehen Sie sich den Quote-Block an. Im Gutenberg-Editor haben Sie in der rechten Seitenleiste ein Feld namens „Stile”.

Eine weitere Möglichkeit, vorhandene Blöcke anzupassen, ist die Verwendung von Filtern. Sie kennen wahrscheinlich Filter mit PHP in WordPress, aber mit Gutenberg gibt es jetzt Javascript-basierte Filter auf Blöcken. Sie können beispielsweise Ihre eigenen benutzerdefinierten Attribute (Einstellungen) zu allen oder bestimmten Arten von Blöcken hinzufügen oder filtern, wie sie gespeichert oder ausgegeben werden.

Sie können auch die Sperrkategorien manipulieren sowie bestimmte Sperren in bestimmten Situationen entfernen oder zulassen. Oder Sie können beispielsweise sicherstellen, dass für einen benutzerdefinierten Beitragstyp nur eine Handvoll Blocktypen zulässig sind.

Erstellen Sie Ihre eigenen benutzerdefinierten Blöcke

Das Erstellen benutzerdefinierter Blöcke ist vielleicht der erste Gedanke, den die meisten WordPress-Entwickler haben. Die Standardblöcke in WordPress können einen langen Weg zurücklegen, aber wenn Sie ein komplexeres Thema oder Plugin erstellen, haben Sie wahrscheinlich spezielle Anforderungen. Verwenden Sie zum Beispiel Gutenberg, um eine gut aussehende Startseite mit Verknüpfungen zu Inhalten und dynamischen Inhalten zu erstellen. Es ist möglich, die meisten Anpassungen zu erreichen, indem die CSS-Klassenoption verwendet wird, die für alle Blöcke vorhanden ist. Das ist aber nicht besonders benutzerfreundlich.

Das Schreiben eigener benutzerdefinierter Blöcke ist wahrscheinlich das Schwierigste beim Anpassen Ihres Designs oder Plugins für Gutenberg. Aber es kann auch das lohnendste sein! Sie werden nicht nur in der Lage sein, Blöcke zu erstellen, die genau so aussehen und aussehen, wie Sie es möchten – es ist auch eine großartige Möglichkeit, schnell etwas über die neue Javascript-basierte Technologie zu lernen.

Stellen Sie sicher, dass Ihr Thema Gutenberg-fähig ist

Wenn Sie ein WordPress-Theme-Entwickler sind, sollten Sie sich darüber im Klaren sein, dass Ihr Theme für Gutenberg möglicherweise eine Menge Setup benötigt, insbesondere in Form von add_theme_support(). Das WordPress-Handbuch bietet einen guten Überblick über alle Themenunterstützungen, die Sie berücksichtigen müssen, um Ihr Thema Gutenberg-fähig zu machen.

Standardmäßig übernimmt WordPress das meiste Styling der Standardblöcke selbst, sodass Sie sich nicht zu viele Gedanken über das Styling dieser Blöcke in Ihrem Design machen müssen. Aber Theme-Entwickler sind in der Regel wählerischer in Bezug auf Design und Styling. Sie müssen also wahrscheinlich das Block-Styling anpassen oder ergänzen. Sie können Editor-Stile nur zum Frontend, nur zum Editor oder zu beiden hinzufügen. Das WordPress Gutenberg-Handbuch bietet einen Überblick über Editor-Stile und die Standard-Blockstile.

Es gibt auch ein Konzept von Blockvorlagen, in denen Sie vordefinieren können, welche Blöcke in Beiträgen erscheinen sollen. Blockvorlagen können als Platzhalter verwendet werden, um dem Redakteur beim Ausfüllen von Blöcken zu helfen. Es kann aber auch verwendet werden, um einen festen Satz von Blöcken und Positionen zu definieren.

Und schließlich stehen Funktionen zur Verfügung, um mit dem Gutenberg-Parser zu arbeiten und Blöcke aus Beiträgen zu extrahieren. Da alle Inhalte mit vollständigen Informationen über die Art des Inhalts gespeichert werden, können Sie ganz einfach bestimmte Teile des Beitragsinhalts extrahieren. Ein gutes Beispiel ist das Extrahieren des ersten Absatzes von Beiträgen, der als Auszug angezeigt werden soll. Eine sehr nützliche PHP-Funktion für dieses Konzept ist [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(), die Gutenbergs Parser auf den bereitgestellten Post-Inhalt anwendet und im Gegenzug ein PHP-Array mit allen Blockinformationen und Inhalten erhält.

Fazit

Ich hoffe, dieser Beitrag hat Ihnen nicht nur etwas über die Entwicklung für Gutenberg beigebracht, sondern Sie auch neugierig und interessiert gemacht, mehr zu erfahren! Als PHP-fokussierter WordPress-Entwickler, der sich anfangs gegen die Idee gewehrt hat, auf Javascript-basierte Technologie umzusteigen, kann ich Ihnen sagen, dass Sie froh sein werden, wenn Sie einmal den Schritt gewagt haben, etwas über den „neuen Weg” zu lernen. Gutenberg eröffnet neue Möglichkeiten zum Anpassen, Gestalten und Anzeigen von WordPress-Inhalten, ohne dass Seitenersteller oder Themen mit umfangreichen Bibliotheken erforderlich sind, um flexible und gut aussehende Post-Inhalte zu ermöglichen. Wir müssen nur lernen, optimal damit umzugehen!