Ein halbes Jahr Gutenberg-Editor in WordPress 5.x

in ,
Ein halbes Jahr Gutenberg-Editor in WordPress 5.x

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
BezeichnungFunktion
AbsatzEin Absatz wird eingefügt. 
AudioFügt eine Audiodatei ein entweder mit Drag & Drop, Upload oder Mediathek
BildBild einfügen durch Drag & Drop oder laden oder aus der Mediathek
CoverTitelbild über Bildschirmbreite (Viewport). 
DateiFügt eine Datei ein. z.b. eine Excel-Datein als Drag & Drop, Upload oder von Mediathek
GalerieErstellt eine Bildergalerie mit bis zu Spalten aus Mediathek oder Upload
ListeErstellen einer ein unsortierten oder sortierten Liste
ÜberschriftÜberschrift von H1 bis H6 einfügen (Preset H2-H4)
VideoFügt eine Videodatein ein entweder mit URL-Angabe, Emded, Drag & Drop, Upload oder Mediathek
ZitatErstellen eines Zitates mit Quellenangabe gemäß Layout des Themes

Blöcke zur Formatierung
BezeichnungFunktion
ClassicNutzen des klassischen Editors innerhalb von Gutenberg. bei übernommen Beiträge wird dieser ebenfalls angezeigt!
CodeBlock zur Darstellung von Programmier-Code z.b. PHP oder Javascript
HTMLSelbsterstellten HTML-Code einfügen mit Vorschau-Ansicht.
PullquoteEin Zitat mit erweitertern Parametern
TabelleEinfügen einer Tabelle z.b. Table-Generator
VersLeicht eingerückter Text für Prosa
vorformatiertAhnlich dem Code-Block, mit zusätzlichen Einstellungsmöglichkeiten
Layout Elemente
BezeichnungFunktion
AbstandshalterErstellt vertikale Abstände zwischen Blöcken
ButtonErstellt eine Auswahlknopf (Button) erstellen. Gestaltung und Layout je nach Theme.
Medien & TextPlatzieren von Bildern oder Videos neben Text. Spaltengröße veränderbar.
Mehr“Weiterlesen” – Knopf in Beiträgen
SeitenumbruchErstellt mehrere Unterseiten für einen Beitrag.
SpaltenErstellt mind. 2 bis max. 6 Spalten
TrennzeichenErstellt 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
BezeichnungFunktion
ArchiveErstellt ein Monatsarchiv z.b. wie in der Sidebar 
Kategorienzeigt Deine Kategorien an (wie früher in der Sidebar). Wahlweise als Liste oder Dropdown-Menü,mit oder ohne Beitragsanzahl
KommentareNeueste Kommentare. Einstellbar sind Avatar, Datum und Textauszug.Standard sind 5 gesetzt, einstellbar 1 bis 100
Neue BeiträgeNeueste Beiträge, Entweder in Liste oder Raster. Reihenfolge, Kategorie, Anzahl der Elemente und Datum sind einstellbar
ShortcodeEinfü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:

Diesen Beitrag teilen:

Verfasse einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.