Es ist bestätigt, dass der Gutenberg-Editor tatsächlich der Standard-Artikeleditor für WordPress sein wird. ICHai Letzteres konnte ich testen und mir wurde schnell klar, dass mit diesem neuen Editor viele Benutzer verloren gehen werden, daher der Grund für dieses Tutorial. Gemeinsam werden wir die Grundlagen des Gutenberg-Editors durchgehen und einige fortgeschrittene Punkte behandeln.

Bevor Sie beginnen

Wenn Sie nicht in der Lage sind, WordPress Version 5.0 (das sich noch in der Entwicklung befindet) zu installieren, können Sie dies jetzt tun herunterladen Gutenberg und testen Sie es auf Ihrer Version von WordPress (ich starte wieder eine experimentelle Umgebung). Ich gebe jedoch zu, ein wenig überrascht zu sein, wenn ich mir die Bewertungen dieses neuen Editors ansehe. Mehr als die Hälfte meiner Benutzer gab eine Bewertung von 1/5.

Vorschau Gutenberg Bewertung wordpress.jpeg

Ich werde nicht damit aufhören und testen, um ein Gefühl dafür zu bekommen.

Schnittstellenpräsentation

Um Gutenberg zu verwenden, müssen Sie schreiben einen Artikel (offensichtlich), wie Sie es in der Vergangenheit getan haben, d.h. " Artikel> Hinzufügen".

Gutenberg Präsentation.jpeg

Was mir von Anfang an aufgefallen ist, ist, dass der Verlag sich sehr auf die Abwesenheit von Ablenkung konzentriert und die gesamte Breite der Seite ausgenutzt hat.

alte Version wordpress.jpeg

Obwohl wir zugeben müssen, dass es auf Gutenberg zu viele Ränder gibt, ist der weiße Hintergrund meiner Meinung nach eine Farbe, die weniger Ablenkung verursacht. Sie werden feststellen, dass Gutenberg dem Post-Editor auf Calypso (WordPress.com) sehr ähnlich sieht.

Calypso Editor wordpress.jpeg

Lage der Elemente

Sicherungsabschnitt

Das Layout hat sich enorm verändert. Der Artikelspeicherbereich befindet sich jetzt oben. Es handelt sich vielmehr um einen Schnellzugriffsbereich auf die Schaltfläche Speichern.

Sicherungsabschnitt gutenberg.jpeg

Mit der Schaltfläche mit dem Einstellungssymbol können Sie die Klappe unten schließen. Die Schaltflächen, mit denen wir zwischen dem visuellen Editor und dem Texteditor wechseln konnten, befinden sich jetzt ganz rechts im selben Bereich. Um eine Vorschau des Artikels anzuzeigen, müssen Sie auf das Auge vor der Schaltfläche "Veröffentlichen ..." klicken.

erweiterte Kontrolle gutenberg.jpeg

Der Abschnitt zur Auswahl des ausgewählten Bilds für Kategorien und die Sichtbarkeit von Artikeln befindet sich wie gewohnt rechts. Müssen Sie sicherstellen, dass die " Dokument Ausgewählt ist.

Gutenberg Abschnitt Kategorie und Bild an der ersten.jpeg

Blockabschnitt

Dies ist die Innovation, die Gutenberg bringt. Sie sollten wissen, dass jetzt jeder Absatz über Gutenberg als Block betrachtet werden sollte. Die Blöcke haben die Möglichkeit, einzeln einstellbar zu sein, können aber auch leicht über das gesamte Dokument verschoben werden.

Wenn Sie den Cursor auf Ihren Absatz gesetzt haben, um auf die Funktionen des ausgewählten Blocks zuzugreifen, müssen Sie auf die Blockregisterkarte rechts klicken.

blockieren Gutenberg wordpress.jpeg

Mit diesen Einstellungen können Sie beispielsweise eine Hintergrundfarbe definieren, die nur für den Block gilt, sowie die Schriftgröße des Blocks ändern. Ich finde es ziemlich bequem.

Formatierungsoptionen

Die Formatierung wird über jedem Block angezeigt.

Option formatieren.jpeg

Sie können die Layoutoptionen auch oben anzeigen, indem Sie auf die Editoroption und dann auf "Symbolleiste oben festlegen" klicken.

Anzeige Formatierungsoptionen an der top.jpeg

So fügen Sie benutzerdefinierte Blöcke hinzu

Sie sind nicht auf die Verwendung des Absatzblocks beschränkt. Um weitere Blöcke hinzuzufügen, müssen Sie auf das + -Symbol oben links klicken.

anderer block gutenberg.jpeg

Dadurch können Sie auf die verschiedenen verfügbaren Blöcke zugreifen. An dieser Stelle können Sie auch auf die verschiedenen Blöcke zugreifen, die von angeboten werden Themen und Plugins. Sie haben sogar die Möglichkeit, Ihre eigenen benutzerdefinierten Blöcke zu speichern. Ich denke, es wird einfacher, ähnliche Artikel zu bearbeiten.

Das war's für dieses Tutorial. Wir werden in einem nächsten fortfahren, indem wir alles, was wir in diesem Tutorial beobachtet haben, in die Praxis umsetzen.