Stimmt es wirklich, dass der Gutenberg Block-Editor die WordPress-Welt monumental verändern soll, wie es heißt? Wir haben uns das ansehen wollen und die Beta-Version des Gutenberg-Plugins getestet.
Hinweis: dieser Artikel wurde am 11. Juli 2018 verfasst. Seither hat sich Gutenberg kräftig weiterentwickelt und wird durch weitere Block-Plugins erweitert.
Ich schreibe diesen Blogbeitrag bereits im neuen Gutenberg Editor (»Block-Editor«) der demnächst mit der WordPress Version 5.0 veröffentlicht werden soll. Jetzt sind wir immerhin ja schon bei WordPress-Version 4.9.7 (Status 11. Juli 2018) angelangt, also müssen wir uns als WordPress Redakteurinnen wohl damit beschäftigen. Schließlich wird Gutenberg den aktuellen TinyMCE Editor komplett ersetzen.
Stimmt es wirklich, dass er die WordPress-Welt monumental verändern soll, wie es heißt? Ich wollte das mal etwas genauer unter die Lupe nehmen, und habe die Beta-Version des Gutenberg-Plugins getestet.
Installation
Ich erstelle eine neue Seite, und sofort erscheint ein Text, der mich in die „wunderbare Welt der Blöcke“ willkommen heißt. Wie schön!
Die obere Seitenleiste
Obere Seitenleiste, links
Wenn ich das “+” anklicke (“Add block”), kann ich einen neuen Block einfügen. Es gibt Blöcke für jede mögliche Art von Content:
Fließtext (Absatz)
Überschriften
Bilder
Listen
Zitate
Galerien
Audio
Video
Dateien
Untertitel
Erster Eindruck: viel mehr Platz und ganz schön viele Blöcke!
Die Blöcke unterteilen sich in:
Allgemeine Blöcke (wie die bereits oben genannten)
Formatierungs-Blöcke: hier kann man seinen eigenen Code oder HTML eingeben, eine Tabelle, ein Pullquote (hervorgehobenes Zitat) und weitere Blöcke, deren Sinn sich mir aber noch nicht ganz erschließt
Layout-Elemente: hier kann man Buttons, Spalten, Textspalten, Seitenumbrüche, Trennzeichen usw. einfügen
Widgets: Shortcode, Kategorien, neueste Beiträge
Embeds: das sind die Social Media Icons, die man hier einfügen kann
Gleich neben dem „+“ Symbol befindet sich ein Pfeil, mit dem ich meine Änderungen rückgängig machen kann. Sehr praktisch! Bisher war der Rückgängig-Pfeil schlecht sichtbar im WordPress Editor. Man musste zuerst die Werkzeugleiste umschalten, um ihn überhaupt sehen zu können.
Obere Seitenleiste, rechts
Vorschau: Ich kann eine Vorschau meines Beitrags laden, um sicherzugehen, ob ich mit meinen Blöcken zufrieden bin.
Veröffentlichen: Wenn ich fertig geschrieben habe, klicke ich einfach rechts oben auf Veröffentlichen und schon ist mein Beitrag online.
Unter dem Zahnrad rechts oben kann ich weitere Einstellungen zum Dokument vornehmen, wie z.B. Sichtbarkeit, Veröffentlichungsdatum, Beitragsformat, Kategorien, Schlagwörter, usw.
Ebenso kann ich hier die Einstellungen der Blöcke verändern.
Erster Eindruck: Durch die obere Seitenleiste ist der Gutenberg Editor übersichtlicher. Wenn ich einen Beitrag am Smartphone oder Tablet schreibe, muss ich nicht nach oben scrollen, wie bisher, um meinen Beitrag vorab zu sehen. Doch wo ist der „Speichern“- Button geblieben? Erst später komme ich drauf, dass mein Beitrag automatisch gespeichert worden ist.
Neuer Blog-Beitrag
So, jetzt mal genug von der oberen Seitenleiste. Gehen wir ans richtige Handwerk, nämlich einen Blogbeitrag schreiben.
Sobald ich auf „Return“ drücke, macht der Gutenberg Editor automatisch einen neuen Block, den er als „Absatz“ einstuft.
Über dem Block erscheint eine Leiste mit mehreren Möglichkeiten: ich kann den Block-Typ ändern, die Position des Textes ändern, fett/kursiv schreiben oder den Text durchstreichen. Was ich wunderbar finde: es gibt hier die Möglichkeit, direkt im Text einen Link einzufügen. Falls man einen Beitrag am Smartphone oder Tablet verfasst, muss man im TinyMCE Editor immer ganz nach oben scrollen, um einen Link einfügen zu können. Das hat mich immer genervt. Jetzt kann ich das viel schneller machen. Ein großer Pluspunkt!
Gutenberg-Editor – Texte schreiben
Ebenso kann ich die Blöcke rauf- und runterschieben. Das ist ganz schön praktisch… Ich muss nicht mehr mit „Ausschneiden“ und „Einfügen“ arbeiten.
Der Nachteil: Wenn ich mehrere Blöcke entfernen möchte, muss ich bei jedem einzelnen Block auf die drei Punkte rechts und auf »entfernen« klicken. Ich kann leider nicht mehrere Blöcke auf einmal entfernen. Oder zumindest habe ich noch nicht herausgefunden, wie es funktioniert.
Was ich ebenfalls sehr praktisch finde: Wenn ich bei einem Block auf die drei Punkte klicke, kann ich ihn als wiederverwendbar markieren: „In wiederverwendbaren Block umwandeln“. Somit kann ich diesen Block immer wieder an einer anderen Stelle einfügen.
Texteinstellungen
Gutenberg-Editor – Texteinstellungen
Wenn ich meinen Text in einem Block schreibe, und auf das Zahnrad in der oberen Seitenleiste klicke, habe ich unter „Blöcke“ mehrere Formatierungsmöglichkeiten für meinen Text.
Ich kann Text größer oder kleiner machen, ich kann die Hintergrundfarbe meines Blocks ändern, oder nur die Textfarbe.
Ich finde es allerdings etwas verwirrend, dass die Text-Einstellungen sowohl beim Block selbst, als auch rechts zu finden sind. Schöner wäre es, das alles unter einem Punkt zu haben.
Layout-Möglichkeiten
Spalten
Ich habe die Möglichkeit, meinen Text in zwei Spalten zu unterteilen. Leider befindet sich dieser Block noch in der Beta-Version und funktioniert noch nicht einwandfrei. Füge ich nämlich Spalten hinzu, kann ich sie nicht mehr löschen. Da bleibt mir nur noch übrig, auf den „Rückgängig-Pfeil“ zu klicken. Schade!
Den Page-Builder ersetzt der Gutenberg-Editor somit wohl nicht.
Gutenberg-Editor – Spalten
Buttons
Dafür finde ich die Option, Buttons einzufügen sehr gut. Eignet sich super für Call-to-Actions, also Handlungsaufrufe. Damit kann ich Besucher dazu animieren, sich anzumelden, zu kaufen oder mehr zu lesen. Die Buttons kann ich individuell benennen und ihre Farbe in den Einstellungen ändern, wenn ich auf das Zahnrad rechts oben in der Seitenleiste klicke. Ebenso kann ich die Textfarbe ändern. Falls ich ein individuelles Design des Buttons erstellen möchte, kann ich zusätzliche CSS-Klassen einfügen, was allerdings nur Profis vorbehalten ist.
Gutenberg-Editor – Buttons
Bilder
Als ich versucht habe, im Beitrag ein Titelbild einzufügen, hat das leider nur teilweise geklappt. Es hätte sich über die gesamte Bildschirmbreite erstrecken sollen. Das Bild ist hingegen leider klein geblieben, obwohl es viel größer und breiter hätte sein müssen für ein Titelbild. Erst nach einer kurzen Recherche im Team haben wir gemeinsam festgestellt, wie es tatsächlich funktioniert. Das ist also ebenfalls nur Profis vorbehalten, denn dazu muss ein wenig in der Datei functions.php des Themes vorbereitet werden, falls das Theme die Fähigkeit nicht mitbringt. Schade eigentlich… (Anm.: mittlerweile kein Problem)
Gutenberg-Editor – Cover
Dafür klappt es mit kleineren Beitrags-Bildern einwandfrei, und ich konnte sie auch gleich betiteln. Ebenso kann ich Bilder mit dem Gutenberg Editor viel flexibler einfügen, als im aktuellen Editor.
Auch eine Bildergalerie kann ich rasch und problemlos erstellen.
Gutenberg-Editor – Bildgalerie
Fazit aus meiner Sicht
Der Gutenberg Editor befindet sich noch in der Entwicklung. Bis zur Fertigstellung wird sicher noch einiges passieren. Ich habe jetzt auch nicht alle Funktionen getestet, wollte mir vorerst nur einen Überblick verschaffen.
Vorteile:
Die Flexibilität: ich kann Content nun viel rascher und problemloser einfügen als bisher
Es ist alles viel besser sichtbar und intuitiver
Ich kann Blöcke verschieben
Texte lassen sich leichter formatieren
Texte und Bilder lassen sich problemlos aus Word kopieren und einfügen
Links lassen sich direkt im Text einfügen – sehr praktisch, wenn man auf anderen Geräten als am Desktop arbeitet
Mit neuen Elementen wie Spalten, Buttons gibt es mehr Möglichkeiten, meinen Content zu gestalten
Gestaltete Blocks lassen sich zur Wiederverwendung speichern
Nachteile:
Die Spalten funktionieren nicht einwandfrei, ich kann sie auch nicht löschen (Anm.: mittlerweile machbar)
Das Einstellen des Titelbildes über die gesamte Bildschirmbreite klappt nur mit Expertise (Anm.: mittlerweile machbar)
Ich kann nicht mehrere Blöcke auf einmal entfernen (Anm.: mittlerweile machbar)
Viele Layout-Arbeiten kann der durchschnittliche User nicht selbst erledigen und benötigt die Hilfe von Profis mit PHP und/oder CSS-Kenntnissen. (Anm.: mittlerweile machbar bzw. gibt es Block-Plugins wie Stackable)
Ich empfehle Ihnen, den Gutenberg-Editor unbedingt selbst zu testen. Aber Vorsicht: da sich das Plugin noch in der Entwicklungsphase befindet, sollten Sie das nicht auf Ihrer Live-Website, sondern auf einer Test-Website machen. Wir stehen Ihnen aber gerne auch hier und bei Fragen gerne zur Verfügung!
Hallo, ich habe den Gutenberg Editor installiert und verzweifle gerade an meinen neuen Texten. Lässt sich irgendwo einstellen, dass die Haupttextfarbe schwarz sein soll? Wenn ich bei jedem Block die Seitenleiste mit Textfarbe verwenden muss und da neben bunten Farben nur dunkelgrau standardmäßig angeboten wird, ist es wirklich sehr mühsam, jeden Text zu markieren und manuell auf schwarz umzustellen. So ist es nicht praktikabel!
Hallo Sandra,
Du nutzt offensichtlich das Theme »Spacious«. Vielleicht findest Du dort die Einstellung für Schriftfarbe generell »Schwarz«. Denn ansonsten dürften die Spacious Entwickler in der Gratis Version das Grau (Farbcode: #666666) einsetzen.
Oder Du setzt eine CSS-Regel im Abschnitt »Design« / »Customizer« / »Benutzderdefiniertes CSS«:
Ich probiere mich auch gerade einige Zeit an Gutenberg. Bei mir ist es scheinbar nicht möglich, ein Bild von Nextgen Gallery einzubinden. Wenn ich ein Bild (-Block) einfügen möchte, dann habe ich als Optionen nur die Standard-Mediathek von WordPress oder ein Bild hochzuladen. Andere Möglichkeiten werden mir nicht angeboten. Für mich ein klarer Nachteil.
Rückt Nextgen Gallery nicht einen Shortcode dafür heraus, der dann im Textblock nutzbar ist? (Wir selbst nutzen die NextGen Gallery nicht)
für komplette »Gallerien« ja – nicht aber für einzelne Bilder. Bisher fand ich jedenfalls keine Lösung für den Fall, dass man Bilder in selbst erstellten Unterodnern verwenden möchte – oder eben z.B. aus Nextgen Gallery. Ein wechsel zwischen klassischem Editor und Gutenberg führte bei mir zu Chaos im Beitrag. Ein Teil der Bilder war noch ein »Bild-Block« ein Teil eher ein »Text-Block« – zumindest wenn man den Formatierungssymbolen oben links (Text bzw Bild links – zentriert – rechts) und den Möglichkeiten in der rechten Leiste (URL zum/vom Bild ) glauben darf.
Die URL Möglichkeite stand bei einigen Bildern nicht zur Verfügung, und oben war auch nur die Variante für Textausrichtung zu sehen, nicht für Bildausrichtng
So mit WP 5.0 wurde ich nun auch mit dem Gutenberg Editor beglückt. Es gibt sicherlich viele Nutzer die den toll finden und neue WP Nutzer kennen dann ja nix anderes. Für mich ist das Ding ein grauen. Zuerst einmal alles auf englisch obwohl ich die deutsche WP Version installiert habe. Dann funktioniert das zwischenspeichern nicht, habe ständig eine Fehlermeldung eingeblendet dazu. Das veröffentlichen eines Beitrages geht auch nicht. Eine vernünftige Bedienungsanleitung hab ich auch nicht gefunden. Aus meiner persönlichen Sicht ist das Teil müll und wäre ein Grund die Nutzung von WP zu beenden. Ich habe nun das Classic Plugin installiert um mit dem alten Editoroberfläche weiter arbeiten zu können.
Das mit englisch ist seltsam. Bei unseren Websites, wo wir bereits umgestellt haben, ist Gutenberg komplett in Deutsch nutzbar.
Stimmt, mitten im Beitrag würden wir nicht wechseln. Entweder das Plugin »Classic Editor« installieren und aktivieren (wie Sie es schon getan haben) und dann wie gewohnt mit WordPress vor 5 (Editor TinyMCE) weiterarbeiten, oder eben zur Gänze Gutenberg nutzen.
Wenn aber das Veröffentlichen eines Beitrags auch nicht mehr klappt, dann hat’s ein gröberes Problem, das nicht auf Gutenberg zurückzuführen ist. Legen Sie mal Plugins der Reihe nach lahm, und wechseln eventuell auch mal für ein paar Minuten das Theme (auf Twenty Nineteen), um zu sehen, ob der Fehler durch eine der Aktionen verschwindet. Denn wenn ein grundlegender Fehler drin ist, dann wurde das durch Gutenberg aufgezeigt, aber eine Fehlerbeseitigung haben Sie mit Weiternutzung des Classic Editors ja nicht erreicht.
Hallo
Das mit den Plugins deaktivieren hab ich schon gemacht ohne erfolg. Als Theme hab ich Twenty Fifteen. Sind auch alle Plugins und das Theme aktuell. Ich ärgere mich da jetzt nicht weiter mit rum. Solange es der Classic Editor macht, bleib ich dabei. Ansonsten öffne ich doch noch den virtuellen Müllkorb und entsorg alles dahinein^^. Aufgrund des Wahnsinns mit der DSGVO hab ich schon alle Webseiten entsorgt, die letzte nutzt meine Frau aber lange ärgern tu ich mich da nicht mit.
Hallo,
hab eine Frage zu Gutenberg. Bei allen Beiträgen die vor Gutenberg erstellt wurden wird wenn ich Beitragsformat Galerie auswähle auf der Startseite eine Vorschaugalerie angezeigt, seit den Blöcken nicht mehr. Gibts da eine Lösung?
Danke für eure Hilfe
Das sollte wohl nicht so sein, weil das gewählte Format mit den Inhalten nichts zu tun hat. Vermutlich liegt das am gewählten Theme, bei dem die Entwickler noch nicht nachgezogen haben.
Im Beitrag selbst befindet sich eine Galerie?
Mehrere Blöcke lassen sich mit Shift-Klick auf den ersten und letzten der zu löschenden Blöcke markieren und mit der Entfernen-Taste löschen
Wir analysieren unsere Website zwecks Reichweitenmessung sowie Optimierung und Personalisierung von Inhalten und Werbung. Eingebundene Dritte führen diese Informationen ggf. mit weiteren Daten zusammen. Mehr dazu lesen Sie in der Datenschutzerklärung. Ihre vorgenommenen Einstellungen können Sie jederzeit über die Cookie-Richtlinie ändern. Mit der weiteren Nutzung dieser Website stimmen Sie – jederzeit widerruflich – dieser Datenverarbeitung durch den Seitenbetreiber und Dritte zu.
Einige Services verarbeiten personenbezogene Daten in den USA. Mit Ihrer Einwilligung zur Nutzung dieser Services stimmen Sie auch der Verarbeitung Ihrer Daten in den USA gemäß Art. 49 (1) lit. a DSGVO zu. Das EuGH stuft die USA als Land mit unzureichendem Datenschutz nach EU-Standards ein.
Hier können Sie ganzen Kategorien zustimmen oder diese ablehnen.
Funktional
Immer aktiv
Diese Cookies sind für die technische Funktion der Website unerläßlich. Diese dienen keinen Trackingzwecken.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt.Diese Cookies dienen der Erhebung von Daten zur statistischen Auswertung der Website-Besuche. Die Auswertung ermöglicht uns keine Rückführung auf konkrete Personen und deren Aktivitäten auf dieser Website.
Marketing
Diese Cookies ermöglichen das Führen anonymisierter Besucherprofile, damit wir den Besucher/innen personalisierte Werbung website-übergreifend zeigen können.
Hallo, ich habe den Gutenberg Editor installiert und verzweifle gerade an meinen neuen Texten. Lässt sich irgendwo einstellen, dass die Haupttextfarbe schwarz sein soll? Wenn ich bei jedem Block die Seitenleiste mit Textfarbe verwenden muss und da neben bunten Farben nur dunkelgrau standardmäßig angeboten wird, ist es wirklich sehr mühsam, jeden Text zu markieren und manuell auf schwarz umzustellen. So ist es nicht praktikabel!
Hallo Sandra,
Du nutzt offensichtlich das Theme »Spacious«. Vielleicht findest Du dort die Einstellung für Schriftfarbe generell »Schwarz«. Denn ansonsten dürften die Spacious Entwickler in der Gratis Version das Grau (Farbcode: #666666) einsetzen.
Oder Du setzt eine CSS-Regel im Abschnitt »Design« / »Customizer« / »Benutzderdefiniertes CSS«:
body,
button,
input,
select,
textarea {
color: #000000;
}
p {
color: #000000;
}
Alles Gute.
Ich probiere mich auch gerade einige Zeit an Gutenberg. Bei mir ist es scheinbar nicht möglich, ein Bild von Nextgen Gallery einzubinden. Wenn ich ein Bild (-Block) einfügen möchte, dann habe ich als Optionen nur die Standard-Mediathek von WordPress oder ein Bild hochzuladen. Andere Möglichkeiten werden mir nicht angeboten. Für mich ein klarer Nachteil.
Rückt Nextgen Gallery nicht einen Shortcode dafür heraus, der dann im Textblock nutzbar ist? (Wir selbst nutzen die NextGen Gallery nicht)
für komplette »Gallerien« ja – nicht aber für einzelne Bilder. Bisher fand ich jedenfalls keine Lösung für den Fall, dass man Bilder in selbst erstellten Unterodnern verwenden möchte – oder eben z.B. aus Nextgen Gallery. Ein wechsel zwischen klassischem Editor und Gutenberg führte bei mir zu Chaos im Beitrag. Ein Teil der Bilder war noch ein »Bild-Block« ein Teil eher ein »Text-Block« – zumindest wenn man den Formatierungssymbolen oben links (Text bzw Bild links – zentriert – rechts) und den Möglichkeiten in der rechten Leiste (URL zum/vom Bild ) glauben darf.
Die URL Möglichkeite stand bei einigen Bildern nicht zur Verfügung, und oben war auch nur die Variante für Textausrichtung zu sehen, nicht für Bildausrichtng
So mit WP 5.0 wurde ich nun auch mit dem Gutenberg Editor beglückt. Es gibt sicherlich viele Nutzer die den toll finden und neue WP Nutzer kennen dann ja nix anderes. Für mich ist das Ding ein grauen. Zuerst einmal alles auf englisch obwohl ich die deutsche WP Version installiert habe. Dann funktioniert das zwischenspeichern nicht, habe ständig eine Fehlermeldung eingeblendet dazu. Das veröffentlichen eines Beitrages geht auch nicht. Eine vernünftige Bedienungsanleitung hab ich auch nicht gefunden. Aus meiner persönlichen Sicht ist das Teil müll und wäre ein Grund die Nutzung von WP zu beenden. Ich habe nun das Classic Plugin installiert um mit dem alten Editoroberfläche weiter arbeiten zu können.
Das mit englisch ist seltsam. Bei unseren Websites, wo wir bereits umgestellt haben, ist Gutenberg komplett in Deutsch nutzbar.
Stimmt, mitten im Beitrag würden wir nicht wechseln. Entweder das Plugin »Classic Editor« installieren und aktivieren (wie Sie es schon getan haben) und dann wie gewohnt mit WordPress vor 5 (Editor TinyMCE) weiterarbeiten, oder eben zur Gänze Gutenberg nutzen.
Wenn aber das Veröffentlichen eines Beitrags auch nicht mehr klappt, dann hat’s ein gröberes Problem, das nicht auf Gutenberg zurückzuführen ist. Legen Sie mal Plugins der Reihe nach lahm, und wechseln eventuell auch mal für ein paar Minuten das Theme (auf Twenty Nineteen), um zu sehen, ob der Fehler durch eine der Aktionen verschwindet. Denn wenn ein grundlegender Fehler drin ist, dann wurde das durch Gutenberg aufgezeigt, aber eine Fehlerbeseitigung haben Sie mit Weiternutzung des Classic Editors ja nicht erreicht.
Hallo
Das mit den Plugins deaktivieren hab ich schon gemacht ohne erfolg. Als Theme hab ich Twenty Fifteen. Sind auch alle Plugins und das Theme aktuell. Ich ärgere mich da jetzt nicht weiter mit rum. Solange es der Classic Editor macht, bleib ich dabei. Ansonsten öffne ich doch noch den virtuellen Müllkorb und entsorg alles dahinein^^. Aufgrund des Wahnsinns mit der DSGVO hab ich schon alle Webseiten entsorgt, die letzte nutzt meine Frau aber lange ärgern tu ich mich da nicht mit.
Hallo,
hab eine Frage zu Gutenberg. Bei allen Beiträgen die vor Gutenberg erstellt wurden wird wenn ich Beitragsformat Galerie auswähle auf der Startseite eine Vorschaugalerie angezeigt, seit den Blöcken nicht mehr. Gibts da eine Lösung?
Danke für eure Hilfe
Das sollte wohl nicht so sein, weil das gewählte Format mit den Inhalten nichts zu tun hat. Vermutlich liegt das am gewählten Theme, bei dem die Entwickler noch nicht nachgezogen haben.
Im Beitrag selbst befindet sich eine Galerie?
Mehrere Blöcke lassen sich mit Shift-Klick auf den ersten und letzten der zu löschenden Blöcke markieren und mit der Entfernen-Taste löschen