Dein ultimativer Leitfaden zur Verwendung des kommenden WordPress Gutenberg Editors

Irgendwann in den nächsten Monaten wird sich die Art und Weise, wie Sie Inhalte mit WordPress erstellen, radikal ändern. Der aktuelle Texteditor, den Sie seit Jahren verwenden, wird verschwinden und durch den brandneuen WordPress Gutenberg Editor ersetzt.

Eine große Veränderung wie diese lässt wahrscheinlich einige Alarmglocken in Ihrem Kopf läuten…

Werden Ihre Arbeitsabläufe unterbrochen? Werden Ihre aktuellen Plugins und Themes weiterhin funktionieren? Wie können Sie mit diesem neuen Editor weiterhin großartige Inhalte erstellen?

In diesem Beitrag erfahren Sie die Antworten auf diese Fragen und vieles mehr .

Dies ist der ultimative WordPress Gutenberg Editor-Leitfaden für jeden, der Inhalte mit WordPress erstellt.

Du wirst lernen:

1. Was der WordPress Gutenberg Editor ist, warum/wann er kommt und die Antworten auf einige grundlegende FAQs.
2. Wie Sie die aktuelle Editor-Funktionalität nachahmen und mit Gutenberg einen einfachen Blog-Beitrag erstellen können.
3. Einige Insider-Tipps für eine produktivere Arbeit mit Gutenberg ( basierend auf meiner praktischen Erfahrung bei der Verwendung auf einer Live-Site ).
4. So nutzen Sie die neuen Funktionen in Gutenberg, um von Inhalts- und Layoutfunktionen zu profitieren, auf die Sie zuvor noch nie Zugriff hatten.

Dieser neue Editor kommt auf jeden Fall, also nehmen Sie sich etwas Zeit, um sich mit dem WordPress Gutenberg Editor vertraut zu machen, damit Sie sofort nach der Veröffentlichung durchstarten können!

Was der Gutenberg-Editor ist und warum Sie sich darum kümmern sollten

Der Gutenberg-Editor ist eine komplette Neuinterpretation des aktuellen WordPress-Texteditors, mit dem Sie Beiträge oder Seiten mit WordPress erstellen.

Ich sage eher Neuvorstellung als Neugestaltung, weil es das Bearbeitungserlebnis von Grund auf neu aufbaut .

Sobald die Entwicklung abgeschlossen ist, ersetzt Gutenberg den aktuellen WordPress-Texteditor und Sie werden den Gutenberg-Editor verwenden, um in Zukunft Inhalte zu erstellen ( obwohl Sie Optionen haben, wenn Sie bei der aktuellen Erfahrung bleiben möchten – dazu später mehr ).

Was also macht den Gutenberg-Editor zu einer „völligen Neuerfindung“?

Beginnen wir zunächst mit einer Auffrischung dessen, was ich mit dem „WordPress-Editor“ meine. Wenn Sie sich nicht ganz sicher sind, wovon ich gesprochen habe, sieht der aktuelle WordPress TinyMCE-Editor folgendermaßen aus :

Wenn Sie Wordable verwendet haben , um WordPress-Posts direkt aus Google Docs zu veröffentlichen, verbringen Sie möglicherweise nicht viel Zeit dort! Aber ich wette, es besteht immer noch eine gute Chance, dass Sie mit der Arbeitsweise des Editors gut vertraut sind.

Der Gutenberg-Editor führt etwas ein, das „Blöcke“ genannt wird

Der aktuelle WordPress-Texteditor ist wie ein langes Microsoft Word-Dokument. Gutenberg ändert diese Dynamik mit sogenannten Blöcken .

Anstelle eines einzelnen Bearbeitungsfeldes ist jedes „Ding“ in Gutenberg ein eigener „Block“. Wenn Sie schon einmal einen Beitrag mit Medium geschrieben haben – es ist die gleiche Idee .

Beispielsweise:

• Jeder Textabsatz ist ein eigener separater Block.
• Ein Bild ist ein eigener Block.
• Ein YouTube-Video ist ein eigener Block.
• …Du hast die Idee.

Anschließend stellen Sie Ihren Inhalt mithilfe einer Reihe von Blöcken zusammen. So sieht beispielsweise der gleiche Inhalt von oben in Gutenberg aus. Es hat vier verschiedene Blöcke:

