Gutenberg – der WordPress Block Editor

Beitrasgrafik mit Logo: Der WordPress Block Editor Gutenberg.
24. Oktober 2023

Alles was du jetzt über Gutenberg wissen musst

Benannt nach dem Erfinder des modernen Buchdrucks ist der WordPress eigene Block Editor Gutenberg für Großes vorbestimmt. Oder etwa nicht? 🤔


Bei Gutenberg gehen die Meinungen stark auseinander – nicht bei dem Erfinder Johannes Gutenberg – sondern bei dem WordPress internen Editor, der etwas spät und doch mit viel Inhalt im Gepäck anrückt. Wir stellen die Welt des Gutenberg Block Editors einmal komplett auf den Kopf und finden heraus, was Gutenberg eigentlich kann, was er zu bieten hat, was die Entwickler über ihn sagen und was uns in Zukunft noch erwarten wird.


Mehr Informationen und Insides zu neuen Features findest du in unseren WordPress Core Update-Beiträgen:


1. Was ist Gutenberg?

Der sog. Gutenberg ist der neue WordPress Block Editor, der 2018 mit dem WordPress 5.0 Update eingeführt wurde. Dieser ersetzt den vorherigen Classic Editor. Die beiden unterscheiden sich insbesondere durch die neue blockbasierte Umgebung von Gutenberg.
Das Logo des Gutenberg Block Editors
Gutenberg greift somit auf das bereits bekannte Drag and Drop Menü zurück, über welches Inhaltsblöcke zum Aufbau von Seiten oder Beiträgen zusammengesetzt werden können. Ein Block kann dabei jede Form von Inhalt sein: Textbausteine, Bilder, Medien-Galerien, Zeilenabstände und so weiter. Mit diesem Blockbasierten Editor kannst du jetzt direkt innerhalb von WordPress selbst komplexe Seiten und Designs für deine Webseite bauen.

2. Die Namensgebung von Gutenberg

Ein WordPress Produkt, welches nach einem Erfinder benannt ist, verdient einen kurzen Abriss über den Namensgeber und die Namensgebung an sich. Denn der Gutenberg Editor muss ja etwas von seinem Namensgeber Johannes Gutenberg mitbekommen haben.


Johannes Gutenberg gilt als Erfinder des modernen Buchdrucks mit beweglichen Lettern und wurde um ca. 1400 in Mainz geboren. Ab dem Jahr 1450 löste er die herkömmliche Methode der Buchproduktion ab, wodurch es in Europa zu einer Medienrevolution kam. Die neue Form des Buchdrucks breitete sich schnell aus und wird als wichtiges Schlüsselelement der Renaissance betrachtet. Gutenberg schuf sein Hauptwerk, die sog. Gutenberg-Bibel, zwischen 1452 und 1454.

Johannes Gutenberg

We called it Gutenberg for a reason. […] It’s about freedom, about possibility, and about carving out your own livelihood. […] We’re democratizing publishing — and democratizing work — for everyone, regardless of language, ability, or economic wherewithal.


Matt Mullenweg (2017)


Aber wie kam der Gutenberg Block Editor zu seinem Namen?


Bei Gutenberg und seinem beweglichen Buchdruck ging es um Bücher – aber eben nicht nur um Bücher. Dieser Buchdruck läutete sowohl gesellschaftliche, politische als auch wirtschaftliche Veränderungen ein. Gutenberg hat alles verändert. Genauso verhält es sich mit dem WordPress Block Editor – es geht um Webseiten, aber eben auch um so viel mehr. Für Matt Mullenweg ging es auch um die Freiheit, mit der eigenen Arbeit über WordPress Geld zu verdienen und neue Möglichkeiten des Publizierens zu schaffen – unabhängig von der Sprache, Fähigkeiten oder wirtschaftlichen Möglichkeiten.


Deswegen wurde es Zeit für eine neue WordPress Veränderung, die alles verändert – Gutenberg.

3. Geschichte Gutenbergs – Expertengepräch mit Birgit Pauli-Haack

Für unseren Podcast „Hör mal wer da Hosted“ hat Nick mit WordPress und Gutenberg-Expertin Birgit Pauli-Haack gesprochen. Birgit ist 1998 in die USA ausgewandert und hat sich 2002 mit dem Webseitenbau für Vereine, Autoren und Fotografen selbstständig gemacht. Seit dem Ende der Pandemie 2021 arbeitet Birgit nun als Developer Advocate bei Automattic.


