Das Neueste aus dem Gutenberg WordPress Editor (2021)

Als der WordPress Block-Editor, oder Gutenberg, im Dezember 2018 vorgestellt wurde, wussten wir nicht, was wir erwarten würden. Sicher, wir hatten genug Zeit, um mit der Beta-Version herumzuspielen, aber wir konnten nicht vorhersagen, wie reibungslos der tatsächliche Start verlaufen würde oder wie eifrig Nutzer und Entwickler den neuen Editor annehmen würden.

In den mehr als zwei Jahren, seit wir diesen Beitrag veröffentlicht haben, hat der Gutenberg-Editor ein enormes Wachstum erlebt. Er hat sich von einem Minimum Viable Product (MVP) zu einem ausgereiften Projekt entwickelt, das dem Ziel, eine einheitliche Full Site Editing Experience für WordPress zu schaffen, immer näher kommt.

Um diesen Veränderungen Rechnung zu tragen, haben wir uns den Gutenberg-Editor noch einmal angeschaut, um dir sein neues Gesicht vorzustellen und dir zu zeigen, wohin es demnächst gehen wird.

Was ist der Gutenberg-Blockeditor?

Gutenberg, auch bekannt als der „WordPress-Block-Editor“ oder einfach der „WordPress-Editor“, ist der WordPress-Inhaltseditor, der mit WordPress 5.0 eingeführt wurde, das am 6. Dezember 2018 veröffentlicht wurde.

Falls du diesen Begriff noch nicht gehört hast, es ist der Standard-Editor, den alle deine Webseiten verwenden, sofern du ihn nicht ausdrücklich deaktiviert hast. Er sieht in etwa so aus:

Der große Unterschied zwischen dem Gutenberg WordPress-Editor und dem vorherigen WordPress-Editor (jetzt „klassischer Editor“ oder „TinyMCE-Editor“ genannt) ist ein neuer blockbasierter Ansatz zur Erstellung von Inhalten.

Mit Gutenberg ist jedes Element deines Inhalts ein Block, was eine einfache Manipulation von Inhalten ermöglicht. Jeder Absatz ist ein Block, jedes Bild ist ein Block, jeder Button ist ein Block – du verstehst es!

Entwickler von Drittanbietern können auch eigene Blöcke erstellen, was dazu beiträgt, die Abhängigkeit von WordPress von Shortcodes zu beenden. Sagen wir, du möchtest ein Kontaktformular einbetten. Anstatt wie früher einen Shortcode (z.B. `[your-form-shortcode]`) hinzuzufügen, kannst du jetzt einfach den Block deines Plugins einfügen.

Darüber hinaus kannst du Blöcke auch nutzen, um komplexere Layouts zu erstellen, wie z.B. ein mehrspaltiges Design oder die Gruppierung von Blöcken, um einen zusammenhängenden Abschnitt zu erstellen.

Wenn wir dir zeigen, wie du den Block-Editor verwendest, wirst du eine bessere Vorstellung davon bekommen, wie du Blöcke nutzen kannst, um deine Inhalte zu verbessern.

Gutenberg wurde im Dezember 2018 eingeführt und seitdem hat sich viel verändert! 🚀 Schau dir diese aktualisierte Anleitung an, um mehr zu erfahren ⬇️Click to Tweet

Gutenberg ist nicht nur ein Content Editor

Eine wichtige Sache, die man verstehen muss, ist, dass das Gutenberg Projekt mehr als nur ein Content Editor sein will.

Im Juli 2021 ist Gutenberg immer noch nur ein Content Editor (zum größten Teil). Aber das langfristige Ziel für Gutenberg ist es, es zu etwas zu entwickeln, das Full Site Editing genannt wird.

Die Idee des Full Site Editing ist, dass du 100% deiner Webseite mit dem Gutenberg-Editor gestalten kannst. Anstatt auf die Header-Optionen deines WordPress-Themes beschränkt zu sein, wirst du Gutenberg nutzen können, um individuelle Header mit dem Block-Editor zu gestalten.

Diese Art von Funktionalität ist noch nicht verfügbar, aber sie ist auf dem Weg und wir haben einige „Proof of Concept“-Projekte, die wir dir am Ende dieses Beitrags vorstellen werden.

Vor- und Nachteile von Gutenberg im Vergleich zu beliebten Alternativen

Jetzt, wo wir den WordPress-Blockeditor seit über zwei Jahren nutzen können, haben wir eine gute Vorstellung von einigen Vor- und Nachteilen von Gutenberg im Vergleich zu anderen Lösungen.

Es gibt zwei Hauptalternativen, die du für die Erstellung von Inhalten auf WordPress hast:

• WordPress TinyMCE Editor: Dies ist der klassische Editor, den WordPress vor WordPress 5.0 verwendet hat.
• Page Builder Plugins: Das sind Plugins von Drittanbietern, die WordPress ein visuelles Design per Drag-and-Drop hinzufügen.

Im Allgemeinen bietet der klassische TinyMCE-Editor eine eher abgespeckte, Word-Prozessor-ähnliche Erfahrung, während Page Builder eine viel flexiblere visuelle, Drag-and-Drop-Design-Erfahrung bieten.