• Drei separate Absatzblöcke
• Ein Bildblock

Die Bedeutung dieses blockbasierten Ansatzes besteht darin, dass er erweiterte Funktionen für Inhalt und Layout freischaltet.

Sie können beispielsweise Spalten, Einfüge- und Stilschaltflächen einführen und viele andere Aktionen ausführen, die Sie mit dem aktuellen Editor entweder nicht ausführen können oder die mit dem aktuellen Editor HTML/CSS erfordern würden.

Später werde ich Blöcke viel detaillierter behandeln. Aber wenn Sie jetzt nasse Füße bekommen möchten, können Sie hier mit einer Live-Demo des Gutenberg-Editors herumspielen – Sie müssen nichts installieren.

Hier ist der Grund, warum das WordPress-Kernteam diese Änderung vornimmt

WordPress hat die meiste Zeit seines Lebens denselben grundlegenden Editor (TinyMCE) verwendet. Während sich das Design hier und da geändert haben mag, hat die Kernfunktionalität nie gewankt.

Warum also jetzt der Wechsel? Wenn es in den letzten 15 Jahren funktioniert hat, warum funktioniert es dann nicht die nächsten 15 Jahre?

Es gibt einige Gründe.

Zunächst einmal ist der aktuelle Editor für Gelegenheitsbenutzer in der heutigen Zeit einfach zu einschränkend. Während WordPress es ermöglicht, alles zu erstellen, was Sie sich vorstellen können, tut es dies nur, wenn Sie etwas HTML/CSS kennen .

Kombinieren Sie dies mit der Konkurrenz von visuellen Website-Buildern wie Squarespace und Wix ( die beide ihre Nutzung im letzten Jahr verdoppelt haben ) , und Sie können verstehen, warum das WordPress-Kernteam der Ansicht war, dass WordPress eine flexiblere Bearbeitungserfahrung brauchte, um seinen Vorsprung zu behalten.

Zweitens bietet Gutenberg die Möglichkeit, die vielen unterschiedlichen Schnittstellen zu vereinen, die vielbeschäftigte WordPress-Benutzer haben. Ich möchte hier nicht zu technisch werden. Wenn Sie jedoch Plugins von Drittanbietern verwenden, haben Sie wahrscheinlich verschiedene Shortcodes, Metaboxen und Einstellungsbereiche, die Teil Ihrer WordPress-Workflows sind.

Gutenberg kann all diese verschiedenen Schnittstellen in einem Blocksystem vereinen.

Drittens führt Gutenberg moderne Technologien in WordPress ein. Konkret: Reagieren. Dies hilft nicht nur dem Editor selbst, sondern ermöglicht auch Drittentwicklern, mit diesen modernen Technologien zu arbeiten.

Schließlich ist die Inhaltsbearbeitung nur der Anfang dieses Prozesses. Während jetzt wird Gutenberg nur zu ändern gehen , wie Sie Beiträge und Seiten erstellen, ist das Fernziel Gutenberg Umstellung auf das vollständige visuelles Website - Design zu haben.

Die Vor- und Nachteile des Wechsels zum neuen Gutenberg-Editor

Wird Gutenberg also gut für Sie sein?

Nun, es war tatsächlich ein ziemlich spaltendes Thema in der WordPress-Community, mit leidenschaftlichen Argumenten auf beiden Seiten.

Auf der einen Seite haben Sie Leute, die die Vorteile von Gutenberg anpreisen:

• Mehr Möglichkeiten für Inhalte – Gutenberg fügt vorgefertigte Blöcke für Schaltflächen, Zitate usw. hinzu. Dies gibt Ihnen mehr Kontrolle über Ihre Inhalte, ohne dass benutzerdefiniertes CSS erforderlich ist. Darüber hinaus können Plugins von Drittanbietern ihre eigenen Inhaltsblöcke hinzufügen, was Ihnen noch mehr Flexibilität bietet.
• Mehr Möglichkeiten für das Layout – neben neuen Inhaltsmöglichkeiten erhalten Sie auch neue Layout-Optionen, wie die Möglichkeit, Spalten oder Trennzeichen einzufügen, ohne benutzerdefinierten Code zu benötigen.
• Einheitliche Erfahrung – Anstatt Shortcodes zum Einfügen von Inhalten von Drittanbieter-Plugins verwenden zu müssen, können diese Plugins ihre eigenen Blöcke erstellen, was eine einfachere, einheitlichere Bearbeitungserfahrung schafft.
• Mobilfreundlich – Gutenberg funktioniert standardmäßig hervorragend auf Mobilgeräten, sodass Sie Inhalte von jedem Gerät aus erstellen oder bearbeiten können.