Dort publiziert sie seit 2018 die Seite Gutenberg Times und seit 2019 den Gutenberg Podcast „Changelog“. Birgit ist unter anderem auch an den neuen Core Releases integriert, wie zum Beispiel aktuell beim neuen WordPress 6.4 Update.

Im Gespräch: Nick und Birgit Pauli-Haack für den Podcast Hör mal wer da Hosted.
Nick: Wie bist du zu Gutenberg gekommen?


Birgit: Zum Release 5.0 habe ich sehr viel nachgelesen und ich weiß, dass es schon PageBuilder auf dem Markt gab. Elementor kam, glaube ich, 2005 heraus. BeaverBuilder meine ich 2007. Das war alles schon ewig lange auf dem Markt und das war natürlich auch das Signal: da fehlt etwas im WordPress Core, was andere Leute schon angefangen haben. Da wurde dann gesagt: Okay es fehlt und die Leute wollen das. Also lasst uns was bauen.


Nick: Wie genau ging es dann weiter?


Birgit: Dementsprechend gab es dann die Auswahl von 10 bis 15 PageBuildern, die alle anders arbeiteten und bei denen du eigentlich nicht mehr wechseln konntest. Also wenn du in einem PageBuilder bist, kannst du nicht mehr das Theme wechseln und in einen anderen PageBuilder wechseln, weil das alles nicht standardisiert war. Das war ein ganz großer Dorn im Auge der Core Contributors, einfach deshalb, weil es nicht mehr das offene System ist. PageBuilder haben aus WordPress geschlossene Systeme gemacht.


Nick: War das ein reines WordPress Problem oder hatten andere Unternehmen einen eigenen Block Editor?


Birgit: Andere Firmen wie Squareface, Wix, Canvas oder Mailchimp kamen alle mit Block Editoren, wie Javascript basierte Editoren, die zusammen mit dem Social Networking – ob Twitter oder Facebook – ganz einfache Mechanismen genommen haben, um Content ins World Wide Web zu stellen. Und diese Einfachheit gab es eben bei WordPress nicht. Das musste immer noch über die sog. WordPress Toolbar gemacht werden. Wenn du zum Beispiel ein Image mit einer close Caption haben willst, dann warst du schon mal außen vor, weil das irgendwie nicht ordentlich ging […]. Das sind dann einfach Dinge gewesen, die der Verbraucher von den anderen Systemen gelernt hat und dieser kommt dann zu WordPress und hat das nicht.


Nick: Wie lange hat Gutenberg auf sich warten lassen?


Birgit: Das hat sich dann natürlich schon lange hingezogen und es waren dann gute 10 Jahre bis der Gutenberg Editor endlich herauskam, denn sie hatten versucht, andere Modelle zu bauen. Automattic hat verschiedene Tests gemacht, teilweise mit Calypso.


Nick: Wann bist du das erste Mal so richtig in Kontakt mit Gutenberg gekommen?


Birgit: Ich glaube 2015 oder 2016 waren die ersten Versuche eines Proof of Concept in WordPress, also zwei Jahre bevor ich überhaupt davon gewusst habe. Ich bin das erste Mal wirklich beim WordCamp Europe in Paris 2017 damit in Berührung gekommen, über die Keynote von Matt Mullenweg, der ein kleines Video gezeigt hat. Als ich das Video gesehen habe, habe ich gedacht: Mensch, das ist das nächste WordPress. WordPress ist wieder zurück für jemanden, der Inhalte produzieren muss. Du hast eine ganz klare Struktur, egal ob es ein Paragraph ist oder ein Video Padding, es ist alles sehr visuell und man kann im Editor schon sehen, wie das nachher ausschaut.


Das war also die Idee und das war auch das, was angestrebt wurde. Und aus meiner Erfahrung wusste ich, als ich mal 40 Webseiten auf WordPress umgestellt habe, dass die das richtig begrüßen würden. Deswegen habe ich mich auch sehr dafür interessiert und meinen ersten Newsletter über Gutenberg gemacht, bevor ich die Gutenberg Times hatte.


Mehr zur Geschichte von Birgit und der von Gutenberg hörst du ganz exklusiv in unserem Podcast „Hör mal wer da Hosted“.

4. Warum wurde Gutenberg entwickelt – die Entwicklungsphasen