Wenn wir alle drei Editoren nach ihrer Design-Flexibilität ordnen würden, würde es ungefähr so aussehen:

Classic TinyMCE Editor (am wenigsten flexibel) < Gutenberg < Page Builder (am flexibelsten)

Lass uns nun über einige Vor- und Nachteile des Gutenberg-Blockeditors vs. Alternativen sprechen.

Gutenberg vs. Klassischer Editor: Vorteile und Nachteile

Lasst uns zunächst Gutenberg vs. den klassischen TinyMCE Editor vergleichen.

Vorteile:

• Gutenberg bietet einen mehr visuellen Design-Hintergrund
• Du musst keine Shortcodes verwenden, um Inhalte einzubetten – du bekommst ein einheitliches Blocksystem

Nachteile:

• Manche Leute finden das Schreiben in Gutenberg etwas unhandlich, weil jeder Absatz ein eigener Block ist. Bei langen Beiträgen kann es schwierig sein, den Text zu bearbeiten. Vielleicht schreibst du lieber in einem anderen Editor und fügst den Text in Gutenberg ein, wenn du fertig bist.
• Auch wenn sich die Performance von Gutenberg deutlich verbessert hat, kann es bei großen Beiträgen immer noch zu Verzögerungen kommen, was beim klassischen Editor weniger wahrscheinlich ist.

Wenn du denkst, dass der klassische TinyMCE-Editor besser zu deinen Bedürfnissen passt, kannst du den Gutenberg-Editor ganz deaktivieren.

Gutenberg vs Page Builders: Vorteile und Nachteile

Werfen wir nun einen Blick darauf, wie Gutenberg im Vergleich zu Page Builder Plugins von Drittanbietern abschneidet.

Vorteile:

• Gutenberg ist ein Core-Feature, was bedeutet, dass du dir keine Gedanken über Kompatibilitätsprobleme machen musst.
• Da es ein Core-Feature ist, können alle Entwickler Gutenberg Support in ihre Plugins einbauen, was die Kompatibilität verbessert.
• Gutenberg gibt sauberen, schlanken Code aus. Alles in allem wird ein mit Gutenberg erstelltes Design in der Regel schneller geladen als das gleiche Design, das mit einem Page Builder erstellt wurde.

Nachteile:

• Gutenberg bietet keine richtige visuelle Bearbeitung wie ein Page Builder. Es ist zugänglicher als der klassische Editor, aber immer noch nicht 100% nahtlos wie ein Page Builder.
• Page Builder bieten dir immer noch flexiblere Design- und Layout-Optionen.
• Die meisten Page Builder bieten eine viel flüssigere und flexiblere Drag-and-Drop-Bewegung.

Gedanken zum Vergleich

Für die Mehrheit der Nutzer trifft Gutenberg den Sweet Spot in Bezug auf die Flexibilität.

Die meisten Leute brauchen nicht die Flexibilität eines Page Builders für ihre Inhalte, insbesondere für Blogbeiträge. Aber gleichzeitig ist es schön, schnell ein mehrspaltiges Design einzurichten oder einen Button einzufügen, was der klassische Editor nicht so einfach macht.

Mit diesem Gedanken im Hinterkopf wollen wir uns nun damit beschäftigen, wie du Gutenberg nutzen kannst.

Wie du den Gutenberg WordPress Block Editor verwendest

Nachdem du nun ein wenig über den Gutenberg-Block-Editor Bescheid weißt, wollen wir uns ansehen, wie du es nutzen kannst, um Inhalte zu erstellen.

Wir beginnen mit einem einführenden Blick auf das Interface und entwickeln nach und nach fortgeschrittenere Möglichkeiten, den Editor zu nutzen und deine Arbeitsabläufe zu verbessern.

Das Interface des Gutenberg Block Editors

Wenn du den Editor öffnest, blendet er die Sidebar des WordPress Dashboards aus und bietet dir ein bildschirmfüllendes Erlebnis:

Der Editor besteht aus drei Hauptteilen:

• Inhalt: Dein Inhalt nimmt den größten Teil des Bildschirms ein. Du siehst eine visuelle Vorschau, wie es auf der Vorderseite deiner Webseite aussehen wird. Es ist nicht 100% genau, aber du solltest eine ziemlich gute Vorstellung vom endgültigen Design haben.
• Obere Symbolleiste: Die Werkzeugleiste oben hilft dir, neue Blöcke einzufügen, rückgängig zu machen/zurückzunehmen und auf andere wichtige Einstellungen zuzugreifen
• Sidebar: Die Sidebar enthält zwei Tabs. Im Reiter Beitrag kannst du die Einstellungen auf Beitragsebene konfigurieren, wie z.B. Kategorien, Tags, Featured Image, etc. Die Registerkarte Block zeigt die Einstellungen für den Block, den du ausgewählt hast – mehr dazu später.

Um ein intensiveres Schreiberlebnis zu schaffen, kannst du die Sidebar ausblenden, indem du auf das „Zahnrad“-Symbol in der oberen rechten Ecke klickst. Um die Sidebar wieder einzublenden, musst du nur erneut auf das „Zahnrad“-Symbol klicken:

 

