deutsche FlaggeSaarbrücken
Auf den Saarterrassen
Heinrich-Barth-Str. 27
66115 Saarbrücken - Germany
Fax: +49 681 9 67 67 66
Anfahrt
französische FlaggeForbach
31 avenue Saint-Rémy
57600 Forbach - France
Fax: +33 (0) 3 72 88 15 01
Anfahrt Website
WordPress Gutenberg
Was lange währt,
sieht endlich gut aus
30.Nov 2018 • 12:00 Uhr

WordPress 5.0 – Was lange währt, sieht endlich gut aus

Bald soll mit WordPress 5.0 der neue Editor, unter dem Codenamen „Gutenberg“, veröffentlicht werden. Was es für  Entwickler und Redakteure bedeutet, möchte ich in diesem Artikel erläutern. Aber zuerst machen wir eine kleine Reise durch die Geschichte des WordPress Editors.

TinyMCE

WordPress setzt seit vielen Jahren auf ein einfaches Textfeld, welches mithilfe von TinyMCE zu einem „What-You-See-Is-What-You-Get“-Editor erweitert wurde. Die Funktionen erfüllten zur damaligen Zeit ihren Zweck. Es gab die üblichen Werkzeuge wie Fett, kursiv usw., die man von Word und Co. kannte. Leider wurde dieser „What-You-See-Is-What-You-Get“-Ansatz nicht sonderlich ernst genommen. Es gibt zwar Möglichkeiten, ein eigenes Stylesheet zu laden, aber so richtig schön war es auch nicht.

Shortcode-Hölle

Wollte man etwas komplexere Aufbauten für seine Inhalte kreieren, gab es nur die Möglichkeit, sich mit Shortcodes zu helfen. Für Programmierer oder geschultes Personal war dies zwar vielleicht noch verständlich, jedoch alles andere als benutzerfreundlich. Nach einer Weile fand man sich in größeren Projekten in der liebevoll genannten Shortcode-Hölle wieder.

Pagebuilder

Mit der Zeit veränderte sich das Web, Artikel wurden immer komplexer mit Medien angereichert und individualisiert. Durch neue CSS Eigenschaften und somit auch mehr Möglichkeiten für Designer, hat sich der Aufbau von Inhalten stark verändert.

Der WordPress Core stellte keine Möglichkeit bereit, das Interface auf die neuen Gegebenheiten anzupassen. Stattdessen entwickelten sich aufgeblähte Erweiterungen, wie Visual Composer und andere Pagebuilder-Plugins. Diese ermöglichen es zwar Redakteuren, Inhalte z. B. in mehreren Spalten aufzuteilen, führen aber dazu, dass Endnutzer jede Menge Ballast im Frontend herunterladen müssen. Das Ergebnis sind längere Ladezeiten und höhere Absprungraten. Hinzu kam der auch sehr unliebsame „Lock-In-Effekt“, der es verhinderte ohne großen Aufwand solche Plugins wieder loszuwerden. Ich nutzte auch heute noch den Pagebuilder von Siteorigin, der es wenigstens versucht, etwas besser zu machen.

Gutenberg

Durch das Aufblühen von Portalen wie Medium oder Wix, sieht sich WordPress dazu gezwungen, das Erlebnis für Redakteure zu verbessern. Dies mündet nun in der Veröffentlichung des Gutenberg Editors.

Seit einigen Monaten beschäftige ich mich nun mit diesem neuen Editor und ich muss sagen, dass es ein Schritt in die richtige Richtung ist. Trotz allen Probleme, die er zur Zeit noch verursacht, wie z.B. diverse Accessability Fehler. Auch die dahinterliegende API scheint für mich noch etwas instabil zu sein. Das bedeutet für mich vor allem mehr Aufwand, da mit jedem Beta-Release alte, funktionierende Module eventuell überarbeitet werden müssen. Ich denke aber, dass es sich nach und nach immer weiter stabilisiert. Die sich bietenden Möglichkeiten sind es auf jeden Fall wert, früh auf den Gutenberg-Zug aufzuspringen.

Technisch gesehen läuft hinter Gutenberg eine React Applikation mit Redux als Statemanager. Dies hilft vor allem Javascript-Entwicklern, die das Facebook-Framework bereits kennen, sich schnell zu Recht zu finden. Der Umstieg von einer fast reinen serverseitigen Lösung zu einer Javascript-Lösung, fiel mir im ersten Moment schwer. Nach einigen entwickelten Blöcken für Gutenberg und einem soliden Basis-Tooling, konnte ich mich aber schnell zurechtfinden.

Alle Elemente in einem Artikel, ob Paragraph, Bild oder Liste, sind sogenannte Blocks. Während man bei solchen einfachen Elementen noch kein Unterschied zu TinyMCE sieht, entfaltet der neue Editor bei komplexen Elementen, wie z. B. einer Card-Komponente seine ganzes Können. Es können auch Inhalte auf einfache Weise in mehrere Spalten aufgeteilt werden.

Mit wenigen Handgriffen kann man die Eingabemaske auch so aussehen lassen, wie es später auch der Nutzer sieht. Ein wahrer „What-You-See-Is-What-Yout-Get“-Editor eben.

Um sich selbst ein eigenes Bild des neuen Editors zu machen, gibt es eine Online-Spielwiese.

Wir selbst setzen gemeinsam mit einigen Kunden Gutenberg auch schon produktiv ein und wir sind begeistert.

Ist Ihre Webseite schon bereit für Gutenberg? Kontaktieren Sie uns, wenn Sie mehr über Gutenberg erfahren möchten.

 

30. November 2018
Kategorie:
Ralf Hortt
Übersicht

Kommentare

Kommentare sind geschlossen.