Aber auf der anderen Seite gibt es Leute, die auf einige große Probleme bei einem so ehrgeizigen Projekt hinweisen:

• Abwärtskompatibilität – ~32 % des gesamten Internets verwenden den aktuellen WordPress-Editor, was den Übergang zu einer völlig neuen Bearbeitungserfahrung sehr schwierig macht. Grundsätzlich gibt es so viele Randfälle mit all den alten Inhalten, dass es schwierig ist, einen nahtlosen Übergang zu gewährleisten.
• Schwierig für Entwickler – Theme- und Plugin-Entwickler müssen Gutenberg-Kompatibilität in ihre Plugins und Themes einbauen, und ältere Erweiterungen funktionieren möglicherweise nicht immer perfekt. Es gibt Zehntausende älterer Plugins, bei denen Kompatibilitätsprobleme auftreten können.
• Benutzerschulung – während neue Benutzer Gutenberg mögen mögen, müssen alte Benutzer neue Arbeitsabläufe erlernen, was besonders für Entwickler schwierig ist, die Websites für nicht technische Kunden erstellt haben.

Ist der WordPress Gutenberg Editor also eine gute oder eine schlechte Sache?

Nun, ich bin ein bisschen hier einige persönliche Meinung interjecting, aber ich denke , dass Gutenberg wird eine positive Veränderung auf lange Sicht sein. Sie haben mehr Kontrolle darüber, wie Ihre Inhalte aussehen und funktionieren, ohne dass externe Lösungen oder benutzerdefinierte Codelösungen erforderlich sind.

Abgesehen davon besteht definitiv die Möglichkeit kurzfristiger Wachstumsschmerzen, wenn es um die Kompatibilität mit bestehenden Plugins geht, die Sie möglicherweise verwenden. Und es wird schwierig sein, die riesige Benutzerbasis von WordPress zu zwingen, eine neue Benutzeroberfläche zu erlernen.

Wann erscheint The Gutenberg Editor?

Die kurze Antwort lautet: Wir kennen das genaue Datum nicht . Gutenberg wird als Teil von WordPress 5.0 veröffentlicht, aber es gibt noch kein offizielles Wort zum genauen Veröffentlichungsdatum von WordPress 5.0.

Aber wir haben jetzt eine grobe Vorstellung. Laut dem jüngsten WordPress 5.0 Kickoff-Meeting sind die geplanten Termine bereits der 19. November 2018 oder der 22. Januar 2019 .

Hier die längere Antwort:

Im Moment existiert der Gutenberg Editor als Plugin während seines Beta-Status. Wenn Sie möchten , können Sie das Plugin tatsächlich installieren und noch heute auf Ihrer Site verwenden ( es befindet sich jedoch in der Beta-Phase, daher würde ich es nicht empfehlen ).

Sobald die Beta- und Testphase abgeschlossen ist, wird das WordPress-Team den Gutenberg-Editor mit der WordPress-Kernsoftware in WordPress 5.0 zusammenführen . Sobald Sie Ihre WordPress-Site auf WordPress 5.0 aktualisieren, ersetzt der Gutenberg-Editor automatisch den aktuellen TinyMCE-Editor.

Was passiert mit Ihren bestehenden Inhalten, wenn der Gutenberg Editor veröffentlicht wird?

Da Gutenberg den aktuellen Editor ersetzt, fragen Sie sich wahrscheinlich, was mit all Ihren bestehenden Inhalten passieren wird.

Keine Sorge – Gutenberg ist abwärtskompatibel .

So wie es jetzt aussieht, fasst Gutenberg alle Ihre alten Inhalte in einem einzigen Classic- Block zusammen. So sieht beispielsweise das TinyMCE-Beispiel von oben aus, wenn ich Gutenberg installiere:

Wenn Sie möchten, können Sie in diesem einzelnen Classic-Block weiterarbeiten, obwohl die Erfahrung etwas umständlich ist. Oder Sie können auf das Drei-Punkte- Symbol klicken, um Ihren alten Inhalt in Gutenberg-Blöcke zu konvertieren:

Sobald Sie Ihren alten Inhalt in Blöcke umgewandelt haben, funktioniert er wie jeder andere Gutenberg-Editor-Beitrag.

Da der Gutenberg-Editor diesen einzelnen klassischen Blockansatz für alte Inhalte verwendet, sollten keine Übergangsprobleme auftreten. Es ist jedoch möglich, dass Probleme mit Plugins von Drittanbietern auftreten, daher sollten Sie weiterhin wachsam bleiben und Ihre alten Inhalte überprüfen.

Funktioniert der Gutenberg-Editor mit allen WordPress-Themes?

Ja! Da Gutenberg der Standardeditor sein wird, muss es natürlich mit jedem WordPress-Theme funktionieren.

Abgesehen davon gibt es einige Dinge, die Entwickler tun können, um Gutenberg spezielle Funktionen hinzuzufügen, so dass Sie bald "Gutenberg-kompatibel" in den Marketingmaterialien vieler Themen sehen werden.

Folgendes macht ein Thema mit Gutenberg kompatibel:

• Spezielles Block-Styling – Themen können ein spezielles Styling für die Kern-Gutenberg-Blöcke hinzufügen. Dadurch wird sichergestellt, dass alle Blöcke von Gutenberg perfekt zum Design Ihres Themes passen.
• Ausrichtung in voller Breite – Mit Gutenberg können Sie Bilder in voller Breite erstellen, die sich über den gesamten Bildschirm erstrecken, jedoch nur, wenn die Theme-Entwickler dies ausdrücklich aktivieren.
• Editor-Styling – Theme-Entwickler können der Gutenberg-Bearbeitungsoberfläche des Back-Ends auch ihr eigenes Styling hinzufügen. Dadurch entsteht eher ein visueller Designansatz. Ein Beispiel können Sie hier sehen .

Müssen Sie den Gutenberg-Editor verwenden, nachdem WordPress 5.0 veröffentlicht wurde?

Nein! Gutenberg wird zwar der Standardeditor in WordPress 5.0 sein, Sie müssen ihn jedoch nicht wirklich verwenden.

Wenn Sie den aktuellen WordPress-Editor weiterhin verwenden möchten, gibt es ein offizielles Classic Editor- Plugin , das alle Spuren von Gutenberg verbirgt und das aktuelle Bearbeitungserlebnis wiederherstellt.

Alternativ können Sie mit diesem Plugin auch beide Editoren verwenden und nacheinander zwischen ihnen wechseln.

WordPress Gutenberg Tutorial – So verwenden Sie den neuen Editor

Ok, jetzt, da Sie Ihren Gutenberg 101-Crashkurs abgeschlossen haben, können wir den Gutenberg-Editor praktisch anwenden.

Das Ziel dieses Abschnitts ist es, Sie mit dem Gutenberg Editor vertraut zu machen, damit Sie nach seiner Veröffentlichung sofort loslegen können.

Um zu beginnen, ist hier eine Grafik, die Ihnen hilft, die Kernelemente der Benutzeroberfläche des Gutenberg-Editors zu verstehen:

1. Dies ist der Hauptteil des Editors. Hier arbeitest du mit Inhalten
2. Mit diesen Schaltflächen können Sie neue Blöcke hinzufügen . Wenn Sie ein Bild, ein Video oder einen anderen Blockinhalt hinzufügen möchten, verwenden Sie diese.
3. Hier fügen Sie den Titel Ihres Beitrags hinzu.
4. Mit diesen Optionen können Sie Entwürfe speichern, Vorschauen anzeigen und Ihren Beitrag schließlich veröffentlichen.
5. Wenn Sie keinen Block ausgewählt haben, können Sie in dieser Seitenleiste allgemeine Optionen für Ihren Beitrag verwalten, z. B. Kategorien und Ihr empfohlenes Bild. Wenn Sie tun , ein Block ausgewählt, es gibt Ihnen Optionen für diesen speziellen Block.

Wenn Sie dann einen neuen Block hinzufügen, sehen Sie dieses Popup-Fenster mit einer Liste aller verfügbaren Blöcke. Du kannst entweder:

1. Verwenden Sie die Akkordeon-Registerkarten, um alle verfügbaren Blöcke zu durchsuchen
2. Suchen Sie direkt nach dem gewünschten Block