Hier siehst du zum Beispiel, wie das Editor-Interface aussieht, wenn du das neue Twenty Twenty-One Standard-Theme verwendest:

Blöcke hinzufügen

Um normalen Absatztext zu deinem Beitrag hinzuzufügen, kannst du einfach klicken und tippen. Jedes Mal, wenn du die Eingabetaste drückst, wird der Editor automatisch einen neuen Absatzblock erstellen.

Für andere Arten von Inhalten musst du einen neuen Block einfügen. Du wirst Blöcke für Bilder, Buttons, Videoeinbettungen, etc. verwenden.

Um einen neuen Block hinzuzufügen, kannst du auf eines der „Plus“-Symbole im Interface klicken. Es ist das Hauptsymbol für das Einfügen von Blöcken in der oberen linken Ecke, aber du wirst auch andere Symbole im Interface sehen, die ein kleineres Interface für das Einfügen von Blöcken öffnen:

Um zu beginnen, positioniere deinen Mauszeiger dort, wo du den neuen Block einfügen möchtest. Um zum Beispiel einen neuen Block unterhalb des Buttons einzufügen, könntest du unter den Button klicken und dann auf das + Symbol.

Du solltest ein Seitenpanel sehen, das alle verfügbaren Blöcke anzeigt, unterteilt in verschiedene Kategorien. Du kannst entweder nach einem bestimmten Block suchen oder einfach eine Option aus der Liste auswählen. Wenn du mit dem Mauszeiger über einen Block fährst, siehst du eine Beschreibung, was er macht und eine Vorschau.

Um den Block einzufügen, musst du ihn nur anklicken. Um zum Beispiel ein normales Bild einzufügen, klickst du einfach auf den Bildblock:

Du kannst dann den Aufforderungen zum Hochladen folgen oder ein vorhandenes Bild aus deiner Mediathek auswählen.

Wesentliche Formatierungsoptionen

Um grundlegende Formatierungsentscheidungen für deine Blöcke zu treffen, bekommst du eine schwebende Symbolleiste, die erscheint, wenn du auf einen beliebigen Block klickst.

Wenn du normalen Text formatieren willst, kannst du das hier tun:

• Fett oder kursiv hinzufügen
• Links einfügen
• Ausrichtungen ändern
• Hinzufügen von Formatierungen, wie Inline-Code, Durchstreichen und Abonnieren

Nehmen wir an, du möchtest einen Link in deinen Inhalt einfügen. Du würdest zuerst den spezifischen Text auswählen, den du verlinken möchtest – in unserem Beispiel ist das „Für andere Arten von Inhalten“. Dann kannst du auf das Link-Symbol in der Symbolleiste klicken, um die Optionen zum Einfügen von Links zu öffnen:

Erweiterte Einstellungen um Blöcke zu konfigurieren

Alle Blöcke, die du einfügst, kommen mit zusätzlichen Einstellungen in der Sidebar. Bei einigen Blöcken kannst du nur wenige Einstellungen vornehmen, während du bei anderen Blöcken mehrere Optionen hast, um das Design, das Layout, die Funktionalität, etc. zu steuern.

Um die Einstellungen eines Blocks zu öffnen, klicke den Block im Editor an, um ihn auszuwählen. Gehe dann auf den Tab Block in der Sidebar, um seine Einstellungen zu sehen.

Unten siehst du die Einstellungen für den Button-Block, der einer der flexibleren Blöcke ist. Du kannst die Farbe ändern, ihn breiter machen und vieles mehr.

Wenn du Änderungen an den Einstellungen eines Blocks vornimmst, siehst du diese Änderungen sofort im Editor.

Wiederum hat jeder Block Einstellungen, die nur für diesen Block gelten. Wenn du zum Beispiel die Einstellungen für normalen Absatztext öffnest, bekommst du nur einige grundlegende Typografie– und Farboptionen. Unten kannst du sehen, dass wir einen farbigen Hintergrund anwenden konnten, um den Text hervorzuheben:

Blöcke neu anordnen

Zusätzlich zum Kopieren und Einfügen (was du für Text wie in jedem anderen Editor auch tun kannst), bietet dir Gutenberg zwei Möglichkeiten, Blöcke neu anzuordnen.

Wenn du einen Block ein paar Positionen nach oben oder unten verschieben möchtest, kannst du die Pfeile in der Werkzeugleiste verwenden.

Für umfangreiche Verschiebungen kannst du Drag-and-Drop verwenden. Um einen Block zu ziehen und abzulegen, musst du auf das Symbol mit den „sechs Punkten“ links neben den Pfeilen klicken.

Sobald du mit der Maus auf dieses Symbol klickst und es gedrückt hältst, kannst du den Block an eine beliebige Stelle auf der Seite ziehen:

Inhalte aus anderen Quellen einbetten

Gutenberg kommt mit speziellen Blöcken zum Einbetten von Inhalten aus Drittquellen wie YouTube, Vimeo, Soundcloud, etc. Du findest alle diese Optionen im Bereich Embeds des Block-Inserters.

Um zum Beispiel ein YouTube-Video einzubetten, musst du nur Folgendes tun:

1. Füge den entsprechenden YouTube-Block hinzu.
2. Füge die direkte URL zum Video ein.
3. Klicke auf Einbetten.

