Gutenberg-Tutorial: So verwenden Sie den neuen WordPress-Blockeditor

Benannt nach dem Erfinder der Druckmaschine, Johannes Gutenberg, debütierte der neue WordPress Gutenberg-Blockeditor in der Version WordPress 5.0 als Standard-Editor für WordPress.

Die Mission ist einfach, mit WordPress ein neues Schreib- und Bearbeitungserlebnis zu schaffen.

Mit Blöcken bietet der Gutenberg-Editor ein einzigartiges Erlebnis beim Erstellen von medienreichen Inhalten mit WordPress.

Es bringt viele Funktionen nativ in den Editor, für die man mit dem klassischen Editor Plugins benötigen würde, um Aufgaben zu erledigen.

In Kürze werde ich Sie durch die Verwendung des Gutenberg-Blockeditors führen.

Da sie mit vielen Kunden arbeiten, die WordPress verwenden, waren nicht viele von dem harten Einstieg in ihre Bearbeitungserfahrung begeistert.

Das erklärt wahrscheinlich, warum Millionen von WordPress-Benutzern den klassischen Editor installierten, nachdem ihnen mit der Veröffentlichung von Gutenberg die Wahl genommen wurde.

Ein Teil der Rechtfertigung könnte die Kompatibilität mit älteren Themen sein, ein anderer Teil nur die Empörung der Benutzer oder mangelnde Kenntnisse über die Verwendung des Gutenberg-Blockeditors.

Ich hoffe, nachdem Sie diesen Artikel durchgearbeitet haben, werden Sie später mit dem Blockeditor vertraut sein.

Schritt für Schritt: Wie verwende ich den Gutenberg-Blockeditor?

Es beginnt mit dem Erstellen einer Seite oder eines Beitrags. Etwas, das Sie bereits kennen.

Wenn Sie eine neue Seite oder einen neuen Beitrag hinzufügen, sollten Sie als Erstes diese Symbolleiste bemerken.

Auf der linken Seite haben wir die Symbolleiste + Blöcke hinzufügen. Dies ist einer der Orte, an denen Sie Blöcke zu Ihren Inhalten hinzufügen können.

Sie können auch einen Block hinzufügen, indem Sie unterhalb des letzten Blocks klicken und dann auf das +-Symbol klicken, das erscheint.

Bewegen Sie alternativ den Mauszeiger zwischen den Blöcken, das Symbol „Blöcke hinzufügen“ wird angezeigt. Klicken Sie darauf, um den Block hinzuzufügen.

Als nächstes folgen die Schaltflächen Rückgängig und Wiederherstellen.

Das nächste Symbol in der oberen Symbolleiste zeigt Ihre Inhaltsstruktur.

Als nächstes kommt die Blocknavigation

Wenn Ihr Inhalt mit vielen Blöcken wächst, können Sie von hier aus zu den Blöcken navigieren. Cool ist es nicht.

Auf der rechten Seite,

Diese sind ziemlich einfach, Entwurf speichern, Vorschau Ihres Beitrags (Öffnet ihn in einem neuen Tab) und Veröffentlichen.

Das nächste Symbol schaltet die Anzeige der Einstellungen um. Es blendet die rechten Bereiche ein oder aus.

Wenn die Einstellungen sichtbar sind, klicken Sie darauf, um sie für einen breiteren, ablenkungsfreien Editor auszublenden. Klicken Sie erneut darauf, um die Einstellungen anzuzeigen.

Am hinteren Ende der Symbolleiste befinden sich drei vertikale Punkte. Dadurch können Sie weitere Tools und Optionen ausblenden oder anzeigen.

Was können Sie also genau mit den zusätzlichen Tools und Optionen tun?

• Sie haben die Symbolleiste – greifen Sie an einem Ort auf alle Block- und Dokumentwerkzeuge zu.
• Spotlight-Modus. Ermöglicht es Ihnen, sich jeweils auf einen Block zu konzentrieren
• Vollbildmodus. Sprengen Sie Ihren Editor für ein völlig ablenkungsfreies Bearbeitungserlebnis.
• Wechseln Sie zwischen dem visuellen Editor – was Sie jetzt sehen – und dem Code-Editor – wenn Sie Code schreiben müssen, den die Code- und HTML-Blöcke nicht verarbeiten können.
• Wiederverwendbare Blöcke verwalten
• Tastaturkürzel u
• Kopieren Sie alle Inhalte in den Editor.

Die Gutenberg-Blöcke

Bisher haben Sie immer wieder Blöcke gesehen, aber was sind das?

Wir werden den langen Weg gehen, um zu sehen, wie sie funktionieren, und hoffentlich wird es dann Sinn machen, und Sie können ihm eine Definition geben, die auf Ihrem Verständnis basiert.

Es gibt jeweils sechs Kategorien von Blöcken in Gutenberg, darunter Meistgenutzte, Häufige Blöcke, Formatierung, Layoutelemente, Widgets und Einbettungen.

