Gutenberg E03: Verwenden des neuen Gutenberg Post Editors

In unserer vorherigen Folge über den WordPress Gutenberg-Editor haben wir den neuen Bildschirm zum Bearbeiten von Beiträgen vorgestellt, indem wir ihn mit dem alten verglichen haben. Sie sollten jetzt mit jeder Funktion und ihrer Position vertraut sein.

In dieser Folge konzentrieren wir uns nur auf die Verwendung des neuen Gutenberg-Post-Editors. Wir werden Gutenbergs praktischere Änderungen vorstellen, die sich auf die Bearbeitung von Inhalten beziehen.

Wie werden Sie Ihren idealen Beitrag erstellen? Werden Sie Shortcodes verwenden? Oder bringt Gutenberg einen neuen, einfacheren und intuitiveren Ansatz für die Erstellung von Inhalten? Mal schauen!

Funktionsweise von Gutenberg-Post-Editor-Blöcken

Bisher war die Textbearbeitung in WordPress eine ziemlich einfache Aufgabe. TinyMCE stellte eine Schnittstelle bereit, die Dokumentenbearbeitungssoftware (Microsoft Word, LibreOffice Writer, Google Docs usw.) ähnelte. Es gab einen einzigen Körperbereich, in dem Sie alles platzieren würden (Text, Überschriften, Listen, Bilder usw.) und dann die globale Symbolleiste zum Formatieren verwenden würden.

Die einzige bemerkenswerte Änderung, die Gutenberg mit sich bringt, sind Blöcke oder mit anderen Worten Inhalte. Jeder Abschnitt des Beitragskörpers wird nun zu einem eigenen Block und erleichtert den Autoren die Arbeit damit.

Anstatt also alles in einen einheitlichen Textbereich einzufügen, haben Sie jetzt die Freiheit, Ihre Textteile als separate Einheiten zu bearbeiten.

Dadurch ergeben sich viele Möglichkeiten, die es vorher nicht gab.

1. Einfache Nachbestellung

Wie oft haben Sie sich Ihren letzten Beitrag angesehen und Ihre Meinung geändert, was wohin gehört? Es ist durchaus üblich, dass Inhaltsautoren Teile ihrer Beiträge neu anordnen, während sie sie schreiben oder überprüfen.

Nun, Gutenberg erkennt jeden Absatz automatisch als separaten Block, sodass Sie Ihren Text nicht mehr ausschneiden und einfügen müssen. Sie können einfach die Blocksteuerelemente verwenden, um es zu verschieben.

2. Blockieren Sie bestimmte Einstellungen und Symbolleisten

Separate Blöcke geben Ihnen die Möglichkeit, jeden Inhalt auf Ihre eigene Weise zu formatieren. Es ist einfach, das Aussehen von Teilen Ihres Inhalts zu ändern und diese spezifische Einstellung jederzeit zur Hand zu haben. Vergessen Sie die Zeit, als Sie eine einzige Symbolleiste für Ihren gesamten Beitragstext hatten.

3. Wiederverwendbarkeit blockieren

Die Option „Zu wiederverwendbaren Blöcken hinzufügen“ speichert einen Block mit seinem Inhalt und seiner Konfiguration in der Datenbank. Dadurch kann es in anderen Beiträgen wiederverwendet werden. Hast du ein berühmtes Zitat, das du oft verwendest? Ein Angebot, das Sie über jedem Beitrag platzieren möchten? Oder vielleicht eine Gastautorensignatur? All dies kann einmal geschrieben und dann schnell für jeden Beitrag auf Ihrer Website wiederverwendet werden. Außerdem werden gespeicherte Änderungen an Ihren freigegebenen Blöcken auf jede verwendete Instanz angewendet.

Diese Funktionen sind einige der grundlegendsten neuen Funktionalitäten, die Gutenberg-Blöcke zum Leben erwecken. Dies war teilweise das Ziel vieler Seitenersteller vor Gutenberg; Um Inhalte in wiederverwendbaren Blöcken zu organisieren und es dem Benutzer zu erleichtern, Rich-Text zu erstellen und zu bearbeiten.