Du solltest dann eine Vorschau des eingebetteten Videos im Editor sehen.

Mehrspaltige oder gruppierte Layouts erstellen

Wie wir bereits erwähnt haben, ist einer der großen Vorteile des Blockeditors gegenüber dem älteren TinyMCE-Editor, dass du komplexere Layouts erstellen kannst, ohne dich auf eigenen Code oder Shortcodes verlassen zu müssen.

Der Blockeditor kommt mit zwei Standardblöcken, die dir dabei helfen:

• Spalten: Erstelle ein mehrspaltiges Layout.
• Gruppen: Gruppiere mehrere Blöcke. Du könntest dies zum Beispiel nutzen, um eine Hintergrundfarbe für einen ganzen Abschnitt festzulegen, der hinter zahlreichen Blöcken angezeigt wird.

Beide Blöcke funktionieren nach dem Prinzip der „Verschachtelung“ von Blöcken, was bedeutet, dass du einen oder mehrere Blöcke innerhalb eines anderen Blocks anordnest.

Wir zeigen dir ein Beispiel mit dem Spaltenblock, aber das gleiche Grundprinzip gilt auch für den Gruppenblock.

Nehmen wir an, du möchtest ein zweispaltiges Layout erstellen, bei dem die Spalte auf der linken Seite einen normalen Absatztext und die Spalte auf der rechten Seite einen Button enthält.

Um loszulegen, würdest du den Block-Inserter verwenden, um den Spaltenblock hinzuzufügen. Es wird eine Aufforderung angezeigt, in der du dein bevorzugtes Layout auswählen kannst:

Für dieses Beispiel wählen wir ein zweispaltiges 50/50 Layout. Damit siehst du zwei gleichgroße Boxen mit + Icons darin. Um Inhalte einzufügen, klickst du auf das +-Symbol und öffnest das Block-Inserter-Interface:

Sobald du den ersten Block zu einer Spalte hinzugefügt hast, kannst du das + Symbol drücken, um weitere Blöcke einzufügen. Oder du kannst einen Block von außerhalb der Spaltenstruktur per Drag & Drop in die Spalte ziehen.

10 nützliche Gutenberg Tipps, um produktiver zu arbeiten

Nachdem du nun ein grundlegendes Verständnis für die Funktionsweise von Gutenberg hast, wollen wir uns nun einige wertvolle Tipps und Tricks ansehen, die dir helfen werden, den Block-Editor effektiver zu nutzen.

1. Benutze / (Schrägstrich) zum schnellen Einfügen von Blöcken

Wenn du viele Blöcke einfügen musst, kann das manuelle Öffnen des Block-Inserters ein wenig mühsam werden. Glücklicherweise gibt es einen schnelleren Weg, Blöcke nur mit der Tastatur einzufügen – / (Schrägstrich), sobald du die Namen der häufig verwendeten Blöcke gelernt hast.

Wenn du „Enter“ drückst, um einen neuen Absatzblock zu beginnen, kannst du einen Block schnell einfügen, indem du einen Schrägstrich tippst, gefolgt von dem Namen des Blocks, den du einfügen möchtest.

Während du anfängst zu tippen, siehst du eine Liste mit allen Blöcken, die deiner Anfrage entsprechen. Du kannst dann mit den Pfeiltasten der Tastatur durch die Blöcke navigieren und mit „Enter“ den Block auswählen, den du einfügen möchtest.

Hier ist ein Beispiel für das Einfügen eines Bildblocks mit Quick-Insert:

2. Einfügen von Bildern durch Ziehen von deinem Desktop

Wenn du viele Bilder einfügst, bietet der Block-Editor eine weitere zeitsparende Funktion, mit der du keinen Bildblock mehr hinzufügen musst, bevor du ein Bild hochlädst.

Stattdessen kannst du die Bilddatei einfach direkt von deinem Desktop an die Stelle ziehen, an der du es zu deinem Beitrag hinzufügen möchtest. Wenn du die Bilddatei über den Inhalt deiner Webseite ziehst, siehst du eine blaue Linie, die markiert, wo das Bild angezeigt wird.

Sobald du die Datei freigibst, lädt WordPress sie automatisch hoch und fügt einen Bildblock an der richtigen Stelle ein:

3. Benutze einige Markdown Formatierungen

Wenn du ein Fan der Markdown-Syntax für die Erstellung von Inhalten bist, wird es dich freuen zu hören, dass der Block-Editor eine begrenzte Verwendung von Markdown unterstützt – hauptsächlich für Überschriften.

Wenn du zum Beispiel einen Überschriftenblock mit einem H3-Tag einfügen willst, kannst du drei Hashtags (`###`) eingeben und dann die Leertaste drücken. Der Editor wird das automatisch in ein H3 umwandeln und dann kannst du mit der Eingabe der Überschrift fortfahren:

Angenommen, du möchtest einen noch weitergehenden Markdown Support. In diesem Fall kannst du ein kostenloses Plugin wie EditorsKit installieren, mit dem du Markdown auch für fett, kursiv und durchgestrichen verwenden kannst – wir werden etwas später in diesem Post mehr über Gutenberg-Plugins sprechen.