Gutenberg wurde im Rahmen von großzügigen Erneuerungs- und Weiterentwicklungsmaßnahmen entwickelt, nachdem die Kritik an einem eigenen PageBuilder für WordPress immer größer wurde. Das Gutenberg Projekt wurde erstmals 2017 mit WordPress 5.0 vorgestellt und hat bisher 6 Jahre der Entwicklung hinter sich.


Das Projekt Gutenberg umfasst dabei insgesamt vier Entwicklungsphasen, die bis dato noch nicht abgeschlossen sind. Ein Ende der Entwicklung ist voraussichtlich für die Jahre 2024 oder 2025 geplant. Aktuell befindet sich Gutenberg mit dem Major Update WordPress 6.4 am Anfang der dritten Entwicklungsphase.


Mehr zur Entwicklungs-Geschichte Gutenberg findest du hier.


Die vier Entwicklungsphasen beinhalten folgende Inhalte, Veränderungen und Features:


Gutenberg Entwicklungsphase 1 – Einfaches Bearbeiten


Die erste Phase von Gutenberg enthält die Erstellung und Bearbeitung von WordPress-Seiten und Beiträgen und somit die Implementierung des Block Editors in WordPress 5.0. Die Bearbeitung von Posts und Seiten wurde damit das Grundgerüst und die Architektur von Gutenberg.


Gutenberg Entwicklungsphase 2 – Anpassung


Nach WordPress 5.9 ging es 2021 und 2022 insbesondere auch um die Akzeptanz-Förderung von Gutenberg in der Community, indem das WordPress-Entwicklungs-Team Full Site Editing (und dessen Tools) einfach auffindbar, nutzbar und zugänglicher machten. Dazu wurden auch eine Reihe von neuen Bearbeitungsfunktionen eingeführt, die es ermöglichten, Blöcke für die gesamte Webseitenerstellung zu verwenden. Inhalte und Themen waren hier unter anderem die Webseiten-Bearbeitung, Blockmuster, das Blockverzeichnis und Blockthemes.


Das Site Editing und die individuelle Anpassung der Seiten mit Themes waren die zentralen Faktoren dieser Phase.


Mehr Informationen zu Phase zwei findest du im WordPress Github Channel.


Gutenberg Entwicklungsphase 3 – Kollaboration


Die dritte Phase von Gutenberg beschäftigt sich mit dem sog. Collaborativen Editing, wobei sich mit Workflows und der Echtzeit-Zusammenarbeit innerhalb von WordPress auseinandergesetzt wird. Hierbei geht es insbesondere darum, gemeinschaftlich an einer Seite oder einem Beitrag zu arbeiten, ähnlich wie bei der Bearbeitung von Google Docs.


Die Gutenberg Ziele für 2023:


  • CMS
  • Community
  • Ecosystem

Gutenberg Entwicklungsphase 4 – Mehrsprachigkeit


Die schließlich letzte Phase von Gutenberg soll die Kernimplementierung für mehrsprachige Webseiten beinhalten. Dabei ist das übergeordnete Ziel, WordPress mit dieser letzten Instanz wieder zu einem offenen und freien System zusammenzubringen, in dem die Nutzer im neuen Standardsystem Gutenberg gemeinsam arbeiten können.


Oft gestellte Fragen zu Gutenberg findest du in den Gutenberg FAQ’s.

5. Funktionen von Gutenberg

Blöcke


Gutenberg ist ein Block Editor und basiert auf der Verwendung von Böcken. Blöcke beschreiben eine abstrakte Einheit zur Strukturierung und Interaktion mit Inhalten. Bei der Zusammensetzung der Blöcke ergeben diese schließlich ein Gesamtbild der Webseite.


Diese Blöcke gibt es in verschiedensten Formen und Ausführungen und sind gleichzeitig die Schnittstelle zwischen Site Editor und Webseiten-Builder. Sie können eingefügt, verschoben, neu geordnet, kopiert, dupliziert, umgewandelt, gelöscht, gezogen und kombiniert werden. Einmal verwendete Blöcke mit Inhalten können auch wiederverwendet und in anderen Beiträgen eingefügt werden.


Zusammensetzbarkeit von Blöcken


Die Vielfalt der Blöcke ist dazu gedacht, sie auf unterschiedlichste Weisen zu kombinieren und dadurch einen individuellen Stil kreieren zu können. Die hierarchische Verwendung von Blöcken ist insofern zentral für die Benutzung, da dadurch Verschachtelungen entstehen können. Ein Beispiel zum besseren Verständnis: Ein Spaltenblock kann der übergeordnete Block für mehrere untergeordnete Blöcke wie Medien- oder Textblöcke sein.

