Die WordPress Revolution

31.05.2022, CMS

Mit WordPress 5.0 wurde eine komplette Neuausrichtung des CMS gestartet. Statt dem Wordpress-Editor TinyMCE setzt man seither auf den Gutenberg-Editor.

Der Name wurde nicht zufĂ€llig gewĂ€hlt. Ähnlich wie der Buchdruck, der viele neue Entwicklungen ermöglicht hat, bewirkt auch der Gutenberg-Editor eine grundlegende VerĂ€nderung von WordPress.

UrsprĂŒnglich wurde WordPress fĂŒr die Erstellung von Blogs entwickelt. Seit der EinfĂŒhrung des Gutenberg-Editors wandelt sich WordPress immer mehr zum Full Site Editing Tool. Damit richtet sich WordPress eher an User, die keine Entwickler Erfahrung haben, jedoch selbst möglichst flexible Seiten gestalten möchten und weniger an Redakteure, die schnell und unkompliziert Inhalte in einem einheitlichen Design erstellen wollen.

Was ist der Gutenberg-Editor?

Seit WordPress 5.0 ist der neue Editor fester Bestandteil des CMS. Das Erstellen von Inhalte soll damit leichter und intuitiver werden. Statt Shortcodes und individuellem HTML bietet der Gutenberg-Editor Blöcke zur Seitengestaltung. Blöcke sind Inhaltsbausteine wie Überschriften, Bilder, Videos, Listen etc. die zur BefĂŒllung verwendet werden. Damit Ă€hnelt der Gutenberg-Editor einem Drag & Drop Seitenerstellungstool.

Der Gutenberg-Editor ermöglicht es, ein flexibles Seitenlayout zu erstellen. Neben Standardblöcken wie Überschriften, Bilder etc. kann man auch wiederverwendbare Blöcke erstellen. Diese werden fĂŒr Inhalte verwendet, die mehrfach auf einer Webseite angezeigt werden z.B. Kontaktinformationen.

Durch die Blöcke können Inhalte besser strukturiert werden, allerdings muss man wesentlich mehr herumklicken als beim klassischen Editor, da auch jeder Absatz und jede Überschrift automatisch in einen Block umgewandelt werden und dies den Schreibfluss stören kann.

Um den Gutenberg-Editor zu testen, kann man das Demo von WordPress verwenden: The new Gutenberg editing experience – WordPress.org

BenutzeroberflÀche

Zum Vergleich der klassische Editor, bei dem man Überschriften, Bilder, Links und Shortcodes ĂŒber die Werkzeugleiste einfĂŒgt

Die Bedienelemente des Gutenberg-Editors

Die oberste Leiste beinhaltet folgende Funktionen:

  • Block Inserter
  • Auswahl/Editieren
  • Aktion rĂŒckgĂ€ngig machen / wiederholen
  • Infos zur Struktur
  • Block-Navigation
Block Inserter

Über den Block Inserter kann man Blöcke, Block- & Page-Pattern und wiederverwendbare Blöcke einfĂŒgen.

Auswahl/Editieren

Über die Edit/Select Funktion kann man Blöcke bearbeiten bzw. auswĂ€hlen

Infos zur Struktur

Der Info Button liefert Informationen zur inhaltlichen Struktur.

Block-Navigation

Die Block-Navigation zeigt die Blockstruktur in einer Listenansicht, diese ist vor allem beim Verschieben von Blöcken sehr praktisch

Beitrags- und Blockoptionen

Über Klick auf das Zahnrad-Symbol wird die rechte Site Bar mit den Beitrags- und Blockoptionen eingeblendet. Welche Optionen man hier hat, hĂ€ngt von der Konfiguration der jeweiligen WordPress Installation bzw. des Themes ab. Damit Redakteure einfach den Überblick behalten und dennoch ein einheitliches Layout garantiert ist, sollte man vor allem bei den Blockoptionen die Möglichkeiten einschrĂ€nken. Es besteht zum Beispiel die Möglichkeit ein Set an Farben zu definieren, auch die Definition von CSS Klassen ist möglich.

Beitragsoptionen

Wie auch schon in frĂŒheren WordPress Versionen, sind sĂ€mtliche Optionen fĂŒr einen Beitrag in der rechten Site Bar zu finden.

Neu ist, dass dort nun auch der Permalink zu finden ist. Im Feld URL Slug wird das Pfadsegment des jeweiligen Beitrags fĂŒr die sprechende URL eingetragen.