4. Die Formatierungsleiste am oberen Rand des Editors anheften

Wenn du es nicht magst, dass das Formatierungstool über einem Block „schwebt“, kannst du es im Block-Editor unter der oberen Toolbar anheften:

5. Kopieren eines Blocks und all seiner Einstellungen

Im Blockeditor kannst du Text wie in jedem anderen Editor kopieren und einfügen – „Strg + C“ oder mit der rechten Maustaste klicken und Kopieren wählen.

Allerdings kannst du mit dieser Methode nicht einen ganzen Block kopieren und einfügen, während seine Einstellungen erhalten bleiben. Stattdessen musst du das tun:

1. Wähle den Block aus.
2. Klicke auf das Symbol mit den drei Punkten in der Werkzeugleiste des Blocks.
3. Wähle Kopieren.

Sobald du den Block auf diese Weise kopiert hast, kannst du ihn wie gewohnt einfügen – z.B. mit „Strg + V“ oder einem Rechtsklick und der Auswahl von „Einfügen„.

6. Schnelles Auswählen des richtigen Blocks mit der Blocklistenansicht

Für die meisten Blöcke kannst du einfach auf den Editor klicken, um den Block auszuwählen. Dies kann jedoch knifflig werden, wenn du anfängst, „verschachtelte“ Blöcke zu verwenden, wie z.B. das Einfügen von Blöcken innerhalb der Spalten oder Gruppenblöcke.

Der Editor verfügt über eine Listenansicht, die du über die obere Werkzeugleiste öffnen kannst, um dies zu berücksichtigen. Die Listenansicht zeigt dir jeden Block an, auch eingerückte verschachtelte Blöcke.

Du kannst einen Block auswählen, indem du ihn in der Liste anklickst, und der Editor hebt den Block auch hervor, wenn du den Mauszeiger über ihn in der Liste bewegst.

Im Beispiel unten kannst du sehen:

• Der primäre übergeordnete Spaltenblock
• Verschachtelte Blöcke für jede Spalte
• Ein verschachtelter Gruppenblock innerhalb einer Spalte
• Ein verschachtelter Überschriftenblock innerhalb des Gruppenblocks

Um den Haupt-Elternblock auszuwählen, kannst du einfach die Listenansicht öffnen und ihn aus der Liste auswählen:

7. Öffne den Code-Editor (für einzelne Blöcke oder komplette Posts)

Einer der Vorteile des Gutenberg-Block-Editors ist, dass er es dir ermöglicht, viele Stile und Layout-Optionen zu konfigurieren, ohne auf den Code zurückzugreifen. Dennoch kann es Situationen geben, in denen du als fortgeschrittener Nutzer direkt auf den Code zugreifen möchtest.

Um dir dabei zu helfen, kommt der Gutenberg-Editor mit ein paar verschiedenen Optionen.

Erstens kannst du den Code eines einzelnen Blocks bearbeiten, was für kleinere Anpassungen wie das Einfügen einer CSS-Klasse nützlich ist. Dazu öffnest du das Dropdown-Menü in der Werkzeugleiste des Blocks und wählst Als HTML bearbeiten:

Wenn du diese Option auswählst, wird die visuelle Vorschau in einen Code-Editor für nur diesen Block umgewandelt, ohne die visuelle Vorschau anderer Blöcke zu beeinflussen:

Zweitens enthält der Editor einen benutzerdefinierten HTML-Block, mit dem du vollständige HTML-Snippets einbetten kannst. Alles was du tun musst, ist den Block hinzuzufügen und deinen Code einzufügen.

Schließlich kannst du auch den vollständigen Code-Editor für das gesamte Dokument öffnen, indem du das Dropdown in der oberen rechten Ecke oder ein Tastaturkürzel verwendest: Strg + Shift + Alt + M.

Wenn du den vollständigen Code-Editor öffnest, siehst du auch das Blockformatierungs-Markup von Gutenberg, daher kann es ein wenig knifflig sein zu navigieren:

8. Lerne die Tastaturkürzel

Der Block-Editor enthält eine Menge Tastaturkürzel, mit denen du häufige Aktionen ausführen kannst. Es lohnt sich, die Zeit zu nehmen, sie zu lernen, denn sie machen dich produktiver und ersparen dir viele sich wiederholende Mausklicks.

Hier sind einige der gebräuchlichsten Tastenkombinationen – wenn du mit einem Mac arbeitest, solltest du „Strg“ mit „Befehl (⌘)“ austauschen:

• Öffnen der Blocklistenansicht – Shirt + Alt + O
• Speichern deiner Änderungen – Strg + S
• Letzte(n) Änderung(en) rückgängig machen – Strg + Z
• Wiederholen deiner letzte Rückgängigmachung – Strg + Shift + Z
• Duplizieren des/der ausgewählten Blocks/Blöcke – Strg + Umschalt + D
• Löschen des/der ausgewählten Blocks/Blöcke – Umschalt + Alt + Z
• Einfügen eines neuen Blocks vor dem/den ausgewählten Block(s) – Strg + Alt + T
• Einfügen eines neuen Blocks nach dem/den ausgewählten Block(s) – Strg + Alt + Y