Beim Erstellen von Inhalten mussten Sie mit dem klassischen Editor lediglich Inhalte in die Textbereiche eingeben.

Mit dem neuen Editor verwenden Sie Blöcke, die nach Art des Inhalts organisiert wurden. Um Textinhalte hinzuzufügen, benötigt man den Text-/Absatzblock, Bilder – Bilderblock, Html, HTML-Block.

Dies ist etwas anderes als der klassische Editor, bei dem Sie alle Ihre Inhalte an einer Stelle eingefügt haben.

Verwenden der Blockwerkzeuge

Jeder Block hat seine Werkzeuge, die Sie beim Erstellen und Bearbeiten von Inhalten verwenden können.

Im Gegensatz zum klassischen Editor, bei dem alle Werkzeuge sichtbar waren.

Um auf diese Tools zuzugreifen, klicken Sie auf den Inhalt im Block. Wir werden den Absatz/Inhalt verwenden, da Sie diesen häufig verwenden werden.

Wenn Sie auf den Text oder Inhalt in einem Block klicken, öffnet sich eine Toolbox über dem Inhalt.

Die Werkzeuge, die Sie sehen werden, sind exklusiv für den Block, den Sie verwenden, erwarten Sie also nicht, dieselben Werkzeuge zu sehen, wenn Sie auf einen Medienblock klicken.

Der Absatzblock verfügt beispielsweise über Textformatierungswerkzeuge linksbündig, zentriert, rechtsbündig, fett, kursiv, Hyperlink einfügen und durchgestrichenen Text.

Plus weitere Formatierungswerkzeuge, die von anderen Plugins hinzugefügt werden, die Sie installieren, um die Standardblockfunktionalität zu erweitern.

Die beiden Funktionen des Block-Toolkits, die die Blöcke durchschneiden, sind der „ Block transformieren “ am Anfang, und am Ende sollten Sie das Symbol „ Weitere Optionen“ sehen – drei vertikale Punkte – das weitere Einstellungen für den Block enthält du arbeitest mit.

Transformiere einen Gutenberg-Block

Um einen Block umzuwandeln, klicken Sie auf den Block, wie Sie es oben im Absatzblock gesehen haben.

Angenommen, wir möchten unseren ersten Absatz in ein Zitat umwandeln, klicken Sie darauf, klicken Sie dann auf das Symbol „Umwandeln in“ und wählen Sie dann den neuen Block aus, in den Sie ihn umwandeln möchten.

Das Umwandeln des Absatzblocks in ein Zitat sieht jetzt so aus.

Die Schaltfläche Weitere Optionen

Die andere Schaltfläche, die das Block-Toolkit hat, ist das Symbol „ Weitere Optionen “ – die drei vertikalen Punkte. Klicken Sie auf einen beliebigen Block, um ihn anzuzeigen.

Mit den Mehr Optionen kannst du mehr mit deinem Block machen wie; Blenden Sie die Blockeinstellungen aus, duplizieren Sie den Block, fügen Sie den Block vor oder nach den vorhergehenden und nachfolgenden Blöcken ein, bearbeiten Sie den Block als HTML, fügen Sie den Block wiederverwendbaren Blöcken hinzu und entfernen oder löschen Sie schließlich den Block.

Ändern des Permalinks eines Beitrags oder einer Seite mit dem Gutenberg-Blockeditor

Klicken Sie auf den Titel des Beitrags oder der Seite. Darüber wird der Link angezeigt.

Klicken Sie auf die Schaltfläche Bearbeiten, ändern Sie dann Ihren Link und klicken Sie dann auf Speichern

Dokument- und Blockeinstellungen im Gutenberg-Blockeditor

Rechts von jedem Gutenberg-Beitrag oder jeder Gutenberg-Seite befindet sich ein Bereich mit zwei Registerkarten.

Der Dokumentbereich enthält die dokumentweiten Einstellungen für die Seite oder den Beitrag, einschließlich Status und Sichtbarkeit, Beitragsautoren, Tags, Feature-Bild, Diskussionen – um Kommentare zuzulassen, Kategorien und Plugin-bezogene Einstellungen für Beiträge und/oder Seiten.

Das Blockfenster enthält eine blockspezifische Einstellung.

Klicken Sie im Inhaltsbereich auf den Block und dann im rechten Bereich auf den Blockbereich.

Fazit

Wir haben eine Handvoll Informationen über den Gutenberg-Blockeditor behandelt.

Ich hoffe, mit diesem Wissen sollte es weniger einschüchternd sein, es für die Erstellung und Veröffentlichung von Inhalten zu verwenden.

Verwenden Sie den neuen Blockeditor? Was ist Ihre Erfahrung damit?

Vielleicht möchten Sie auch bestehende WordPress-Beiträge in Gutenberg-Blöcke umwandeln?