Blöcke mit Gutenberg hinzufügen.
Blocktransformationen


Blöcke können auch in andere Blocktypen umgewandelt werden. Dies ermöglicht einfache Umstellungen zum Beispiel von einem Absatz-Block in eine Überschrift, aber auch kompliziertere Umwandlungen von mehreren Bildern in eine Galerie sind möglich. Diese Art der Blocktransformation funktioniert sowohl für einzelne Blöcke, als auch für die Auswahl von mehreren Blöcken.

Wiederverwendbare Blöcke


Wiederverwendbare Blöcke wurden bereits kurz erwähnt. Diese sind Blöcke, die an verschiedenen Stellen eingefügt, bearbeitet und verwendet werden können. Trotzdem bleibt er in allen anderen Anwendungen synchronisiert. Wenn ein wiederverwendbarer Block an einer Stelle bearbeitet wird, werden diese Änderungen in allen Beiträgen und Seiten, die diesen Block verwenden, übernommen. Beispiele für wiederverwendbare Blöcke sind Blöcke, die aus einer Überschrift, deren Inhalt und einer benutzerdefinierten Farbe bestehen und auf mehreren Seiten der Website angezeigt werden.


Dazu gehören außerdem auch Sidebar-Widgets, die auf jeder Seite angezeigt werden. Bei Änderungen an wiederverwendbaren Blöcken werden diese bei jeder Verwendung angezeigt. Das spart dem User Zeit, da die Änderungen nicht an jedem gleichen Beitrag von Hand vorgenommen werden müssen.


Intern werden wiederverwendbare Blöcke als versteckter Beitragstyp (wp_block) gespeichert. Sie sind dynamische Blöcke, die auf die post_id verweisen und den post_content für diesen Block zurückgeben.

Blöcke bei Gutenberg kopieren.
Daten und Attribute


Block-Inhalte können auch als Attribute bezeichnet werden, zu diesem Zweck gibt es für Gutenberg eine neue Block-Grammatik in Form eines HTML-Kommentars, welcher entweder ein selbstschließender Tag ist oder mit einem Anfangs- und End-Tag versehen ist. Im Haupt-Tag kann, je nach Blocktyp und Benutzeranpassungen, ein JSON-Objekt enthalten sein. Diese Rohform des Blocks wird als serialisiert bezeichnet.


Beispiel:



<!-- wp:paragraph {"key": "value"} -->
<p>Welcome to the world of blocks.</p>
<!-- /wp:paragraph -->


Blöcke können statisch oder dynamisch sein. Statische Blöcke enthalten gerenderte Inhalte und ein Objekt von Attributen, das bei Änderungen neu gerendert wird. Dynamische Blöcke erfordern serverseitige Daten- und Rendering, während der Inhalt des Beitrags generiert wird (Rendering). Jeder Block enthält Attribute oder Konfigurationseinstellungen, die aus Roh-HTML im Inhalt über Meta oder andere anpassbare Ursprünge bezogen werden können.

Muster


Gutenberg bietet zahlreiche Muster und Vorlagen an. Die Blockmuster sind Gruppen von Blöcken, die zu Designmustern kombiniert wurden. Die Designmuster bieten den Nutzern Anhaltspunkte für eine schnelle Erstellung fortgeschrittener und professioneller Seiten und Layouts. Die Blockmuster erstrecken sich von kleinen einzelnen Blöcken bis hin zu ganzen Seiten.


Im Gegensatz zu den wiederverwendbaren Blöcken bleiben Muster und Vorlagen nicht mit nur einem Inhalt synchron. Die Muster können mehrfach angewendet und jeweils mit unterschiedlichen Inhalten befüllt werden. Die Muster können also vom Benutzer bearbeitet und angepasst werden. Hinter der Vorlage verbergen sich im Grunde nur normale Blöcke, die zu einer fertigen Vorlage zusammengefasst wurden. Die WordPress Themes können Muster hinterlegen, um den Benutzern einfache Vorlagen zu bieten, die sowohl zum Theme passen, als auch damit gut funktionieren.

Templates


Während sich der Block-Editor auf den Inhalt eines Beitrags konzentriert, ermöglicht der Vorlagen-Editor die Deklaration und Bearbeitung einer gesamten Webseite mit Blöcken, von der Kopf- bis zur Fußzeile. Vorlagen werden unterteilt in Vorlagen (die eine ganze Seite beschreiben) und Vorlagenteile (die wiederverwendbare Bereiche innerhalb einer Vorlage beschreiben, einschließlich semantischer Bereiche wie Kopfzeile, Seitenleiste und Fußzeile).