Du kannst auch einen kompletten Spickzettel mit allen Tastaturkürzeln öffnen, wenn du im Editor bist. Dafür kannst du entweder ein Tastaturkürzel verwenden – Shift + Alt + H – oder du klickst auf das Menüsymbol mit den „drei vertikalen Punkten“ (⋮) in der oberen rechten Ecke des Editors und wählst Tastaturkürzel aus dem Dropdown-Menü.

9. Dein Interface aufräumen, indem du Blöcke ausblendest

Der Block-Editor fügt standardmäßig viele Blöcke hinzu, aber du wirst wahrscheinlich nicht alle davon benutzen. Um dir dabei zu helfen, die Oberfläche aufzuräumen, enthält der Editor eine Funktion namens Block Manager, mit der du Blöcke, die du nicht verwendest, deaktivieren und ausblenden kannst:

10. Anker für Sprunglinks hinzufügen

Unser letzter hilfreicher Tipp ist die spezielle HTML-Ankerlink-Funktion des Block-Editors, mit der du Sprunglinks zu bestimmten Abschnitten deines Inhalts erstellen kannst (z.B. für ein Inhaltsverzeichnis).

Im klassischen Editor musstest du HTML-Anker mit Code manuell hinzufügen. Mit Gutenberg kannst du den Text für deinen Sprunglink einfach in das HTML-Ankerfeld im Bereich Erweitert in den Einstellungen eines jeden Blocks eingeben:

Vertiefung in fortgeschrittene Konzepte des Blockeditors

An dieser Stelle haben wir schon einiges über die Funktionsweise des Editors und einige Tipps zum effizienteren Arbeiten behandelt. Nun, da du dieses Basiswissen hast, wollen wir uns zwei etwas fortgeschrittenere Taktiken ansehen:

• Blockmuster
• Wiederverwendbare Blöcke

Block Patterns

Ein Blockmuster ist im Wesentlichen ein Template. Es ist eine Sammlung von Blöcken, die in einem Layout angeordnet sind. Es kann etwas Kleines sein, wie eine Anordnung von Buttons. Es kann auch ein Template für einen ganzen Abschnitt oder sogar eine ganze Seite sein.

WordPress kommt mit seinen eigenen eingebauten Blockmustern, und Plugin-Entwickler von Drittanbietern können auch ihre eigenen hinzufügen.

Du kannst neue Muster über den Patterns-Tab des Hauptblock-Inserters einfügen:

Sobald du das Blockmuster eingefügt hast, kannst du alle Blöcke, aus denen das Muster besteht, vollständig bearbeiten, so als ob du die Blöcke manuell hinzugefügt hättest.

Derzeit kannst du mit dem Gutenberg-Editor keine Blockmuster erstellen (es sei denn, du kennst dich mit Code aus). Du kannst dies jedoch mit dem kostenlosen Plugin Block Pattern Builder von Justin Tadlock beheben. Wenn das Plugin aktiviert ist, kannst du deine Designs mit Gutenberg erstellen und dann als Muster speichern.

Um zu beginnen, gehe zu Block Patterns > Add New, um ein neues Muster mit dem Editor zu erstellen. Stelle sicher, dass du es veröffentlichst, wenn du fertig bist:

Sobald du das getan hast, kannst du dein Blockmuster wie jedes andere einfügen – suche es in der Sektion Uncategorized:

Das WordPress-Core-Team hat auch eine offizielle Blockmuster-Bibliothek auf WordPress.org gestartet. Du kannst sie mit Copy and Paste in den Editor einfügen. Klicke einfach auf der Webseite der Blockmuster-Bibliothek auf den Button Kopieren und füge es dann in den Editor ein.

Wiederverwendbare Blöcke

Wiederverwendbare Blöcke sind eine Sammlung von einem oder mehreren Blöcken, die du als Gruppe einfügen kannst. Sie sind den Blockmustern ähnlich, aber mit einem entscheidenden Unterschied:

Während ein Blockmuster ein anfängliches Template ist, das du in jeder Instanz bearbeitest, wird ein wiederverwendbarer Block in jeder Instanz, in der du ihn einfügst, derselbe sein.

Wenn du den wiederverwendbaren Block aktualisierst, werden diese Änderungen automatisch auf alle bestehenden Instanzen angewendet.

Du könntest zum Beispiel einen wiederverwendbaren Block verwenden, um einen Call to Action (CTA) zu erstellen, der in allen deinen Inhalten gleich sein soll. Wenn du den CTA dann aktualisieren möchtest, musst du den wiederverwendbaren Block nur einmal aktualisieren, um ihn auf deiner Webseite zu ändern.

Um einen wiederverwendbaren Block im Gutenberg WordPress Editor zu erstellen, klicke und ziehe, um einen oder mehrere Blöcke auszuwählen. Dann klickst du auf die Option Zu wiederverwendbaren Blöcken hinzufügen. (Das Plugin, das wir oben erwähnt haben, lässt dich auch auf diese Weise ein Blockmuster erstellen).

Deine Blöcke werden dann gruppiert – du kannst deinem wiederverwendbaren Block einen Namen in den Einstellungen des wiederverwendbaren Blocks in der Sidebar geben.