Sobald Sie diese Denkweise verstanden haben und anfangen, in Blöcken zu denken, werden Sie das Beste aus Gutenberg und seinem neuen Bearbeitungsablauf herausholen. Im Folgenden präsentieren wir Ihnen einige einfache Beispiele, wie Sie Ihr neues Gutenberg-Block-Tool effizient nutzen können.

Hinzufügen von Rich-Text im Gutenberg-Editor

Angenommen, Sie möchten einen Beitrag schreiben, der nur aus Text besteht (zugegebenermaßen eine seltene Sache, aber fangen wir einfach an). Sie benötigen nur einfachen Text, ein paar Überschriften und vielleicht eine oder zwei Listen. Schauen wir uns an, wie Sie dies mit dem Gutenberg-Editor tun können.

Konvertieren einer Überschrift in einen Block

In TinyMCE geben Sie die Überschrift, den Absatz und alles andere im Klartext ein.

Wählen Sie dann beispielsweise den gewünschten Text aus und ändern Sie sein Format in Überschrift 1.

In Gutenberg erhalten die Überschrift und der Absatz einen eigenen Block, da es sich nun um separate Inhalte handelt.

Jetzt müssen Sie nur noch den ersten Absatzblock in einen Überschriftenblock umwandeln.

In Gutenberg kann ein Textblock in jeden anderen Textblock umgewandelt werden, da sie zur selben Gruppe gehören.

Apropos Überschriften, Sie erhalten auch ein Inhaltsverzeichnis basierend auf Titel, H1, H2 usw. Wie cool ist das?

Hinzufügen einer Liste

Angenommen, Sie möchten Ihrem Text eine Liste hinzufügen. In TinyMCE klicken Sie zuerst auf die Schaltfläche „Liste“ in der Symbolleiste und beginnen dann mit der Eingabe. Durch Drücken der [Enter]-Taste wird der Liste ein neues Element hinzugefügt.

Um in Gutenberg eine neue Liste hinzuzufügen, müssen Sie in Blöcken denken. Das bedeutet wahrscheinlich, dass wir einen Listenblock brauchen, richtig?

Sie können entweder einen Textblock in einen anderen umwandeln , um sein Format (Absatz, Liste, Überschrift, Zitat usw.) zu ändern, oder Sie können einen neuen Block dieses speziellen Typs überhaupt erst hinzufügen. Es ist nicht viel anders als bei TinyMCE, da die erforderlichen Schritte ziemlich ähnlich sind. Sie werden jedoch später belohnt, wenn Sie diese Blöcke verschieben oder bestimmte Einstellungen auf sie anwenden möchten, wie wir oben erwähnt haben.

Hinzufügen von Bildern und Bildergalerien

Visuelle Inhalte sind eine der ansprechendsten Möglichkeiten, Ihre Inhalte zu beleben und die Leser nicht mit einer riesigen Textwand konfrontiert zu sehen. Meistens möchten Sie relevante Bilder strategisch in Ihren Inhalten platzieren.

Hinzufügen eines Bildes

Hier hat sich nicht viel geändert. Auf TinyMCE klicken Sie auf Medien hinzufügen und fügen Ihre Bilder in den Inhalt ein und bearbeiten sie dann von dort aus.

In Gutenberg haben Sie … nun, Sie haben es erraten! Sie fügen einfach einen neuen Bildblock wie folgt hinzu:

Beachten Sie, wie Sie über die Seitenleiste auf die Bildeinstellungen zugreifen können. Sie können auch die Größe des Bildes ändern und die Bildunterschrift direkt bearbeiten, wie Sie es früher auch mit TinyMCE getan haben.

Nun, das war jetzt nicht viel anders, oder? Auch ziemlich intuitiv. Lassen Sie uns also in etwas Komplexeres, aber auch Bekanntes eintauchen: Shortcodes.