Beinhaltet die WordPress Installation Plugins, die Gutenberg-ready sind und die individuelle Einstellungen fĂŒr BeitrĂ€ge ermöglichen, z.B. SEO Plugins, so findet man diese ebenfalls in der rechte Site Bar bei den Beitragsoptionen.

Blockoptionen

Wurde ein Block ausgewĂ€hlt so findet man neben den Beitragsoptionen („Post“) auch die Einstellungen fĂŒr den jeweiligen Block.

Bei Text-Blöcken wie Paragraph/Absatz oder Headline/Überschrift hat man hier die Möglichkeit den Text zu formatieren und z.B. vordefinierte CSS Klassen zu zuweisen oder auch die Textfarbe zu definieren.

Was bringt die Zukunft fĂŒr WordPress?

Insgesamt besteht das „Projekt Gutenberg“ aus 4 Phasen: Phase 1 ist bereits abgeschlossen und beinhaltet die EinfĂŒhrung des Block-Editor. Aktuell befindet sich das Projekt in Phase 2.

2022 steht ganz im Zeichen des Full Site Editing (FSE). FSE bedeutet, dass die gesamte Webseite ĂŒber den Editor bearbeitet werden kann, also auch Header und Footer. Mit WordPress 6.0 wurde beispielsweise die Möglichkeit eingefĂŒhrt, Seitentemplates im Gutenberg-Editor einzufĂŒgen.

Phase 3 und 4 sind noch nicht genauer definiert. Phase 3 soll sich auf eine bessere Zusammenarbeit konzentrieren und einen intuitiveren Weg ermöglichen, um Inhalte gemeinsam zu verfassen. In Phase 4 soll dann (endlich) eine Core Implementation fĂŒr mehrsprachige Webseiten entwickelt werden.

Fazit

Durch die Entscheidung als Standard-Editor Gutenberg einzusetzen, hat das WordPress Core-Team auf die Entwicklungen der letzten Jahre reagiert. Ca. 43% der Webseiten verwenden WordPress, und die wenigsten davon sind Blogs, wofĂŒr WordPress ursprĂŒnglich entwickelt. Der Gutenberg-Editor ist ein flexibler Full-Site-Editor, der sich vor allem an Webseiten-Inhaber und Redakteure richten, die ohne Entwicklerkenntnisse ihre Webseite, möglichst flexibel, selbst gestalten möchten. Das ist ein kompletter Bruch mit der ursprĂŒnglichen Zielgruppe und Handhabung von WordPress, weshalb man im Netz auch viele negative Reaktionen findet.

Entwickler kritisieren mehrere Punkte: Einerseits die nicht vorhandene AbwĂ€rtskompatibilitĂ€t, das heißt das eine Seite unter WordPress 5.8 anders aussehen kann als unter WordPress 5.9, weil beispielsweise CSS Klassennamen geĂ€ndert wurden. Diese Änderungen sind auch oft nicht dokumentiert. Ein weiteres Problem ist, dass es seitens des Core Teams, keine fixe Liste fĂŒr neue Features gibt, man weiß also nicht was die nĂ€chste WordPress Version fĂŒr Änderungen mit sich bringt. Damit ist es unmöglich, den Aufwand fĂŒr ein Update abzuschĂ€tzen.

Redakteure werden mit dem Gutenberg-Editor mehr gefordert. Die große Auswahl an Block Elementen und Formatierungsmöglichkeiten kann sehr leicht zu einem uneinheitlichen Design fĂŒhren. Daher sollten Entwickler darauf achten, dass einem Redakteur nur die notwendigen Block Elemente zur VerfĂŒgung stehen und sollten bei den Formatierungsoptionen auf vordefinierte CSS Klassen setzen. Auch die Farbauswahl sollte auf die jeweiligen CI Farben begrenzt sein und unnötige Optionen ausgeblendet werden, damit Redakteure auch mit dem Gutenberg-Editor halbwegs gut zu Recht kommen.

Setzt man WordPress fĂŒr die Neuentwicklung einer Webseite ein, so muss einem bewusst sein, dass die nĂ€chsten Jahren noch grundlegende VerĂ€nderungen bringen werden. Dies wird einerseits zu einem höheren Aufwand hinsichtlich der Aktualisierung des Systems fĂŒhren und andererseits auch Redakteure herausfordern, sich stĂ€ndig mit den neuen Funktionen auseinanderzusetzen.