Überprüfung des Gutenberg-Blockeditors (von einem WordPress-Power-User)

In diesem Beitrag werde ich den WordPress-Blockeditor überprüfen, der im Rahmen des Gutenberg-Projekts seinen Weg in die Plattform gefunden hat. Es gibt es seit vier Jahren und es war eine der umstrittensten Änderungen, die WordPress je erlebt hat.

Jetzt, wo es Zeit hatte zu reifen und weil es ein Thema voller Emotionen ist, dachte ich, es wäre eine gute Idee, mich einzumischen. Als professioneller WordPress-Blogger verbringe ich jeden Tag den ganzen Tag, nicht nur in WordPress zu schreiben sondern auch jeden Aspekt der Plattform immer wieder für verschiedene Artikel testen. Dazu gehört natürlich der Blockeditor und seine wachsenden Fähigkeiten.

Was folgt, ist also mein persönlicher Test des Gutenberg-Blockeditors aus der Sicht eines WordPress-Power-Users. Ich werde darüber sprechen, was ich mag, nicht mag und was meiner Meinung nach verbessert werden könnte.

Der WordPress-Blockeditor: Eine Definition

Bevor wir uns mit den Vor- und Nachteilen befassen, lassen Sie uns zunächst schnell klären, worüber wir genau sprechen. Denn als es zum ersten Mal herauskam, ersetzte Gutenberg nur den Post- und Seiteneditor von WordPress. Inzwischen hat es sich jedoch auf andere Teile der Benutzeroberfläche ausgeweitet. Um sicherzustellen, dass wir auf derselben Seite sind, hier ist, was ein Teil von Gutenberg ist.

Beitrags-/Seiten-Editor

Ich habe dies bereits erwähnt. Darauf landest du, wenn du zu Beiträge/Seiten > Neu hinzufügen gehst oder deinen bestehenden Inhalt bearbeitest. Die ursprüngliche Gutenberg-Implementierung in WordPress 5.0 tauschte nur diesen Teil der Bearbeitungserfahrung aus, indem TinyMCE ersetzt wurde, was WordPress zuvor verwendet hat. Natürlich bearbeiten Sie hier den Inhalt Ihrer Beiträge und Seiten, aber nichts mit Vorlagen.

Site-Editor

Zunächst als Full-Site Editing (FSE) eingeführt, wurde dieser Teil von Gutenberg nun in Site Editor umbenannt. Es ist über Appearance > Editor zugänglich, wenn Sie ein Blockdesign wie Twenty Twenty-Two oder Twenty Twenty-Three verwenden. Hier können Sie mit WordPress Ihre gesamte Seitenarchitektur bearbeiten, einschließlich Kopfzeilen, Fußzeilen, Menüs, Seitenvorlagen, Widgets und der Homepage.

Vorlagen-Editor

Etwas, das vielen Leuten vielleicht nicht bewusst ist, ist, dass Gutenberg auch einen eigenständigen Editor für Seiten- oder Beitragsvorlagen enthält. Auch dies ist nur für Blockthemen verfügbar. Sie können vom Seiten-/Post-Editor aus darauf zugreifen, wenn Sie auf den Namen der verwendeten Vorlage klicken.

Von dort aus haben Sie die Möglichkeit, Ihre aktuelle Vorlage zu ändern oder benutzerdefinierte Seitenvorlagen zu erstellen. Er hat eine etwas andere Benutzeroberfläche als der Site-Editor, ist sich aber insgesamt sehr ähnlich.

Widget-Editor

Dieser Teil liegt etwas außerhalb des restlichen Blockeditors, ist aber offiziell Teil des Gutenberg-Projekts, daher muss ich ihn hier erwähnen. Inzwischen erstreckt sich die Blockeditor-Benutzeroberfläche auch auf die Widget-Verwaltung. Sie finden es unter Darstellung > Widgets in klassischen Designs. In Block-Designs erfolgt die Handhabung von Widgets, wie bereits erwähnt, im Site-Editor.

Dazu muss ich ehrlich gesagt nicht viel sagen. Ich denke nicht, dass es unbedingt besser oder schlechter ist als das alte Menü und es erfüllt seinen Zweck. Daher gehe ich im Folgenden nicht näher auf den Widget-Editor ein. Wenn jemand andere starke Gefühle oder Meinungen dazu hat, würde ich es gerne in den Kommentaren hören!

Überprüfung des Gutenberg Post/Page Editors

