Der Gutenberg-Editor

Der Gutenberg-Editor kam mit WordPress 5 und ist seit November 2018 auch in Drupal 8 verfügbar. Gutenberg gibt Autoren einen größeren Spielraum bei der Gestaltung von Beiträgen und Seiten. Drupal hat zwar seit ewig und zig Versionen seine Drupal-Blöcke, die blieben aber für die meisten Autoren ein Rätsel mit sieben Siegeln.

Gutenberg-Funktionen und Arbeitsweise

Der Anfang eines neuen Beitrags oder einer neuen Seite zeigt jede Menge Weißraum. Erst wenn der Autor durch Text und Bilder Gutenberg-Blöcke hinzufügt, zeigt sich die Arbeitsweise des Editors und eine Idee des Layouts wird sichtbar. Während der klassische Editor von WordPress – TinyMCE – und der CKEditor in Drupal eine gewisse Ähnlichkeit mit einem einfachen Textverarbeitungsprogramm hatte, strukturiert Gutenberg den Inhalt in kleine Stücke – Blöcke.

Gutenberg Steuer-Elemente

Blöcke sind z.B. einzelne Textabsätze, Bilder bilden Blöcke, es gibt Blöcke für Galerien und für Video. Aber zuerst einmal eine Übersicht über die wichtigsten Elemente von Gutenberg.

  1. Neuen Block hinzufügen
  2. Rückgängig / Wiederholen
  3. Einstellungen des Dokuments wie Kategorie, Beitragsbild, Auf der Startseite halten. Wenige Änderungen gegenüber dem alten WordPress-Editor
  1. Einen Block markieren, um die Einstellungen für diesen Block sichtbar zu machen
  2. Vorschau und Speichern
  3. Hier entsteht der Inhalt, so wie Blöcke hinzugefügt werden.

Gutenberg Block für Block

Nicht jedes WordPress-Theme wird dieselben Blöcke aufweisen und die Darstellung der Block-Designs kann auch voneinander abweichen.

SymbolTypBeschreibung 
AbsatzEinen einfachenTextabsatz hinzufügenAllgemein
AufzählungFügt eine ungeordnete Liste hinzuAllgemein
BildBild ladenAllgemein
CoverEin Bild, das mit Text überlagert wird. Ein Cover-Bild kann außerdem "fixiert" werden … dann offenbart es beim Scrollen mehr von oben und unten. 
PullquoteEine abgesetzter Block für einen markanten Ausspruch 
SpaltenBlöcke in Spalten setzen. Spalten-Blöcke eignen sich z.B. für Preiskarten oder Angebote. 
TÜberschriftÜberschriften vom Typ h2 bis H6 strukturieren den Text 
GalerieBilder übersichtlich darstellen 
Vorformatierter TextText, der Leerzeichen und Tabulatoren so zeigt, wie er gesetzt wird. Z.B. für eine einfache Zahlenkolonne oder um HTML-Code in einem Beitrag anzuzeigen 
TabelleTabelle einfügen, Anzahl der Zeilen und Spalten angeben 
AudioEinen einfachen Audio-Player einfügen 
ZitatEinen Satz oder einen Ausspruch als Zitat einsetzen 
VersSchon lange kein Gedicht mehr verfasst? 
VideoEin Video aus einer Media Library einbetten oder ein Video hochladen 
DateiEine Datei für einen Download hochladen 
ClassicDen klassischen WordPress-Editor benutzen. 
CodeZur Darstellung von Quelltext, z.B. Beschreibung von HTML oder Javascript 
HTMLHTMLUmschalten zum HTML Quelltext-Editor 
ButtonButton hinzufügen 
SeitenumbruchLange Seiten teilen 
SeparatorTrennlinie für eine elegante Einteilung 
AbstandhalterGib den Blöcken Luft und Freiraum 
ShortcodeZusätzliches Element mit Shortcode einsetzen 
KategorienKategorien einspielen 
ArchiveMonats-Archiv einspielen 
KommentareListe der neusten Kommentare einspielen 
Neuste BeiträgeListe der neusten Beiträge / Posts einspielen 
EinbettenVideos, Bilder, Tweets, Audio und weitere Inhalten von externen Quellen einbetten 

Externe Quellen

[ / ] <> 1 2 3 4 5 1 6

Und eigene Felder für Inhaltstypen?

Eigene Felder tauchen weiterhin auf, jetzt unten unter dem Fuß des Gutenberg-Editors.

Customizer
.gutenberg-symbols {font-size:90%}