Und dazu verwenden wir die Galerie, ein weiteres gängiges Bildelement.

Hosten Sie Ihre Website mit Pressidium

60- TÄGIGE GELD-ZURÜCK-GARANTIE

SEHEN SIE UNSERE PLÄNE

Hinzufügen einer Galerie

Die in WordPress 3.5 eingeführte Schaltfläche „Medien hinzufügen“ vereinfachte und machte die Erstellung einer Galerie zu einem intuitiven Prozess. So machen Sie es in TinyMCE:

Wählen Sie Bilder, ändern Sie ihre Reihenfolge, wählen Sie die Anzahl der Spalten und boom! bereit zu gehen. Ziemlich bequem, oder?

Nun ja, aber mit ein paar Vorbehalten.

Beachten Sie, dass Sie nach dem Erstellen der Galerie keine Änderungen sofort vornehmen können .

Sie müssen auf das Bearbeiten-Symbol klicken und zum Medienfenster zurückkehren, um Ihre Änderungen dort abzuschließen.

Wie wir oben angedeutet haben, geschieht dies, weil die Galerie vor Ihnen nichts anderes als ein getarnter Shortcode ist!

Dies ist etwas einschränkend, da Sie im Wesentlichen jedes Mal, wenn Sie Ihre Galerie optimieren möchten, einen neuen Shortcode generieren müssen.

Also, wie würdest du das bei Gutenberg angehen? Lassen Sie uns zunächst einen Blick darauf werfen, wie wir mit Shortcodes im Allgemeinen umgehen.

Shortcodes in Gutenberg

Wenn Sie "Shortcode-Blockierung?" dann hast du recht mein freund. Gutenberg hat einen spezialisierten Block, der die Funktionalität alter Shortcodes portiert. Dadurch bleibt die Kompatibilität erhalten, ohne dass etwas kaputt geht.

Dadurch wird genau dieselbe Galerie generiert, wenn der Besucher die Website aufruft.

Dies ist jedoch nicht ideal. Wir haben bereits eine große Sache darüber gemacht, dass Shortcodes veraltet und klobig sind und es keinen Spaß macht, damit zu arbeiten. Warum verwenden wir sie also weiterhin mit Gutenberg?

Die Antwort ist einfach. Der Shortcode-Block ist aus Kompatibilitätsgründen vorhanden.

WordPress möchte Entwicklern Zeit geben, ihre Shortcodes in benutzerdefinierte Blöcke zu migrieren. Auf diese Weise wird alles intuitiver.

Es gibt tatsächlich einen Galerie-Block, der mit dem Gutenberg-Editor geliefert wird, also lasst uns diesen anstelle des Shortcodes verwenden und ihn in Aktion sehen!

Galerieblock in Gutenberg

Wie Sie sehen können, generieren wir die Galerie auf die gleiche Weise wie zuvor. Diesmal können wir jedoch spontan Änderungen vornehmen, wie z. B. die Anzahl der Spalten, Bildunterschriften, Links usw.

Abschließend werden wir Blocks immer Shortcodes vorziehen. Nur wenn der benötigte Block nicht existiert, greifen wir auf den Shortcode zurück, um die Funktionalität beizubehalten.

Hinzufügen von benutzerdefinierten Layouts

Spaltenlayout

Es ist sehr üblich, Spalten in Ihren Inhalten zu haben. Vielleicht möchten Sie viele Dinge nebeneinander vergleichen oder ähnliche Objekte gemeinsam präsentieren.

Vor Gutenberg musste man sich auf externe Shortcodes verlassen, um solche Layouts zu erstellen. Siehe unten ein Beispiel mit dem Plugin „Column Shortcodes“:

Dies funktioniert gut, da es das gewünschte Ergebnis liefert. Sieht es trotzdem gut aus? Stellen Sie sich vor, Sie müssten dieses ganze Shortcode-Durcheinander bearbeiten, um etwas zu ändern, oder versehentlich etwas ändern. Dann funktioniert das Ganze nicht mehr und man muss nach Syntaxfehlern suchen, was nicht nach Spaß klingt.