Nachdem wir nun eine Vorstellung davon haben, was den Gutenberg-Blockeditor umfasst, wollen wir uns ansehen, wie seine verschiedenen Raten funktionieren. Wir beginnen mit dem Post/Page Editor.

Was ich daran mag

Zunächst einmal muss ich sagen, dass ich generell sehr gerne Inhalte mit dem Blockeditor erstelle. Ich würde nicht zum Classic Editor zurückkehren wollen, ich habe mich einfach zu sehr an die Vorteile der neuen Erfahrung gewöhnt. Hier sind meine Gründe dafür.

Glatt und modern

Alle Ehre an TinyMCE, das ein wahres Arbeitstier ist, das WordPress seit langem gute Dienste leistet. Seien wir jedoch ehrlich, es ist nicht die modernste Software.

Die klassische Editor-Erfahrung ist etwas klobig und schien ständig in den frühen 2000er Jahren festzustecken. Im Gegensatz dazu sieht Gutenberg oder der Blockeditor einfach aktueller aus.

Es ist geräumig, minimalistisch gestaltet und sauber. Ich finde es auch einfach, alle wichtigen Einstellungen und Informationen zu entdecken. Ich jedenfalls bin nicht überrascht, dass es in andere Content-Management-Systeme übernommen wird.

Was du siehst ist was du kriegst

Zweitens genieße ich, dass das Bearbeitungserlebnis viel mehr auf das fertige Ergebnis auf der Seite abgestimmt ist. In TinyMCE hatten Sie zwar die Möglichkeit, Editorstile hinzuzufügen, aber Sie mussten ständig eine Vorschau der Seite anzeigen, um zu sehen, wie der Inhalt auf Ihrer Website aussieht.

Dies gilt insbesondere für untypische Elemente wie Buttons oder Formulare. In TinyMCE war es oft notwendig, diese über Shortcodes hinzuzufügen. Folglich endete man manchmal mit einem Dokument voller Klammern, deren Bedeutung man kennen musste, um zu entschlüsseln, was vor sich ging.

Im Gegensatz dazu sieht man im Gutenberg-Blockeditor, außer bei expliziter Verwendung des Shortcode-Blocks, meist die fertigen Elemente im Editor. Selbst wenn Sie dies nicht tun, haben Sie zumindest einen gültigen Platzhalter.

Ich finde das sehr nützlich, um Inhalte visuell zu ergänzen. Früher musste ich viele Dinge wie „[Screenshot]“ in meinen Artikeln posten, um die Stellen zu markieren und zu finden, an denen ich Bilder einfügen wollte. In Gutenberg kann ich beim Schreiben einfach Bildblöcke hinzufügen und diese füllen, wenn es an der Zeit ist, Screenshots hinzuzufügen.

Dies ist eine großartige Möglichkeit, Post-Inhalte zu erstellen, ohne hin und her wechseln zu müssen. Natürlich ist es keine vollkommen parallele Erfahrung. Beispielsweise müssen Sie häufig prüfen, ob Bilder eine andere Ausrichtung benötigen. Aber es ist viel besser als vorher.

Einfach zu navigieren

Eine Sache, an die ich mich über den Classic Editor erinnere, ist: So. Viel. Scrollen.

Wenn ich eine frühere Passage noch einmal lesen oder einen anderen Teil des Beitrags ändern wollte, blieb mir nichts anderes übrig, als das Mausrad zu verwenden. Dies machte es leicht, den Überblick über den Gesamtinhalt zu verlieren, und manchmal war es schwierig, bestimmte Orte zu finden.

Im Blockeditor ist das etwas ganz anderes. Das Menü, das sich öffnet, wenn Sie auf das kleine i- Symbol oben links klicken, ist tatsächlich eine der Optionen, die ich am häufigsten verwende.

Sie können eine Aufschlüsselung des gesamten Beitrags über seine Überschriften anzeigen und mit Gutenberg können Sie mit einem Klick zu verschiedenen Abschnitten springen. Das ist so unglaublich nützlich, besonders wenn man wie ich dazu neigt, sehr lange Stücke zu schreiben.

Was wäre besser

Natürlich ist die Verwendung des Post/Page Editors nicht alles Rosen und Schmetterlinge. Auch sie weist Mängel auf, von denen ich einige als schwerwiegend bezeichnen würde.

Leistung

Mein Hauptproblem ist die manchmal fleckige Leistung des Editors. All das JavaScript, das zum Ausführen erforderlich ist, kann Ihren Browser wirklich belasten.