So erstellen Sie einen einfachen Blog-Beitrag mit dem Gutenberg-Editor

In diesem Abschnitt erfahren Sie, wie Sie dieselben Aktionen ausführen können, die Sie bereits im aktuellen WordPress-Editor ausführen können .

Grundsätzlich lernen Sie, wie Sie Ihren bestehenden Workflow an den Gutenberg-Editor anpassen. Im nächsten Abschnitt zeige ich Ihnen dann, wie Sie die neuen Funktionen des Gutenberg-Editors nutzen können.

Hinzufügen oder Formatieren von einfachen Textinhalten

Der grundlegende Absatztextinhalt ist einfach – Sie klicken und tippen einfach. Der einzige unmittelbare Unterschied besteht darin, dass Gutenberg jedes Mal, wenn Sie die Eingabetaste drücken , um eine neue Zeile zu erstellen, automatisch einen neuen Block für Ihren nächsten Absatz erstellt:

Wenn Sie in einen Block klicken, wird eine Formatierungssymbolleiste angezeigt, in der Sie Folgendes tun können:

• Ausrichtung ändern
• Fett und kursiv hinzufügen
• Links einfügen
• Etc.

Im Grunde verhält es sich ähnlich wie die Symbolleiste im aktuellen Editor:

Später zeige ich Ihnen eine nette Alternative zu diesem Standardansatz.

Neben den Formatierungsoptionen in der Symbolleiste erhalten Sie auch einige Optionen in der rechten Seitenleiste, mit denen Sie:

• Textgröße und -farbe steuern
• Fügen Sie eine Drop-Cap hinzu

So weit einfach genug, oder?

Erstellen einer Überschrift (H1, H2 usw.)

Sie haben verschiedene Möglichkeiten, eine Überschrift zu erstellen.

Zuerst können Sie das + -Symbol verwenden, um einen neuen Überschriftenblock einzufügen:

Nachdem Sie den Überschriftsblock eingefügt haben, können Sie Ihren Text eingeben und mithilfe der Seitenleiste oder Symbolleiste steuern, welche Überschrift verwendet werden soll (z. B. H2 vs. H3):

Alternativ können Sie auch:

• Verwandeln Sie einen normalen Absatzblock in einen Überschriftenblock, indem Sie die Schaltfläche Blocktyp ändern verwenden .
• Verwenden Sie Markdown, um Ihre Überschrift zu erstellen (z. B. „## Dies ist eine Überschrift 2“)

Hier ist ein GIF, um diese beiden Methoden zu veranschaulichen:

Einfügen von Bildern, Videos oder anderen Medieninhalten

Ok, jetzt können Sie sowohl einfachen Text als auch Überschriften erstellen und formatieren. Damit kommst du am meisten ans Ziel!

Aber wie sieht es mit dem Einfügen von Medieninhalten aus?

Um einen beliebigen Medieninhalt einzufügen, können Sie dasselbe + -Symbol verwenden, um einen Block einzufügen.

Um Medieninhalte unter Ihren vorhandenen Inhalten einzufügen, verwenden Sie das + -Symbol in der oberen linken Ecke.

Alternativ können Sie auch einen neuen Block zwischen Ihren bestehenden Inhalten einfügen, indem Sie mit der Maus über die Stelle fahren, an der Sie Ihren Inhalt einfügen möchten. Dann verwenden Sie die Schaltfläche Block hinzufügen links neben dem neuen Block:

Nachdem Sie das Popup-Fenster Block einfügen geöffnet haben, können Sie aus folgenden Optionen wählen:

• Bild – fügen Sie ein Bild aus der WordPress-Medienbibliothek oder eine externe URL ein.
• Video – betten Sie ein Video aus der WordPress-Medienbibliothek oder eine externe URL ein.
• Einbettungen – separate Blöcke zum Einbetten von Inhalten von YouTube, Vimeo, Spotify, SoundCloud, Instagram und vielen anderen Quellen.

So sieht es beispielsweise aus, ein Bild aus der WordPress-Medienbibliothek einzufügen:

Und so können Sie ein YouTube-Video einbetten:

Einfügen von Shortcodes von anderen Plugins

Wenn Sie wie die meisten WordPress-Benutzer sind, haben Sie wahrscheinlich einige Plugins, die Sie mithilfe von Shortcodes in Ihren Beitrag oder Seiteninhalt einbinden.

Schließlich besteht das Ziel darin, dass diese Arten von Plugins ihre eigenen Gutenberg-Blöcke erstellen, die Sie direkt verwenden können ( dazu später mehr ). Aber bis dahin können Sie immer noch Shortcodes in Ihre Gutenberg-Inhalte einfügen, indem Sie den Shortcode- Block verwenden:

Inhalte neu anordnen (Sie haben zwei Optionen)

Okay, soweit ganz einfach… aber was ist, wenn Sie die Reihenfolge Ihrer Blöcke ändern möchten?

Dazu haben Sie zwei Möglichkeiten.

Erstens, wenn Sie Ihre Maus links von einem Block* bewegen, können Sie Blöcke per Drag & Drop verschieben:

Zweitens können Sie die Blöcke auch mit den Aufwärts- oder Abwärtspfeilen um eine Position nach oben oder unten verschieben:

*Um Drag & Drop zu aktivieren, halten Sie Ihre Maus über die 6 Punkte zwischen den Aufwärts- und Abwärtspfeilen.

Arbeiten mit Informationen hinter den Kulissen (Kategorien, URL-Slug usw.)

Ok, das Obige sollte also behandeln, wie man grundlegende Blog-Inhalte hinzufügt. Aber was ist mit all den anderen Teilen hinter den Kulissen bei der Vorbereitung eines Beitrags zur Veröffentlichung?

Für die meisten Aktionen können Sie die Registerkarte Dokument der Seitenleiste verwenden. Hier werden Sie:

• Wählen Sie ein Veröffentlichungsdatum/Planen Sie Beiträge im Voraus
• Wählen Sie den Autor aus
• Kategorien und Tags hinzufügen
• Wählen Sie Ihr empfohlenes Bild aus
• Geben Sie Ihren Auszug ein

Darüber hinaus können Sie die Schaltflächen über dieser Seitenleiste verwenden, um:

• Vorschau Ihres Beitrags
• Entwürfe speichern ( Gutenberg speichert Ihren Entwurf automatisch, sodass Sie dies normalerweise nicht manuell tun müssen )
• Veröffentlichen Sie Ihren Beitrag

Die einzige knifflige Sache ist das Festlegen des URL-Slugs Ihres Beitrags oder Ihrer Seite. Um das zu bearbeiten, klicken Sie auf den Titel. Dann können Sie den Slug bearbeiten:

Was ist mit Plugins wie Yoast SEO? Wie werden sie funktionieren?

Es besteht eine gute Chance, dass Sie einige andere Backend-Plugins haben, die Sie für jeden Inhalt konfigurieren müssen.

Es gibt zwei Möglichkeiten, mit diesen Plugins zu interagieren.

Zunächst einmal arbeiten viele Entwickler bereits an der direkten Gutenberg-Kompatibilität. Yoast SEO unterstützt beispielsweise bereits Gutenberg, und Sie konfigurieren Ihre Yoast SEO-Einstellungen direkt über dieselbe Dokument- Seitenleiste:

Für Legacy-Plugins, die noch keine Gutenberg-Unterstützung haben, können Sie weiterhin Meta-Boxen verwenden, wie Sie es mit dem TinyMCE-Editor tun würden:

Sechs Tipps für eine produktivere Arbeit mit Gutenberg

Wenn Sie zum ersten Mal mit dem Gutenberg-Editor arbeiten, fühlt es sich möglicherweise etwas träge an. Diese Tipps können den Vorgang beschleunigen und das schnelle Einfügen und Anpassen der benötigten Blöcke erleichtern.

1. Schnelles Einfügen von Blöcken durch Eingabe von „/“, um eine Menge Zeit zu sparen

Die Methode zum Einfügen von Blöcken, die ich Ihnen oben gezeigt habe, ist hilfreich, wenn Sie gerade erst mit Gutenberg beginnen, da Sie alle verfügbaren Blöcke sehen können.

Aber sobald Sie sich mit den benötigten Blöcken vertraut gemacht haben, können Sie sie viel schneller einfügen, indem Sie die Schnelleinfügefunktion verwenden.

Anstatt auf das + -Symbol zu klicken, gehen Sie einfach wie folgt vor:

• Drücken Sie die Eingabetaste, um einen neuen Block zu erstellen
• Tippe A "/"
• Beginnen Sie mit der Eingabe des Namens des Blocks

Während Sie tippen, schlägt Gutenberg übereinstimmende Blöcke automatisch vor. Drücken Sie dann einfach die Eingabetaste , um den gewünschten Block einzufügen.

Hier ist es in Aktion:

Das ist viel schneller, oder?

2. Lernen Sie die Tastenkombinationen für eine schnellere Bearbeitung

Gutenberg ist vollgepackt mit Tastaturkürzeln, die Ihre Arbeit beschleunigen können.

Sie können eine vollständige Liste dieser Tastenkombinationen aufrufen, indem Sie auf STRG + Alt + H (Windows) oder CMD + Alt + H (Mac) klicken:

Sie sollten die vollständige Liste durchlesen, aber hier sind einige der hilfreichsten:

• Strg + S – Speichern Sie Ihren Entwurf.
• Strg + Z – Rückgängig oder Strg + Y – Wiederherstellen.
• Strg + Alt + Rücktaste – den ausgewählten Block löschen ( wirklich praktisch ).
• Strg + Umschalt + D – dupliziert den ausgewählten Block.
• Strg + Alt + T – einen neuen Block vor dem ausgewählten Block einfügen.
• Strg + Alt + Y – fügt einen neuen Block nach dem ausgewählten Block ein.

Sie können auch die meisten globalen Tastenkombinationen verwenden, z. B. Strg + B für Fettdruck oder Strg + V zum Einfügen.

3. Ziehen Sie Bilder von Ihrem Desktop in Ihre Gutenberg-Inhalte

Wenn Sie viele Bilder einfügen müssen, ist dies ein weiterer netter Trick.

Anstatt für jedes Bild manuell einen neuen Bildblock erstellen zu müssen, können Sie ein Bild einfach direkt aus einem Ordner auf Ihrem Desktop an die Stelle ziehen, an der Sie es in Ihren Beitrag einfügen können.

WordPress lädt es dann automatisch in Ihre Medienbibliothek hoch und fügt es dort ein. Es gibt nur eines zu beachten – stellen Sie sicher, dass Sie die blaue Linie sehen, wenn Sie das Bild ziehen , sonst funktioniert es nicht:

4. Fügen Sie eine feste Bearbeitungssymbolleiste hinzu

Eine Sache, die manche Leute mit Gutenberg schwierig finden, ist, dass die Bearbeitungssymbolleiste ständig blinkt, wenn Sie zwischen verschiedenen Absatzblöcken klicken.

Wenn Ihnen das nicht gefällt, können Sie die Option Unified Toolbar aktivieren, um eine immer präsente Symbolleiste oben in der Gutenberg-Benutzeroberfläche zu erhalten:

5. Verwenden Sie die Markdown-Syntax für Überschriften, Listen usw.

Wenn Sie gerne Markdown verwenden, können Sie einige Markdown-Syntax in Gutenberg integrieren.

Beispielsweise:

• ## – erzeugt ein H2 (das hast du schon gesehen – es verwandelt sich in einen Überschriftenblock ).
• * – startet eine ungeordnete Liste.
• 1. – startet eine geordnete Liste.
• > – erstellt ein Block-Zitat ( verwandelt sich in einen Zitat-Block ).

Sie können nicht die gesamte Markdown-Syntax verwenden. Aber die obigen Beispiele sind schon ziemlich hilfreich für eine schnellere Formatierung:

6. HTML bei Bedarf direkt bearbeiten

Wenn Sie HTML direkt bearbeiten möchten, können Sie den Code-Editor aufrufen, indem Sie auf die drei Punkte in der oberen rechten Ecke klicken oder die Tastenkombination Strg + Umschalt + Alt + M verwenden :

Nutzen Sie die neuen Funktionen von Gutenberg – Spalten, Schaltflächen und mehr!

In Ordnung, wir haben Folgendes behandelt:

• So verwenden Sie Gutenberg, um einen einfachen Blogbeitrag zu erstellen.
• Einige Tipps, um die Arbeit mit Gutenberg zu beschleunigen.

Kommen wir nun zu einigen der coolen neuen Sachen, die Sie mit Gutenberg machen können. Dies sind die aufregenden Funktionen, die erklären sollen, warum sich das WordPress-Team für Gutenberg entschieden hat.

Schaltflächen einfügen – kein HTML erforderlich

Beim alten Editor bestand die einzige Möglichkeit zum Erstellen von Schaltflächen darin, manuell eine CSS-Klasse hinzuzufügen oder ein Drittanbieter-Plugin zu verwenden.

Bei Gutenberg fügen Sie einfach den Button- Block hinzu. Um den Schaltflächentext zu bearbeiten, klicken Sie einfach und geben Sie ein. Und um die Farben zu ändern, können Sie die Seitenleiste verwenden:

Erstellen Sie mehrspaltige Layouts

Mit dem alten Editor gab es keine Möglichkeit, mehrspaltige Layouts ohne eigenen benutzerdefinierten HTML-Code oder ein Drittanbieter-Plugin zu erstellen.

Bei Gutenberg fügen Sie einfach den Spaltenblock hinzu . Dann können Sie andere Blöcke in den verschiedenen Spalten hinzufügen:

Gestreckte Bilder in voller Breite erstellen

Wenn Ihr Design dies unterstützt , erhalten Sie eine neue Ausrichtungsoption in voller Breite, mit der Sie Bilder über den gesamten Bildschirm strecken können, was einige interessante Inhaltslayouts eröffnet:

Erstellen Sie wiederverwendbare Blockvorlagen

Wenn Sie regelmäßig dieselbe Kombination von Blöcken verwenden, können Sie Zeit sparen, indem Sie eine wiederverwendbare Blockgruppe erstellen.

Zuerst können Sie durch Klicken und Ziehen alle Blöcke auswählen, die Sie einschließen möchten. Anschließend können Sie die drei Punkte zum Hinzufügen zu wiederverwendbaren Blöcken verwenden :

Sie geben ihm einen Namen. Anschließend können Sie die gesamte Vorlage wie jeden anderen Block einfügen:

Sie können mit Plugins von Drittanbietern weitere Blöcke und Funktionen hinzufügen

Hier wird Gutenberg noch cooler:

Plugins von Drittanbietern können ihre eigenen Blöcke hinzufügen, die Sie in Ihren Gutenberg-Designs verwenden können.

Es gibt zwei Möglichkeiten, wie Sie davon profitieren können:

• Die Plugins, die Sie bereits verwenden , erstellen ihre eigenen Gutenberg-Blöcke. Wenn Sie beispielsweise ein Ereigniskalender-Plugin verwenden, können Sie Ereignisse einfach mithilfe des Ereignisblocks Ihres Plugins einfügen.
• Entwickler erstellen dedizierte Gutenberg-Plugins, die Tonnen von generischen neuen Inhaltsblöcken hinzufügen, die Ihnen mehr Kontrolle über Ihre Designs geben.

Schauen Sie sich zum Beispiel das kostenlose Stackable-Plugin an . Sobald Sie es installiert und aktiviert haben, erhalten Sie in Gutenberg einen ganz neuen Satz stapelbarer Blöcke:

Und dann können Sie diese Blöcke verwenden, um einige ziemlich coole Dinge zu tun, wie zum Beispiel eine Preistabelle oder ein Testimonial einzufügen:

Dies ist nur der Anfang für den WordPress Gutenberg Editor

Und das ist es! Wenn Sie es bis hierher geschafft haben, sollten Sie ein Gutenberg-Guru sein, der bereit ist, sofort loszulegen, sobald WordPress 5.0 veröffentlicht wird.

Während das Erlernen eines neuen Workflows nicht auf der Liste der "lustigen Möglichkeiten, ein Wochenende zu verbringen" der meisten Leute steht, ist es für jeden, der WordPress verwendet, unerlässlich, die Vor- und Nachteile von Gutenberg zu beherrschen.

Gutenberg wird nicht nur die Art und Weise beeinflussen, wie Sie jetzt Inhalte erstellen, sondern auch eine wichtige Rolle in WordPress spielen.

Alles, was Sie oben gesehen haben, ist nur Phase eins von Gutenberg. In Phase zwei wird Gutenberg zu Seitenvorlagen wechseln und in Phase drei wird Gutenberg in ein Tool für die vollständige Website-Anpassung verwandelt.

Also… freunde dich mit Gutenberg an, denn du wirst in den nächsten Jahren viel davon sehen!