Jetzt kannst du den wiederverwendbaren Block einfügen, indem du nach seinem Namen suchst. Du kannst `/` verwenden, um den Block schnell einzufügen:

Wenn du den wiederverwendbaren Block änderst, bekommst du eine Option, diese Änderungen zu veröffentlichen, wenn du den Beitrag aktualisierst. Und wenn du dich entscheidest, die Änderungen am wiederverwendbaren Block zu veröffentlichen, werden diese Änderungen automatisch auf jede Instanz des wiederverwendbaren Blocks angewendet:

Den Blockeditor mit Plugins erweitern

Bis jetzt haben wir uns auf die Kernfunktionen des Blockeditors konzentriert, mit ein paar Ausnahmen.

Das Tolle am Block-Editor ist jedoch, dass du ihn mit Plugins erweitern kannst, genau wie den Rest deiner WordPress Seite.

Du kannst Plugins für ein paar verschiedene Dinge verwenden:

• Neue Inhaltsblöcke hinzufügen: Plugins können neue Blöcke hinzufügen, die du in deinen Designs verwenden kannst. Es ist der häufigste Anwendungsfall für Gutenberg Plugins im Moment.
• Neue Templates/Blockmuster hinzufügen: Einige Plugins nutzen das Kern-Blockmuster-System, während andere ihre eigenen Template-Systeme erstellt haben.
• Ändere die Editoroberfläche/Features: Du kannst Plugins verwenden, um den Editor selbst zu verändern. Zum Beispiel kannst du besseren Markdown Support hinzufügen.

Neben Plugins, die speziell für Gutenberg entwickelt wurden, können auch viele andere WordPress-Plugins den Block-Editor nutzen.

Wenn du zum Beispiel ein Kontaktformular-Plugin verwendest, kann das Plugin dir einen eigenen Block zur Verfügung stellen, den du zum Einbetten deiner Formulare verwenden kannst. Das Gleiche gilt für viele andere Arten von Plugins.

Sobald du die Grundlagen des Editors beherrschst, lohnt es sich, diese Plugins zu erkunden, um zu sehen, ob du welche findest, die deine Erfahrung verbessern können.

Hier sind einige der beliebtesten Optionen zum Zeitpunkt des Verfassens dieses Beitrags:

• Ultimate Addons for Gutenberg
• Kadence Blocks
• GenerateBlocks
• Stackable
• Getwid

Du kannst mehr im Bereich der blockfähigen Plugins auf WordPress.org sehen.

Gutenberg WordPress Editor und vollständige Bearbeitung der Webseite

Wie wir bereits zu Beginn dieses Beitrags erwähnt haben, will das Gutenberg Projekt viel mehr sein als nur ein Content Editor.

Langfristig ist geplant, dass WordPress in das Full Site Editing übergeht. Es bedeutet genau das, was es sagt – das Ziel ist, dass du irgendwann in der Lage sein wirst, alle Teile deiner Webseite mit dem Gutenberg-Editor zu bearbeiten. Dazu gehören auch der Header, der Footer, die Sidebars, etc.

Anders als bei der Einführung des Block-Editors in WordPress 5.0, wird das Full Site Editing schrittweise eingeführt. Es wird ein schrittweises Hinzufügen von Features sein, wobei jede neue Version auf den vorherigen aufbaut.

Zum Beispiel wirst du ab WordPress 5.8 den Block-Editor nutzen, um die Widgets deiner Webseite zu verwalten. Du bekommst auch Zugang zu einigen neuen themenbezogenen Blöcken, wie z.B. Site Logo, Navigation, Query Loop (lässt dich Templates für Listenbeiträge erstellen) und mehr.

Während das offizielle Full Site Editing noch in Arbeit ist, haben einige unerschrockene Theme-Entwickler bereits damit begonnen, blockbasierte Themes zu veröffentlichen, die uns einige ziemlich gute Beispiele dafür liefern, wie Full Site Editing funktionieren könnte.

Zusätzlich kannst du auf einige der experimentellen Full Site Editing Features in der Plugin Version von Gutenberg zugreifen.

Also, lass uns zwei Dinge betrachten:

• Die existierenden Core Full Site Editing Features, die wir jetzt ab WordPress 5.8 haben
• Wie „volles“ Full Site Editing funktionieren könnte, basierend auf experimentellen Funktionen

Blöcke anstelle von Widgets verwenden

Ab WordPress 5.8 verwendest du nun Blöcke zur Steuerung deiner Sidebars und Footer anstelle von Widgets (standardmäßig – du kannst dies deaktivieren, wenn du möchtest).

Wenn du auf Aussehen > Widgets gehst, kannst du den Inhalt jedes Widget-Bereichs mit dem Block-Editor verwalten.

Du kannst sehen, dass jeder Widget-Bereich einen separaten Editor erhält, den du mit einem Klick auf die Akkordeon-Kippschalter öffnen kannst. Du kannst auch Blöcke zwischen verschiedenen Widget-Bereichen verschieben, indem du auf die hakenförmigen Pfeilsymbole oben klickst:

Neue Theme-Blöcke verwenden

