How-To

WordPress 5.0: Das hat der neue Editor „Gutenberg“ zu bieten

Das WordPress-Logo. (Foto: 360b / Shutterstock.com)

Die kreative Ausgestaltung von Beiträgen und ­Seiten ist mit dem neuen WordPress-Editor auch ohne ­Programmierkenntnisse möglich. Wir zeigen, wie ­Entwickler und Blogger für „Gutenberg“ einen eigenen Inhaltsblock erstellen können.

Für die WordPress-Gemeinde ist es eine kleine ­Revolution: ­Bisher verfügte das quelloffene Content-Management-System (CMS) über ein einzelnes Editorfeld und konnte nur über Plugins oder Kenntnisse in HTML und CSS für komplexere Inhaltslayouts genutzt werden. Mit WordPress 5.0 hat sich das geändert, da die Version einen neuen Editor im Gepäck hat, der unter dem Codenamen „Gutenberg“ bekannt ist – benannt nach dem Erfinder des Buchdrucks, Johannes Gutenberg. Damit wird es Nutzern des CMS möglich, Inhalte aus einzelnen Inhaltsblöcken zu erstellen.

Es gibt beispielsweise statische Blöcke wie Überschriften, ­Absätze, Bilder und Tabellen. Darüber hinaus sind auch dyna­mische Blöcke möglich, um zum Beispiel eine ­Liste der letzten Beiträge anzuzeigen. Auf diese Weise lassen sich mit dem neuen Editor auch vergleichsweise komplexe Inhaltslayouts für Beiträge und auch ganze Seiten erstellen. Eine Bearbeitung mit
Shortcodes oder in der HTML-Ansicht ist dafür nicht mehr ­notwendig – sofern das gewählte Theme die neue Funktion unterstützt.

Neben den vielen neuen Möglichkeiten bedeutet der neue Editor eine große Umstellung in erster Linie für die „normalen“ Nutzer von WordPress, aber auch für alle Entwickler von ­Plugins und Themes. Der Editor kann als WordPress-Plugin getestet werden, was vor dem Update auf 5.0 jedem zu empfehlen ist – schon um zu prüfen, ob alle installierten Plugins, die ­etwas in der Bearbeitungsansicht verändern, weiter funktionieren. Bei vielen ­Themes sollte es allerdings keine großen Probleme geben, sofern sie sich hauptsächlich um die Darstellung der Inhalte kümmern und nicht mit Funktionen gespickt sind, die in ­Plugins gehören.

Falls etwas nicht funktioniert und es keine Alternative zu dem problematischen Plugin oder Theme gibt (oder der neue ­Editor aus anderen Gründen nicht genutzt werden soll), lässt sich der neue Editor über ein Plugin deaktivieren, sodass nicht mit dem Update auf 5.0 gewartet werden muss, bis alle ­eingesetzten ­Plugins und Themes kompatibel sind. Jetzt aber zum für ­Entwickler spannenden Teil: der Erweiterbarkeit des neuen ­Editors durch ­eigene ­Inhaltsblöcke.

Erstellung eines eigenen Blocks

In diesem Beitrag geht es um die Erstellung eines Autorenboxblocks, der Bild, Namen und Beschreibung enthält. Der Code dazu liegt auf Github, im Artikel ist er ­teilweise gekürzt. Getestet wurde der Code ­dieses ­Artikels mit Gutenberg 3.

Voraussetzungen für die Entwicklung

Neben einem Webserver und installiertem WordPress mit ­aktivem Gutenberg-Plugin braucht es ein leeres Plugin und ­Babel für die Kompilierung von modernem JavaScript zu ­JavaScript nach dem ES5-Standard für breite Browserunter­stützung. ­Außerdem Sass und einen Taskrunner wie Webpack oder Gulp, um die Kompilierung zu automatisieren und die Ergebnisse am richtigen Ort auszugeben.

Die Beschreibung der Installation und Konfiguration dieser Tools würde den Rahmen dieses Artikels sprengen – die offi­ziellen Dokumentationen sollten da gut weiterhelfen. Ein Beispiel für eine funktionierende Konfiguration gibt es zudem im ­Github-Repo zum Artikel. Für das WordPress-Plugin wird im Ordner wp-content/plugins ein Verzeichnis t3n-­gutenberg-block und darin eine t3n-gutenberg-bloroock.php erstellt und mit folgendem Inhalt gefüllt:

<?php
/**
* Plugin Name: t3n Gutenberg Block
* Description: Example Gutenberg block.
* Version: 0.1.0
* Author: Florian Brinkmann
* License: GPL v2 http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/

  if ( ! defined( 'WPINC' ) ) {
    die;
}

Der Kommentar enthält die für WordPress wichtigen Informationen, damit das Projekt als Plugin erkannt wird. Über ­! defined( 'WPINC' ) wird geprüft, ob das Plugin nicht im WordPress-Umfeld ausgeführt wird – in diesem Fall wird das Programm abgebrochen. Damit sind die Voraus­setzungen geschaffen und es kann losgehen mit der Erstellung des Blocks.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.