Wie ich bereits erwähnt habe, neige ich dazu, längere Artikel zu schreiben. Auf meinem eigenen Blog sind die Posts normalerweise mindestens 3.000-4.000 Wörter lang, einiges darüber hinaus.

Ich habe kürzlich auf einen neuen Laptop aufgerüstet und, ich mache keine Witze, einer der Hauptgründe war, dass der Blockeditor auf meinem fünf Jahre alten Computer nach einer bestimmten Anzahl von Wörtern einfach unbrauchbar wurde. Es verlangsamte sich zu einem Schneckentempo und dauerte so lange, um nur normale Aufgaben auszuführen, dass ich manchmal gezwungen war, Teile eines Beitrags in einen neuen Artikel zu kopieren, sie dort zu bearbeiten und dann zurück zu kopieren. Ich kann mich nicht erinnern, dass ich das jemals im Classic Editor machen musste.

Dies ist also ein ernsthafter Bereich für Verbesserungen, auch wenn die Dinge bereits besser geworden sind. Zur Stabilität gibt es auch etwas zu sagen, aber dazu komme ich weiter unten.

Fehlende Tastaturkürzel

Eines der Dinge, die mir am Classic Editor am besten gefallen haben, waren seine robusten Tastaturkürzel. Sie können Text ganz einfach in Überschriften umwandeln, Überschriften in eine andere Reihenfolge bringen oder zwischen geordneten und ungeordneten Listen wechseln. Alles ohne die Maus zu berühren.

Dies ist ein Teil, der im Blockeditor einfach fehlt. Es gibt zwar vernünftige Tastaturkürzel (finde sie im Menü in der oberen rechten Ecke oder durch Drücken von Shift+Alt+H ), aber sie decken einfach nicht so viel ab wie TinyMCE.

Ja, es gibt Slash-Befehle, mit denen Sie beliebige Blöcke eingeben können (was großartig ist). Wenn ich aber bestehenden Text in eine Überschrift umwandeln oder von h2 auf h3 wechseln möchte, muss ich meist die Maus benutzen.

Vielleicht ist das ein persönliches Ärgernis, aber meiner Meinung nach könnte es definitiv besser sein.

Eintauchen in den Site-Editor

Lassen Sie uns als Nächstes in dieser Gutenberg-Rezension über den Site-Editor sprechen. Auch hier gibt es viel Gutes und einiges, was besser sein könnte. Denken Sie jedoch daran, dass dies ein Projekt ist, das sich noch in der Entwicklung befindet (wie durch das Beta- Tag neben dem Menüpunkt angezeigt wird).

Nehmen Sie daher etwas von dem, was ich unten erwähne, mit einem Körnchen Salz.

Was der Site-Editor gut macht

Ich beginne mit den Dingen, in denen sich der Site Editor meiner Meinung nach bereits auszeichnet.

Sehr kraftvoll

Es ist nicht zu leugnen, dass der Site-Editor eine Menge leisten kann und eine unglaubliche Menge an Macht in die Hände von technisch nicht versierten Benutzern gibt.

Anpassen von Seitenvorlagen, Erstellen und Ändern von Kopf- und Fußzeilen und anderen Website-Elementen – noch vor ein paar Jahren musste man dafür entweder PHP kennen, jemanden einstellen oder ein Seitenerstellungs-Plug-in installieren. Jetzt, mit dem richtigen Thema, ist es eine native Funktion von WordPress und das ist einfach großartig. Darüber hinaus ist die Möglichkeit, den gesamten Stil Ihrer Website mit einem einzigen Klick zu ändern, umwerfend.

Beide ermöglichen es Nicht-Entwicklern, sehr grundlegende Änderungen an ihren Websites vorzunehmen und im Grunde selbst benutzerdefinierte Themen zu erstellen. Zumal sie ihre Änderungen auch exportieren können, um sie auf anderen Websites zu verwenden. Dies ist definitiv ein Fortschritt und entspricht voll und ganz dem Grund, warum so viele Menschen WordPress lieben.

Blockmuster und Vorlagenteile

Zwei Tools, die am meisten dazu beitragen, den Seiteninhalt auf entscheidende Weise zu ändern, sind Blockmuster und Vorlagenteile. Die Möglichkeit, das Layout einer Abfrageschleife komplett zu ändern oder die Kopf- und Fußzeile mit nur wenigen Klicks auszutauschen, ist ziemlich unbezahlbar.

