loading please wait..

WordPress Gutenberg Entwicklung

Der neue Editor in WordPress 5.0

Im Zentrum der neuen WordPress Version 5.0 steht der neue Editor «Gutenberg», benannt nach dem Erfinder des modernen Buchdrucks Johannes Gutenberg. Ähnlich dem Erfolg der Druckerpresse will WordPress mit seinem neuen Editor die Bearbeitung von Webseiten-Inhalten revolutionieren.

Im Gegensatz zum aktuellen TinyMCE Editor, wo der ganze Inhalt einer Seite in einer einzigen Box bearbeitet wird, kommen im Gutenberg-Editor sogenannte «Blocks» zum Einsatz. Man verwendet einen Block für ein Bild, einen anderen Block für einen Paragraphen, und so weiter. Diese Blocks können dann einfach verschoben und untereinander getauscht werden.

WordPress stellt mit dem Update gleich einige Blocks von Haus aus zur Verfügung. So gibt es Blocks für Paragraphen, Bilder, HTML-Code, aber auch für komplexere Inhalte wie Tabellen oder Bildgalerien.

Toll ist die Möglichkeit, Blocks wiederzuverwenden. Haben Sie einmal einen Block erstellt und mit Inhalten gefüllt, so kann der Block gespeichert und nach Belieben wiederverwendet werden. Wird der Block bearbeitet, werden alle Seiten, die den Block verwenden, aktualisiert. Dafür gibt es unzählige Anwendungsfälle: Einen Call-to-Action, einen Hinweis auf einen anstehenden Event, und vieles mehr.

Ein weiteres Highlight ist die Option, Inhalte in mehrere Spalten aufzuteilen. Das war bisher ein Problem, das niemand so recht lösen konnte. Es gab komplette Pagebuilder, welche den TinyMCE-Editor völlig ersetzt haben, oder komplizierte Kombinationen aus Shortcodes, die dann auf der fertigen Seite Spalten dargestellt haben.

Shortcodes kann man übrigens nach wie vor verwenden. Es gibt dafür einen eigenen Block, mit dem man Shortcodes überall auf der Seite einfügen kann.

Gerade Nutzern mit weniger Anwenderkenntnissen bieten diese Neuerungen eine einfachere Bedienung und mehr Freiheiten in der Platzierung von Inhalten.

 

Individuelle Gutenberg-Blocks

Die wahre Stärke von Gutenberg liegt in der Möglichkeit, eigene Blocks zu programmieren. Sie möchten ein Mitglied Ihres Teams auf einer Seite zeigen? Ein Team-Block ist die Lösung. Sie möchten den Status Ihrer Spenden-Sammelaktion auf verschiedenen Seiten platzieren? Ein individueller Spenden-Block macht’s möglich.

Während die Bedienung für den Endnutzer mit dem neuen Editor viel einfacher wird, steigt die Komplexität bei der Erstellung eines eigenen Blocks. So ist die Programmierung von individuellen Blocks schwieriger geworden, als früher die Erstellung von Widgets oder Metaboxen mittels PHP.

Nicht umsonst hat Matthew Mullenweg (der Gründer der WordPress-Schmiede «Automattic») der Community geraten: «Learn JavaScript, deeply». Der Editor basiert auf dem JavaScript Framework «React», welches im Hintergrund asynchron mit dem Server über die WordPress-API kommuniziert. Wenn das für Sie verwirrend tönt, übernehmen wir gerne die Programmierung Ihrer eigenen Blocks.

Gutenberg Editor mit individuellem Block und Seitensteuerung

Gutenberg Editor mit individuellem Block und Seitensteuerung

Gutenberg-kompatible Themes nötig

Der Gutenberg-Editor erzeugt schlussendlich HTML-Code. Genau gleich, wie der frühere Editor ebenfalls. Insofern ändert sich im sichtbaren Bereich für die Besucher Ihrer Webseite nichts. Aus dem gleichen Grund werden auch die meisten WordPress Themes nichts merken vom neuen Editor. Natürlich ausgenommen, das Theme stellt besondere Bearbeitungsmöglichkeiten im Admin-Bereich zur Verfügung. Aber die meisten Seiten werden wohl nach dem Update optisch gleich erscheinen.