Diese Vorlagen und Vorlagenteile können zusammengesetzt und von einem Theme registriert werden. Sie können auch vollständig von den Nutzern mit dem Block-Editor bearbeitet werden; eine Sammlung von Blöcken, die mit verschiedenen Eigenschaften und Einstellungen der Website interagiert (z. B. Titel der Website, Beschreibung, Logo, Navigation usw.), ist besonders nützlich bei der Bearbeitung von Vorlagen und Vorlagenteilen. Angepasste Vorlagen werden in einem wp_template-Post-Typ gespeichert. Blockvorlagen umfassen sowohl statische als auch dynamische Seiten, wie Archive, Singular, Home, 404 usw.


💡 Hinweis


Benutzerdefinierte Beitragstypen können auch mit einer Startvorlage post_content initialisiert werden, die nicht mit dem oben beschriebenen Themenvorlagensystem verwechselt werden sollte.


6. Vorteile von Gutenberg

Obwohl die Absicht hinter Gutenberg eine sehr gute ist, sehen viele Nutzer das Projekt sehr kritisch. Trotzdem stecken hinter dem Gutenberg Block Editor von WordPress unzählige Arbeitsstunden und eine Community, die WordPress für seine Benutzer weiterentwickeln möchte.


✅ WordPress interne Lösung – zurück zu einem offenen Standardsystem


Die PageBuilder haben WordPress von einem offenen zu einem geschlossenen System gemacht – obwohl WordPress mit die bekannteste Open-Source-Software weltweit ist. Der Gutenberg Block Editor dient damit als interner WordPress Core Page- und Webseiten-Builder, wodurch WordPress wieder vollumfänglich als ein offenes System verwendet werden kann. Dadurch müssen sich Nutzer keine Sorgen mehr um die Kompatibilität ihres PageBuildes machen. Denn Gutenberg bietet die Möglichkeit nicht nur Beiträge und Einzel-Seiten individuell zu gestalten, sondern soll als ganzeheitlicher Webseiten Editor einsatzfähig sein. Damit geht WordPress einen großen Schritt in Richtung einer besseren Zugänglichkeit. Durch die vielfältigen Funktionen – und jene, die noch kommen – bietet dir Gutenberg die Möglichkeit, Veränderungen vorzunehmen, ohne dafür die Code-Struktur, JavaScript oder PHP bearbeiten zu müssen.


✅ Regelmäßige (Weiter)Entwicklung am Nutzer 


Ein sehr spannender Vorteil an Gutenberg liegt in der Art der Weiterentwicklung. Die WordPress Entwickler bringen mit Gutenberg ein Produkt auf den Markt, welches sich seit Jahren von der Community gewünscht wird. Dieses wird allerdings nicht erst als fertiges Gesamtpaket released sondern Stück für Stück zusammengesetzt, so wie es sich die Community wünscht. Es wird also zunächst einmal ein Grundgerüst mit Funktionen geschaffen und geschaut, was hier noch hinzugefügt werden kann, welche Funktionen und Features die Nutzer benötigen und eben darauf aufgebaut. Die Core Updates von WordPress werden speziell dazu genutzt, das Feedback der Nutzer zu bearbeiten, Fehler zu überprüfen und zu verbessern und an neuen Funktionen für Gutenberg zu arbeiten. Nur so können beispielsweise die Mehrsprachigkeit bei WordPress oder kollaboratives Arbeiten an Seiten und Beiträgen Nutzergerecht bei WordPress integriert werden.


Ganz demokratisch also.


✅ Schlanker Code


Bei der Auseinandersetzung mit Gutenberg triffst du immer wieder auf einen Hinweis: er hat eine schlanke Code-Struktur. In der Konsequenz bedeutet das, dass der Gutenberg Block Editor die Designs in der Regel schneller lädt, als vergleichbare Inhalte mit einem anderen PageBuilder. Die Performance von Gutenberg hat sich damit insgesamt schon sehr verbessert. Außerdem musst du für die Verwendung von Gutenberg überhaupt nicht coden können.


✅ Große individuelle Anpassungen möglich


