Jetzt – wo die Einführung des Gutenberg-Editor bei WordPress erfolgreich durchgeführt wurde und die anfängliche Aufregung sich gelegt hat, möchte hier meine Ausführungen und Zusammenfassung zum neuen WordPress-Feature zum Besten geben.
Wer sich noch nicht mit Thema befasst hat, Gutenberg ist der neue mitgelieferte Editor für WordPress. Benannt nach dem Erfinder des Buckdrucks. Johannes Gensfleisch, heute bekannt unter dem Namen seines Familiensitzes „zum Gutenberg” Der herkömmliche visuelle Editor erfordert die Verwendung von Shortcodes, HTML-Komponenten oder HTML-Tag, damit alles nach dem Wunsch des Verfasser Blog/Seitenbetreibers gestaltet werde kann. Das Ziel der WordPress-Entwickler war also, diesen Vorgang deutlich einfacher und nachvollziehbarer zu machen, haupstächlich für die Einsteiger in WordPress. Seither musste sich der geneigte User auf zusätzliche PageBuilder Tools wie VisuellComposer, WPBakery, Beaver Builder oder Elementor verlagern die ggf. auch kostenpflichtig waren. Ich selbst habe seit mehreren Jahren mit dem Visuell Composer gearbeitet und war damit immer sehr zufrieden.
Test-Installation
Der Chef-Entwickler von WordPress Matt Mullenweg (der Gründer) hatte noch vor der Integration des Editors in den WordPress-Kernel 100.000 aktive Test-Installationen forciert. Dadurch konnten Bugs und zusätzliche Anregungen in das finale Release einfließen. Im Dezember 2018 war es dann soweit der neue Gutenberg-Editor wurde mit „WordPress 5.0“ als Standard-Editor automatisch installiert. Da die Aufregung im Netz recht groß war und ich ohnehin einen Relaunch meine WebSite privataktionaer.com vorhatte, wartete ich noch mit der Installation von WP 5.0 bis ich mein neues Theme ausgewählt hatte. Anschließend habe ich mir meine Test-Seite zu Übungszwecken erst einmal lokal neu aufgebaut. Für den Test habe ich ein typisches Business-Theme aus dem Katalog von https://www.templatemonster.com/de/ gewählt.
WordPress setzt auf Blöcke
Wer mit Gutenberg in WordPress Seiten oder Beiträge erstellt – der konfiguriert ab sofort Blöcke. Je nach Funktion oder strukturellem Zusammenhang des Beitrags können Blöcke erstellt, bearbeitet oder in andere Blöcke umgewandelt werden. Bei meiner Test-Installationen probierte ich alle möglichen Blöcke aus, versuchte mich an den verschiedenen Einstellungen und wandelte munter zwischen den verschiedenen Umstellungsmöglichkeiten umher. Durch die Vorschaumöglichkeit von WordPress konnte ich immer schnell das Ergebnis betrachten, dennoch benötigte einige Tage um mich im neuen Editor sicher und mühelos navigieren zu können. Wer einige Grundkenntnisse in der Semantik von HTML5 besitzt, wird sich in den Bezeichnungen und Parametern schnell zurechtfinden und auch den Sinnzusammenhang erkennen. Wer allerdings in HTML keine Kenntnisse besitzt dem bleibt nur probieren und schauen was passiert. Was allerdings auch im Bezug von Suchmaschinenoptimierung nachteilig sein kann. Es wird zwischen 4 verschiedenen Block-Typen unterschieden: Allgemeine Blöcke, Blöcke zur Formatierungszwecken, Layout-Elemente, Widget-Blöcke und Einbettungen (Embeds.)
Übersicht der “Gutenberg“Blöcke
| Allgemeine Blöcke | |
| Bezeichnung | Funktion |
| Absatz | Ein Absatz wird eingefügt. |
| Audio | Fügt eine Audiodatei ein entweder mit Drag & Drop, Upload oder Mediathek |
| Bild | Bild einfügen durch Drag & Drop oder laden oder aus der Mediathek |
| Cover | Titelbild über Bildschirmbreite (Viewport). |
| Datei | Fügt eine Datei ein. z.b. eine Excel-Datein als Drag & Drop, Upload oder von Mediathek |
| Galerie | Erstellt eine Bildergalerie mit bis zu Spalten aus Mediathek oder Upload |
| Liste | Erstellen einer ein unsortierten oder sortierten Liste |
| Überschrift | Überschrift von H1 bis H6 einfügen (Preset H2-H4) |
| Video | Fügt eine Videodatein ein entweder mit URL-Angabe, Emded, Drag & Drop, Upload oder Mediathek |
| Zitat | Erstellen eines Zitates mit Quellenangabe gemäß Layout des Themes |
| Blöcke zur Formatierung | |
| Bezeichnung | Funktion |
| Classic | Nutzen des klassischen Editors innerhalb von Gutenberg. bei übernommen Beiträge wird dieser ebenfalls angezeigt! |
| Code | Block zur Darstellung von Programmier-Code z.b. PHP oder Javascript |
| HTML | Selbsterstellten HTML-Code einfügen mit Vorschau-Ansicht. |
| Pullquote | Ein Zitat mit erweitertern Parametern |
| Tabelle | Einfügen einer Tabelle z.b. Table-Generator |
| Vers | Leicht eingerückter Text für Prosa |
| vorformatiert | Ahnlich dem Code-Block, mit zusätzlichen Einstellungsmöglichkeiten |
| Layout Elemente | |
| Bezeichnung | Funktion |
| Abstandshalter | Erstellt vertikale Abstände zwischen Blöcken |
| Button | Erstellt eine Auswahlknopf (Button) erstellen. Gestaltung und Layout je nach Theme. |
| Medien & Text | Platzieren von Bildern oder Videos neben Text. Spaltengröße veränderbar. |
| Mehr | “Weiterlesen” – Knopf in Beiträgen |
| Seitenumbruch | Erstellt mehrere Unterseiten für einen Beitrag. |
| Spalten | Erstellt mind. 2 bis max. 6 Spalten |
| Trennzeichen | Erstellt sowohl eine semantische als ich grafische Trennung entweder als kurze, breite Linie oder gepunktet |
| Widget Blöcke Auszug je nach Theme und installierten Plugins können das noch erheblich mehr sein | |
| Bezeichnung | Funktion |
| Archive | Erstellt ein Monatsarchiv z.b. wie in der Sidebar |
| Kategorien | zeigt Deine Kategorien an (wie früher in der Sidebar). Wahlweise als Liste oder Dropdown-Menü,mit oder ohne Beitragsanzahl |
| Kommentare | Neueste Kommentare. Einstellbar sind Avatar, Datum und Textauszug.Standard sind 5 gesetzt, einstellbar 1 bis 100 |
| Neue Beiträge | Neueste Beiträge, Entweder in Liste oder Raster. Reihenfolge, Kategorie, Anzahl der Elemente und Datum sind einstellbar |
| Shortcode | Einfügen eines Shortcodes |
Ausserdem noch die:
…Embeds
Mit den Einbetten-Blöcken werden aktive Inhalte von anderen Internetseiten eingebunden. Das Embed-Element ist ein alleinstehendes HTML-Element ohne schließendes Tag. Deshalb kann man dazu auch kein ALT-Text eingeben wie z.b. bei Bilder und Videos. Benötigt wird die URL der jeweiligen Seite. WordPress liefert einige Einbettung (viele Social-Media Anbieter) bereits von Haus aus, die vollständige Übersicht findest sich im Gutenberg-Codex.
und die
…Inline-Blöcke
Inline-Elemente sind Elemente, die innerhalb eines anderen Blocks, in der Regel eines Absatzblocks, eingefügt werden können. Momentan gibt es lediglich einen Inline-Block, das Inline-Bild.
Mein Fazit!
Der Gutenberg-Editor hat sich bei mir in der Praxis bewährt. Wer keine überlangen Texte bearbeitet und das ist ja in Zeiten der VLOG, Podcast und Streaming der Fall, der wird mit dem Gutenberg recht schnell neue Beiträge und Layouts erstellen können. Sollte jedoch der schwerpunkt auf längere Textbeiträge liegen, der ist eventuell mit Classic-Editor zufriedener. Für speziellere Aufgaben empfiehlt sich dann eh der Blick in die reichhaltige Plugin-Angebotspalette für PageBuilder. Denn die werden weiterhin für spezielle Anforderungen Ihre Berechtigung haben. Aber auch diese Plugins setzen zukunftig auf den Gutenberg als Basis auf.
Vorteile Gutenberg-Editor
- Die Blockorientierung erleichtert das Responsive WebDesign;
- Es gibt einige Gestaltungsmöglichkeiten für die seither PlugIns notwendig waren;
- Eine sehr hilfreiche neue Funktion der „wiederverwendbaren Blöcke“;
Nachteile Nachteile im Gutenberg-Editor
- Die WYSIWYG-Eigenschaft sind nicht optimal, die Anzeige im Editor ist nur angenähert an das tatsächliche Layout;
- Einige Shortcodes funktionieren leider nicht mehr, ein ausgiebiger Funktionstest sollte erfolgen;
- Spalten sind missverständlich und schwierig einzustellen und nur begrenzt responsive;Einige Alternative Social-Media Anbieter sind nicht verfügbar in Einbettungen;
- Gestaltung von Tabellen ist umständlich;
Wer ganz herkömmlich weiterhin mit dem klassischen Editor arbeiten möchte, für den empfiehlt sich das Classic Editor Plugin. Damit kann man den Gutenberg-Editor entweder vollständig als Standardeditor ersetzen oder den Gutenberg-Editor zwar als Standard verwenden und und dennoch für ausgewählte Beiträge auf den Classic-Editor wechseln.
Weitere interessante Links:
- Eine Zusammenstellung rund die Entwicklung und den den Fortschritt des Editors: Gutenberg-News (englisch)
- Say Hello to the new Editor Gutenberg auf WordPress (englisch).
- Disable Gutenberg zurück zum alten Editor