Was den Entwicklern wirklich aufgefallen ist, ist die Leichtigkeit, mit der Sie Blockmuster hinzufügen können, auch aus dem Musterverzeichnis. Einfach kopieren und einfügen und sie sind sofort dort verfügbar, wo Sie sie brauchen. Damit können Sie in sehr kurzer Zeit vollständig ausgearbeitete Layouts erstellen.

Raum für Verbesserung

Gleichzeitig gibt es eine Menge Kritik, die Sie gegen diesen Teil des Blockeditors richten können.

Nicht die benutzerfreundlichste

Ich bewundere zwar die rohe Kraft, die der Site-Editor bietet, aber es macht es nicht immer einfach, ihn aus der Perspektive des Benutzers einzusetzen. Während die Benutzeroberfläche so komprimiert ist, dass sie sich gut zum Bearbeiten von Seiten und Beiträgen eignet, bedeutet die höhere Komplexität der Anpassung Ihrer gesamten Website, dass Sie häufig nach Einstellungen suchen. Die Anzahl der Menüs ist begrenzt, was bedeutet, dass Sie oft viele Klicks ausführen müssen, um Ihr Ziel zu erreichen.

Abgesehen davon sind es oft die kleinen Dinge:

• Das Verschieben von Blöcken in der Listenansicht mit der Maus ist sehr schwierig. Sie landen oft dort, wo Sie sie nicht haben wollen.
• Im Allgemeinen kann das Positionieren von Seitenelementen etwas mühsam sein (Wortspiel beabsichtigt).
• Herauszufinden, was zu tun ist, kann eine Weile dauern, selbst für jemanden, der es gewohnt ist, Websites zu erstellen.

Die mit Abstand verwirrendste Aufgabe ist das Erstellen von Menüs. Um ehrlich zu sein, bin ich mir nicht einmal sicher, ob ich es zu diesem Zeitpunkt vollständig verstanden habe. Sie tun es irgendwie auf der Seite, aber es gibt auch den Link Menüs verwalten in den Blockoptionen, der Sie zur alten Benutzeroberfläche führt, wo Sie nicht wirklich etwas tun können.

Ich sehe, dass dies bei den Benutzern für viel Frustration sorgt, und finde einige der Kritik absolut berechtigt.

Fehlende Dokumentation

Dies geht Hand in Hand mit dem oben Gesagten. Bei der Arbeit mit dem Site Editor ist mir aufgefallen, dass es sehr schwierig ist, gute Hilfe für bestimmte Probleme zu finden, zumindest bei Google. Ich weiß, dass es die offizielle Support-Seite gibt, und ich möchte dem Support-Team, das eine großartige Arbeit leistet, nichts vorenthalten.

Tatsache ist jedoch, dass ich meistens durch Trial-and-Error herausfinden musste, wie man bestimmte Aufgaben erledigt, weil ich nicht wirklich eine gute Ressource finden konnte, auf die ich zurückgreifen konnte. Vor allem, wenn Sie Hilfe zu bestimmten Blockfunktionen suchen.

Vielleicht liegt es auch daran, dass das alles ziemlich neu ist, aber ich fand einen deutlichen Mangel an guten Artikeln zum Site Editor.

Fehlende Funktionalität

Eine andere Sache, die mich stört, ist, dass es einige Dinge gibt, die Sie mit dem Site-Editor (noch) einfach nicht machen können. Beispiele hierfür sind das Festlegen negativer Ränder oder das Erstellen von Boxschatten (obwohl dies auf der Roadmap steht).

Wenn ich davon profitieren möchte, muss ich immer noch benutzerdefiniertes CSS verwenden. Das ist a) etwas, was Anfänger nicht wissen, und b) macht den Zweck des Editors zunichte. Zumindest zwingt es Sie zu einem hybriden Ansatz, bei dem Sie die grundlegende Seitenstruktur und die groben Designstriche mit dem Site-Editor erstellen, aber für den letzten Schliff immer noch zum Stylesheet zurückkehren müssen.

Natürlich können Sie nicht erwarten, dass der Editor alle möglichen Optionen anbietet, die CSS bietet. Manchmal scheint der Funktionsumfang jedoch immer noch etwas dünn zu sein.

Auf der anderen Seite ist das einfach die schwierige Position, in der sich der Site Editor befindet. Er ist kein richtiger Page Builder, weil ihm bestimmte Fähigkeiten fehlen, aber er ist auch weit über eine grundlegende Option wie den WordPress Customizer hinaus. Infolgedessen landet es irgendwo in der mittleren Grauzone, was ihm nicht immer gut tut.