Durch das Blockbasierte Erstellungs-System hast du mit Gutenberg die Möglichkeit, deine Webseite komplett individuell zu gestalten. Dabei werden dir deine Inhalte direkt so angezeigt, wie sie auf der fertigen Webseite dargestellt sind, wodurch insbesondere die visuelle Gestaltung deiner Seiten einfacher wird. Darüber hinaus musst du mittlerweile keine Shortcodes mehr verwenden, um Inhalte einzubetten und auch eigene Plugins kannst du über einen Block einfügen.


✅ Barrierefreiheit


Gutenberg steht regelmäßig auf der Liste des Accessibilitiy Teams von WordPress. Der Output von Gutenberg – also das, was wir im Frontend sehen – ist vollständig barrierefrei. Ebenso wie die Core-Blöcke von Gutenberg, die ausgiebig getestet werden. Im Backend wird dauerhaft an der Barrierefreiheit weiterentwickelt, so dass die Einstellungs-Bar beispielsweise nun verbessert und angepasst wurde. Da der Aufbau einer Seite sehr komplex ist, wird hier durchgehend an Verbesserungen und Weiterentwicklungen gearbeitet, um Gutenberg und auch WordPress bestmöglich barrierefrei zu gestalten.

7. Nachteile von Gutenberg

Obwohl die Absicht hinter Gutenberg eine sehr gute ist, sehen viele Nutzer das Projekt sehr kritisch. Schaust du dir die Kritiken im WordPress Repo an, schneidet Gutenberg mit 2 Sternen bei über 3000 Bewertungen wirklich nicht besonders gut ab. Aber woran liegt das eigentlich?


❌ Laufende Entwicklung


Gutenberg befindet sich zur Zeit noch in der Entwicklung. Das bedeutet, dass viele Funktionen erst in den letzten Monaten und wenigen Jahren hinzugefügt wurden und oftmals fehleranfällig sind oder nicht richtig konfiguriert wurden. In der direkten Nutzung fällt das den Benutzern natürlich auf, denn erst gibt es viele wichtige Funktionen oder Erweiterungen noch nicht und dann funktionieren diese vielleicht nicht optimal. Der Unmut lässt sich daher durchaus verstehen, nichtsdestotrotz befindet sich Gutenberg noch eine Zeit lang in der finalen Ausarbeitung.


❌ Das Rad wurde nicht neu erfunden


Viele Features, die WordPress mit Gutenberg systemintern integriert, gibt es bereits bei bekannten PageBuildern wie Elementor oder Beaver Builder. Die Entwickler haben mit dem Release von Gutenberg das Rad natürlich nicht neu erfunden und erweitern WordPress um Funktionen, die andere bereits seit Jahren verwenden. Hier stellt sich bei vielen Benutzern natürlich die Frage, warum sie jetzt Gutenberg, eigentlich benutzen sollten, wenn sie mit ihrem aktuellen PageBuilder gute Erfahrungen machen. Dazu kommt noch, dass viele PageBuilder immer noch flexiblere Design- oder Layout-Optionen anbieten, die sich bereits seit vielen Jahren bewährt haben und zudem flüssiger arbeiten.


❌ Lange Entwicklungszeit


Kommen wir damit auch zum nächsten Punkt, denn nicht nur die bisher lange Entwicklungszeit von 6 Jahren ist ein negativer Aspekt, sondern dass WordPress grundsätzlich mit Gutenberg einige Jahre zu spät dran ist. Elementor wurde bereits im Jahr 2005 und BeaverBuilder 2007 released, wohingegen die erste Veröffentlichung des Gutenberg Projektes erst 10 Jahre später kam. Aber bedeutet das für WordPress 10 Jahre Verlust? Ein ganzes Jahrzehnt kann in dieser sehr schnelllebigen technologischen Zeit sehr viel sein, dennoch gilt es abzuwarten, wie sich der Gutenberg Editor in der kommenden Zeit etabliert.


Was die Bewertungen von Usern kritisieren:


  • stark fehlerhaft
  • nicht intuitiv
  • wenig benutzerfreundlich

Trotz vieler schlechter Bewertungen gibt es auch sehr viele positive Stimmen, die dafür sprechen, dass sich Gutenberg weiterentwickelt hat. Beim Lesen der Kommentare fällt leider auch auf, dass viele Kommentare unqualifiziert sind und sich diese nicht unbedingt auf faktische Probleme von WordPress oder Gutenberg beziehen. Daher werden diese hier zwar erwähnt, aber kein Fokus darauf gelegt.


Was gefällt euch nicht an Gutenberg? Werde Teil der Lösung und gib uns dein Feedback zu Gutenberg in den Kommentaren.