Werfen wir nun einen Blick auf den Gutenberg-Editor:

Durch die Verwendung der Blöcke „Textspalten“ und „Spalten“ ermöglicht Gutenberg Ihnen, ohne großen Aufwand genau das gewünschte Layout zu erstellen. Es ist einfach, für den Endbenutzer intuitiv und für den Benutzer viel weniger fehleranfällig. Das Erstellen von Inhalten sollte sich nicht wie das Schreiben von Code anfühlen

Benutzerdefinierte Felder hinzufügen

WordPress ist keine reine Blogging-Plattform mehr. Der Benutzer hat die Möglichkeit, einen benutzerdefinierten Beitragstyp zu erstellen, um seiner WordPress-Site Funktionen hinzuzufügen. Ein einfaches Beispiel wären Buchbesprechungen, bei denen Sie einen benutzerdefinierten Beitragstyp namens „Buch“ erstellen und benutzerdefinierte Felder wie „Titel“, „Autor“, „Veröffentlichungsdatum“ und „Bewertung“ hinzufügen.

Mit benutzerdefinierten Feldern können Sie entweder die von WordPress bereitgestellten verwenden:

Verwenden Sie alternativ ein Plug-in eines Drittanbieters wie ACF (Advanced Custom Fields) oder Meta-Box. Diese können mehr Flexibilität bieten und werden von der Entwicklergemeinschaft häufig verwendet.

Hier ist also die Sache, Gutenberg möchte sich von einer solchen Terminologie entfernen und sich auf das Erstellen und Bearbeiten von Inhalten konzentrieren. Shortcodes, Widgets, benutzerdefinierte Felder, TinyMCE mögen Ihnen jetzt vertraute Begriffe sein, können aber für Neulinge ziemlich verwirrend sein. Gutenberg verschiebt den Fokus stattdessen auf Blocks.

„Ja, das ist alles schön und gut, aber wie werden wir diese benutzerdefinierte Feldfunktionalität mit Gutenberg haben?“

Letztendlich ist ein benutzerdefiniertes Feld nur ein Wert, der in der post_meta-Tabelle in der Datenbank gespeichert ist. Nun, ein Gutenberg-Block kann das bereits.

Also, wie wir es bei Shortcodes besprochen haben, gilt hier etwas Ähnliches: Benutzerdefinierte Felder können in Gutenberg* immer noch existieren, aber letztendlich sollten sie in Blöcke umgewandelt werden.

*nur mit Plugins von Drittanbietern. Siehe unten.

Benutzerdefinierte Felder in Gutenberg

Unlinke Shortcodes, die in WordPress gefundenen benutzerdefinierten Felder werden von Gutenberg nicht unterstützt. Sie müssen ein Plugin wie ACF installieren, das Gutenberg unterstützt, damit diese Felder angezeigt werden.

Benutzerdefinierte Felder als Blöcke in Gutenberg

Letztendlich möchten Sie nicht weiter mit der alten benutzerdefinierten Feldlogik arbeiten, sondern stattdessen Ihre eigenen benutzerdefinierten Blöcke erstellen . Diese Blöcke ermöglichen es dem Benutzer, benutzerdefinierte Felder zu erstellen, ohne zu wissen, was sie sind oder wie sie sich von anderen Blöcken unterscheiden.

Fazit

Nun, wenn wir diese ganze Episode mit einem Wort zusammenfassen könnten, wäre es „Block“.

Wenn Sie beginnen möchten, auf Gutenberg-Weise zu denken, denken Sie immer dann, wenn Sie an etwas zweifeln, an „blockieren“. Es wird von nun an der Baustein (Wortspiel beabsichtigt) Ihres WordPress-Inhalts sein.

Und da es so wichtig ist, werden wir uns in der nächsten Folge die von Gutenberg bereitgestellten Standardblöcke genauer ansehen. Wir sehen uns dort!