Neu können aber Block-Elemente nicht nur links, rechts oder zentriert ausgerichtet werden, sondern auch «Wide width» oder «Full width». Also breiter als der Inhaltscontainer oder in der vollen Seitenbreite. Diese Ausrichtungen stehen aber nur bei Themes zur Verfügung, welche diese auch unterstützen. Das Theme muss einerseits die Layouts selbst zur Verfügung stellen und andererseits seine Kompatibilität gegenüber WordPress mit dem Code add_theme_support( 'align-wide' ); mitteilen.

Die Herausforderungen

Während Gutenberg eine willkommene Erleichterung für den Anwender mit sich bringt, ist das Update für Website-Administratoren auch eine Herausforderung. Viele WordPress-Themes und WordPress-Erweiterungen haben die Bearbeitungsfunktionen von Inhalten ergänzt, indem Sie den alten TinyMCE Editor ausgebaut haben.

Solche Erweiterungen funktionieren nicht mehr im neuen Gutenberg Editor. Nach einem Update auf WordPress 5.0 sind also unter Umständen gewisse Bearbeitungstools nicht mehr vorhanden. Im schlimmsten Fall funktioniert das Theme oder einzelne Plugins überhaupt nicht mehr.

Wir empfehlen also, das Update zuerst in einer Entwicklungsumgebung zu testen, bevor Sie es in einer produktiven Umgebung aufschalten. Sie können übrigens die Auswirkungen von Gutenberg bereits vor der Veröffentlichung des WordPress 5.0 Updates testen. Das Plugin ist auf der WordPress Plugin-Page erhältlich. Es bleibt natürlich offen, ob die finale Version genau gleich funktionieren wird.

 

Wenn der Editor nicht gefällt

Die Abneigungen gegenüber Gutenberg sind in der Community sehr gross. Gründe dafür gibt es viele. Zum Einen treibt Automattic, das Entwicklerteam hinter WordPress, rücksichtslos die Veröffentlichung von Gutenberg voran. Ohne Drittanbietern und Agenturen Zeit zu geben, ihre Produkte zu testen und anzupassen. Viele Plugins werden so nach dem Update nicht mehr funktionieren und Agenturen werden erst nach dem Erscheinen des 5.0 Updates ermitteln können, ob die Seiten ihrer Kunden kompatibel sind.

Zum Anderen ist die Datenstruktur hinter dem Editor (zum Speichern der Inhalte) nicht wirklich ideal und es gäbe in WordPress wichtigere Baustellen, als eine bessere Benutzeroberfläche. Viel PHP-Code im Kern des CMS ist schlicht und einfach veraltet.

Auch wenn wir damals die Ankündigung des neuen Editors kritisch zur Kenntnis genommen haben, sind wir heute überzeugt, dass das Update dem Endkunden viele Vorteile bringen wird. Und wem der Editor absolut nicht gefällt, der hat doch noch ein paar Optionen:

  • Der «Classic»-Block. Dieser Block fügt einen Editor in Ihre Seite, der genau dem alten TinyMCE entspricht
  • Zumindest beim Gutenberg-Plugin gibt es die Möglichkeit, Seiten und Beiträge mit einem «Classic Editor» zu bearbeiten
  • Die Installation des Plugins «Classic Editor«, welches den neuen Editor mit dem alten Bearbeitungstool überschreibt

 

Unsere Dienstleistungen zu Gutenberg

Neben der langjährigen Erfahrung in der Entwicklung von individuellen WordPress-Themes und -Plugins für Kunden und Agenturen bieten wir neu auch die Programmierung von individuellen WordPress Gutenberg Blocks an.

Sie benötigen eigene Blocks für Ihre Mitarbeiter? Dynamische Inhalte sollen als Blocks in Ihren Seiten und Beiträgen eingefügt werden? Sie wollen als Agentur eigene Funktionen in Ihre Theme einbinden?

Kontaktieren Sie uns, wir finden immer eine passende Lösung.