8. Die praktische Anwendung von Gutenberg

In die Oberfläche von Gutenberg musst du dich erst einmal etwas einarbeiten, denn ähnlich wie bei Elementor gibt es viele versteckte Einstellungen. Zunächst mögen die ganzen Möglichkeiten verwirrend sein, nach ein bisschen Praxis-Erfahrung wird die Seiten-Bearbeitung mit Gutenberg aber immer intuitiver.
Die Gutenberg Toolbar Einstellungen
Blöcke verwenden


Bei der Anwendung starten wir einmal ganz vorne. Möchtest du einen Beitrag erstellen, öffnest du zunächst einmal einen neuen Beitrag in deinem WordPress. Darüber landest du dann im Gutenberg Editor und solltest eine leere, weiße Seite vorfinden. Bei uns ist standardmäßig ein Headline- und Absatz-Block auf der Seite zu finden. Um weitere Blöcke, Vorlagen oder Header hinzuzufügen hast du nun zwei Optionen:


  1. Du klickst auf das schwarze in der Mitte des Bildschirms – sozusagen als schnelle Variante
  2. Du klickst auf das blaue Plus oben links, so dass sich die Block-Toolbar öffnet

Die Toolbars kennen und verwenden


  • Block-Toolbar

In der Toolbar findest du nun zunächst Blöcke, die in verschiedene Kategorien unterteilt sind, wie Text, Medien, Design, Theme, Einbettungen und auch Blöcke von zusätzlichen Plugins wie zum Beispiel Yoast. Direkt neben den Blöcken befinden sich die Vorlagen und Medien mit verschiedenen Kategorien, aus denen du weitere Inhalte wählen kannst. Um einen Block zu deiner Seite hinzuzufügen, musst du einfach auf den Block in der Tool-Bar klicken und dieser reiht sich unter den bestehenden Blöcken ein.


  • Die Werkzeugleiste

Es gibt bei Gutenberg drei verschiedene Toolbars, mit denen du die Blöcke bearbeiten und konfigurieren kannst. Wir empfehlen dir die Werkzeugleiste am oberen Seitenrand des Editors anzupinnen, um so einen schnelleren Zugriff auf die Leiste während der Seiten-Bearbeitung zu haben. Das geht so:


  • Klicke auf die drei Punkte oben rechts im Editor.
  • Es öffnet sich eine Leiste mit verschiedenen Einstellungen.
  • Klicke hier direkt das erste Feld „Obere Werkzeugleiste“ an, sodass ein Haken dahinter erscheint.
  • Deine Werkzeugleiste erscheint jetzt am oberen Rand und du kannst beim Bearbeiten schneller darauf zugreifen.

Die Werkzeugleiste kannst du ein und ausklappen. Sofern du gerade keinen Block angeklickt hast, beinhaltet diese Elemente zum Text ausrichten, einen Absatz-Block, einen Zitat-Block und allgemeine Einstellungen. Sobald du einen Block in deinem Beitrag anklickst, erweitert sich die Werkzeugleiste um passende Einstellungs-Optionen zum jeweiligen Block. Je nach Block variieren diese Einstellungen.


Am Beispiel eines Absatz-Text-Blocks kannst du dir in diesem Video einmal die Einstellungs-Optionen der Werkzeugleiste genauer anschauen:

  • Die Sidebar

Die rechte Seitenleiste, die Sidebar, öffnest du über das schwarze Kästchen oben rechts. Darin enthalten sind die Bereiche Beitrag und Block.


Beitrag


Im Bereich Beitrag findest du allgemeine Einstellungen zu deiner Seite oder deinem Beitrag, in dem du dich gerade befindest. Sichtbarkeit, Veröffentlichung, URL, Autor etc. Hier kannst du dann allgemeine Einstellungen vornehmen und bspw. deine SEO Caption in Yoast hinterlegen, ein Beitragsbild hinzufügen, Schlagwörter notieren oder Kategorien zuordnen.


Block


Unter Block findest du weitere Einstellungsmöglichkeiten zu dem Block, welchen du gerade bearbeitest. Am Beispiel eines Absatz-Text-Blocks kannst du hier sehen, welche Einstellungen du tätigen kannst:

Die Reihenfolge von Blöcken ändern