Stabilität

Schließlich ist einer der größten Nachteile der Full-Site-Bearbeitung und ein Thema, das Teil jeder Gutenberg-Überprüfung sein muss, die Stabilität. Der Site-Editor ist bei weitem derjenige, in dem ich die meisten Abstürze gesehen habe.

Zu seiner Verteidigung hat das bisher noch nie zu großen Datenverlusten geführt, was bedeutet, dass es immer ziemlich einfach und schnell war, das zu wiederholen, was ich vor dem Absturz getan habe, was hauptsächlich auf die hervorragende automatische Speicherfunktion zurückzuführen ist.

Zusammen mit den oben genannten Leistungsproblemen ist die Stabilität jedoch definitiv ein Bereich, der die meiste Aufmerksamkeit verdient, da er sehr schnell nervig werden kann.

Vorlagen-Editor

Wie bereits erwähnt, ist dies der Editor, der dem Seiten-/Post-Editor zugeordnet ist. Es ist eine etwas abgespeckte Version des Full-Site Editing-Erlebnisses.

Ich gehe davon aus, dass es dazu dient, Änderungen an Seitenvorlagen im Handumdrehen vorzunehmen, ohne den ganzen Weg zurück zum Site-Editor gehen zu müssen. Das ist im Allgemeinen eine gute Idee, obwohl ich sagen muss, dass dies der Teil des Blockeditors ist, den ich am wenigsten benutzt habe. Daher ist meine Meinung dazu relativ neutral. Das heißt aber nicht, dass ich keine habe.

Hier ist, was ich mag

Mal sehen, was der Vorlagen-Editor für sich hat.

Gut für seinen Verwendungszweck

Wenn der Zweck dieses Editors wirklich darin besteht, Vorlagen unterwegs zu ändern, denke ich, dass er seine Arbeit gut genug macht. Sie können die Reihenfolge des vorgestellten Bildes und des Seitentitels ändern, Schriftarten und Farben ändern oder sogar Kopf- oder Fußzeilen ändern.

Wenn Sie also an einer Seite oder einem Beitrag arbeiten und feststellen, dass etwas an der Vorlage geändert werden muss, können Sie dies schnell und einfach tun. Alternativ ist es auch möglich, vor Ort eigene Seitenvorlagen zu erstellen. Auf diese Weise können Sie Änderungen nur auf diese eine Seite anwenden oder sie anderen ausgewählten Inhalten zuweisen. Auch hier ist kein Code für etwas erforderlich, für das Sie früher definitiv einen Code-Editor benötigt haben.

Was ich nicht mit an Bord bekommen konnte

Auf der anderen Seite ist hier, was mir nicht so gut gefallen hat.

Für Anfänger möglicherweise verwirrend

Das Hauptproblem, das ich mir für den Template-Editor vorstellen kann, ist, dass es für Anfänger, die nicht so viel über das Erstellen von Websites wissen, schwierig ist, zu verstehen, wo sie was tun sollen. Zum Beispiel, dass Sie die Seite nicht im Template-Editor mit Inhalten füllen sollen, sondern nur strukturelle Änderungen am Template selbst vornehmen und dann im Page/Post-Editor Inhalte hinzufügen sollen.

Auch hier ist es ein bisschen die Frage, wie man so viel Macht in die Hände der Benutzer legt, ohne sie richtig zu lehren, wie man sie anwendet.

Abschließende Gedanken: Gutenberg Review

Da haben Sie es also, eine Überprüfung des WordPress-Blockeditors und der Implementierungen des Gutenberg-Projekts von jemandem, der täglich professionell mit der Plattform arbeitet.

Auch wenn ich viel Kritik hatte, bin ich generell ein großer Fan des neuen Bearbeitungserlebnisses. Besonders den Blockeditor für Beiträge und Seiten möchte ich nicht missen. Klar, es gibt noch Luft nach oben, aber es ist definitiv schon auf einem guten Niveau.

Darüber hinaus ist die obige Liste keineswegs vollständig. Ich habe mich auf die wichtigsten Punkte konzentriert, die mir bei meiner Arbeit eingefallen sind. Es gibt noch mehr, über das ich sowohl positiv als auch negativ sprechen könnte. Dies sind jedoch die breiten Striche. Was ist deine Meinung?

Stimmen Sie meiner Gutenberg-Rezension zu? Was halten Sie vom Blockeditor und wie er implementiert wurde? Bitte teilen Sie in den Kommentaren unten!