Mit WordPress 5.8 gibt es auch neue Theme-Blöcke, mit denen du dynamische Inhalte auf deiner Webseite einfügen kannst. Diese Blöcke werden auch eine entscheidende Rolle spielen, wenn du in zukünftigen Versionen Templates für dein Theme entwirfst.

Nehmen wir an, du möchtest eine Liste deiner neuesten Inhalte auf einer Seite einbinden. Jetzt kannst du einfach den Query Loop Block hinzufügen und du kannst dynamisch Inhalte aus einem bestimmten Beitragstyp (z.B. Blogbeiträge) einfügen, einschließlich der Filterung nach Kategorien, Autoren, Keywords und mehr:

Innerhalb des Query Loop Blocks kannst du die anderen Theme Blöcke verschachteln, um das Template für den dort angezeigten Inhalt zu steuern. Zum Beispiel kannst du das Datum jedes Beitrags anzeigen, indem du den Block Post Date zu deinem Template hinzufügst.

Mit dem Query Loop-Block in WordPress 5.8 kannst du im Wesentlichen deine eigene Blog-Listing-Seite gestalten. Wenn du deine Webseite richtig bearbeitest, kannst du das auf dein gesamtes Theme ausweiten – also schauen wir uns das als nächstes an.

Content Templates entwerfen

Der Template-Bearbeitungsmodus ist eine weitere neue Funktion in WordPress 5.8. Es lässt dich Gutenberg nutzen, um die Templates für deine Beiträge und Seiten mit Hilfe von Blöcken zu gestalten.

Momentan ist diese Funktion nur verfügbar, wenn dein Theme-Entwickler sie speziell aktiviert hat, sodass du sie möglicherweise nicht siehst, wenn der Entwickler deines Themes das noch nicht getan hat.

Wenn du ein Theme verwendest, das den Template-Bearbeitungsmodus in WordPress 5.8 unterstützt, wirst du einen neuen Template-Bereich im Post/Page-Tab der Sidebar sehen, wenn du einen Beitrag oder eine Seite bearbeitest. Du kannst ein neues Template erstellen oder eines deiner bestehenden Templates auswählen:

Wenn du ein neues Template erstellst, kannst du ihm einen Namen geben, damit du es nicht vergisst. Dann kannst du das Template mit dem speziellen Template-Editor-Modus und den neuen Theme-Blöcken, die wir im vorherigen Abschnitt beschrieben haben, gestalten:

Blockbase Full Site Editing Beispiel

Blockbase ist ein Theme von Automattic, das als eine Art „Proof of Concept“ und Spielwiese für Full Site Editing dient. Es ist noch experimentell, daher kann es sich noch ändern, bevor diese Funktionen in der WordPress-Core Software enthalten sind. Aber es bietet eine Idee von Full Site Editing.

Wenn du das Theme und die Plugin-Version von Gutenberg installiert hast, bekommst du einen neuen Bereich für den Site Editor, mit dem du dein Theme mit dem gleichen Editor „bauen“ kannst, den du oben gesehen hast.

Der entscheidende Unterschied ist jedoch, dass du nicht nur einen einzelnen Beitrag oder eine Seite erstellst. Stattdessen verwendest du den Gutenberg WordPress Block-Editor, um die eigentlichen Templates zu erstellen, die von allen Inhalten deiner Webseite verwendet werden – zum Beispiel das Template für deinen Header.

Um dir dabei zu helfen, bekommst du eine Reihe von neuen Designblöcken, darunter einige der Theme-Blöcke, die du oben gesehen hast:

Um zwischen verschiedenen Templates zu navigieren, kannst du auf das WordPress-Logo in der oberen linken Ecke klicken, um andere Templates zu bearbeiten und neue zu erstellen:

Auch hier ist die Idee, dass du irgendwann in der Lage sein wirst, den Gutenberg-Editor zu nutzen, um alle Templates/Layouts deines Themes zu kontrollieren. Und wenn das passiert, wird die Erstellung einer WordPress Seite ganz anders aussehen, als das, was wir im Jahr 2021 als „normal“ ansehen.

In den 2+ Jahren seit der Einführung von Gutenberg hat sich viel verändert, und es wird noch mehr kommen! 😲 Schau dir diesen Guide an, um zu sehen, was in den kommenden Monaten und Jahren kommt 👀Click to Tweet

Zusammenfassung

Seit 2018 hat der Gutenberg-Blockeditor eine Menge Fortschritte gemacht. Mit dem bevorstehenden Schritt in Richtung Full Site Editing wird der Block-Editor nur ein noch bedeutenderer Teil von WordPress werden.

In diesem Beitrag haben wir alles von den Grundlagen des Blockeditors bis hin zu fortgeschrittenen Tipps und Funktionen behandelt. Wir haben auch einen Blick darauf geworfen, wie Full Site Editing in der Zukunft aussehen könnte.

Wenn du noch nicht bereit bist, es auszuprobieren, kannst du Gutenberg dauerhaft deaktivieren und den klassischen Editor verwenden. Gutenberg wird jedoch weiter wachsen, also ist es nichts, was du für immer ignorieren willst.

Hast du noch irgendwelche Fragen oder Gedanken zum Editor? Wenn ja, würden wir gerne deine Kommentare hören, sowohl gute als auch schlechte.