Das ändern der Block-Reihenfolge ist ebenfalls kein Problem –aber auf den ersten Block etwas versteckt. Klicke dazu in der oberen Werkzeugleiste auf diese drei Striche um die Listenansicht zu öffnen. Hier kannst du den Block deiner Wahl einfach anklicken und an die gewünschte Stelle ziehen.


Weitere spannende Funktionen- und Anwendungsbeispiele


Tastaturkürzel


Achte beim Hovern über die Einstellungssymbole mal auf die aufleuchtenden Infos. Na, fällt dir was auf? Bei vielen Aktionen erscheinen Tastaturkürzel, über die du die jeweilige Aktion ebenfalls steuern kannst und die manchmal viel effizienter sein können. Eine ganze Liste der Tastaturkürzel findest du, wenn du oben rechts auf die drei kleinen Punkte klickst. Darüber wählst du dann den Punkt Tastaturkürzel aus und schon hast du einen Überblick.


Inhalte einbetten


Über die linke Toolbar kannst du unter Blöcke die sog. „Einbettungen“ bei Blöcken finden. Darüber kannst du zum Beispiel total einfach Youtube-Videos, Twitter-, Pinterest-Posts oder deine Lieblings Spotify Playlist in deine Seite integrieren.


An unserem Beispiel haben wir das Video über unseren Besuch im Rechenzentrum der KÜS Video genommen. Klicke auf den gewünschten Block und kopiere in das Link-Feld den direkten Link des Videos. Nach dem Bestätigen erscheint an dieser Stelle das Video.

Inhalte einbetten über Blöcke
Mehr-Spalten-Layout


Natürlich kannst du Blöcke nicht nur untereinander, sondern auch in mehreren Spalten nebeneinander platzieren. Um diesen Spalten-Block einzusetzen öffnest du über das blaue Plus-Symbol die linke Toolbar und suchst entweder nach dem Begriff Spalten oder schaust weiter unten in der Gruppe Design nach dem Spalten-Block. Hierüber kannst du jetzt auswählen, ob du ein, zwei oder drei Spalten in verschiedenen Konfigurationsmöglichkeiten hinzufügen möchtest. Anschließend kannst du die Spalten ganz normal mit weiteren Inhaltsblöcken wie dem Absatz-Block, Bildern, Zitaten oder Buttons bestücken.

Ein Beispiel, welche Optionen es gibt, um Blöcke in der Breite nebeneinander anzuordnen. Hier siehst du auch, welche Blöcke es in dieser Kategorie noch gibt.

💡 Unser SECRET TIPP


Ein Shortcut für das Hinzufügen von Blöcken ist die Verwendung eines Schrägstrichs “ / „. Gib dazu einfach in einem Textfeld beispielsweise „/Image“ – also „/ plus den Blocknamen“ – ein, drücke auf Enter und schon erscheint der gewünschte Block. Dieser Weg ist wesentlich schneller und mit nur wenigen Schritten zu erledigen. Wenn du gerade so richtig im Workflow bist, kannst du dir das das ewige hin und her Klicken ersparen.


Probiere es doch mal aus. 🤫


9. Fazit

Gutenberg ist ein großer Gewinn für WordPress, insbesondere da WordPress nun einen Editor erhält, der modernste Möglichkeiten zur Beitrags- und Webseitengestaltung bietet. Damit macht WordPress deutliche Schritte in die Zukunft und holt mit anderen PageBuildern auf. Gutenberg steht bisher immer noch bei vielen in der Kritik. Allerdings lohnt es sich auf jeden Fall, sich einmal detailliert mit Gutenberg auseinanderzusetzen und zu schauen, welche Funktionen und Tools mit den Entwicklungsphasen dazugekommen sind.


Denn hier hat sich der Gutenberg Block Editor ganz schön weiterentwickelt und wird auch mit den nächsten Updates einige tolle, neue Funktionen für uns bereithalten. Die Flexibilität und Vielfältigkeit, mit dem Block Editor sowohl Beitragsseiten als auch die Webseite selbst zu gestalten, ist mehr oder weniger ein tolles 2 in 1 Tool, mit dem in wenigen Handgriffen ein individuelles Design gestaltet werden kann.


Manchmal braucht es dazu aber ein bisschen Einarbeitungszeit und Vertrauen in neue Tools – wie Gutenberg.


Werde Teil der Lösung – Hinterlasse uns einen Kommentar welche Funktionen wir dir näher erklären sollen oder was dir hier noch fehlt und hilf uns so, Gutenberg noch transparenter werden zu lassen.

Picture of Johanna

Johanna

Schreibe einen Kommentar

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