Gutenberg: Breite des Editors anpassen

Seit einiger Zeit arbeite ich – unter anderem hier im Blog – mit dem neuen Gutenberg-Editor. 

Wenn man nicht nur Texte schreibt, sondern auch die Layout-Features von Gutenberg einsetzt (Spalten, Titelbild und so weiter) dann stört einen ziemlich schnell die schmale Standard-Breite von Gutenberg im Backend.

Mit ein bisschen CSS kann man dem Layout im Backend dieselbe Breite geben wie im Frontend.
Angenommen, die Breite des Layouts im Frontend beträgt 1200px, dann sieht das CSS für Gutenberg so aus:

.edit-post-visual-editor .editor-block-list__block {
margin: 0 auto;
max-width: 1200px;
}

Damit diese Anweisungen greifen, müssen wir das CSS in einer Datei im Theme-Verzeichnis abspeichern (z. B. gutenberg.css). 
Abschließend müssen wir die Datei noch per Funktion einbinden: 

function ks_gutenberg_styles() {
wp_enqueue_style( 'gutenberg-css', get_theme_file_uri( '/gutenberg.css' ), false );
}
add_action( 'enqueue_block_editor_assets', 'ks_gutenberg_styles' );

Ich verwende zum Einbetten solcher Funktionsschnipsel sehr gerne das Plugin Code Snippets. Damit kann man die functions.php schön sauber halten und man behält besser den Überblick.

Tipp

Wer es genauer wissen will, was man mit CSS und Gutenberg im Backend alles machen kann, Florian Brinkmann hat einen sehr ausführlichen Artikel zum Thema geschrieben: Theme-Editor-Styles für Gutenberg erstellen

Gutenberg kommt – was mach ich jetzt?

Mit der Version 5.0 wird es einen neuen Editor namens Gutenberg geben. Noch ist nicht ganz klar, wann die neue Version kommt, aber sie ist quasi schon unterwegs.

Wer Websites mit WordPress betreut, fragt sich jetzt, was der neue Editor für WordPress-Projekte und WordPress als CMS bedeutet. Was wird sich ändern? Worauf muss ich achten? Welche Entscheidungen muss ich jetzt treffen?

Noch gibt es nicht auf alle Fragen eine Antwort. Aber ich denke, man kann die Richtung erkennen, in die es weitergehen wird. Und eine kleine Checkliste für den großen Tag gibt es auch.

Was ist dieser Gutenberg nochmal?

Ellen Bauer von Elmastudio hat es sehr schön erklärt:

Das große Stichwort bei Gutenberg sind die sogenannten „Blocks“. Momentan gibt es viele unterschiedliche Elemente, die wir im WordPress-Adminbereich handhaben müssen. Es gibt Beiträge und Seiten, Widgets und Widgetbereiche, Menüs, Anpassungsoptionen im Customizer und meist noch etliches mehr. Letztendlich sollen mit Gutenberg alle diese unterschiedlichen Elemente vereinheitlicht werden und zu Blocks werden. Blocks kann man sich ähnlich wie Legosteine vorstellen, also Bausteine, mit denen man seine Webseite flexibel aufbauen kann.

Ellen Bauer, Was Du über den WordPress Gutenberg-Editor wissen solltest

Was wir wissen

  • Gutenberg kommt 2018, wohl spätestens im Sommer
  • Gutenberg kann viele Dinge, zu denen man heute noch einen PageBuilder braucht
  • Gutenberg kann aber bis auf Weiteres (noch) keinen PageBuilder ersetzen
  • Man muss Gutenberg nicht nutzen. Man kann Gutenberg deaktivieren und durch den klassischen Editor ersetzen (Plugin Classic Editor)
  • Das Update auf 5.0 passiert nicht automatisch, man muss es per Hand installieren (auf den Install-Button klicken)
  • Wer sich unsicher ist, kann mit dem Update auf 5.0 warten. Alle 4.x Versionen bekommen weiter Sicherheitsupdates.

Was wir nicht wissen

Wir wissen nicht genau, wie sich die WordPress-Landschaft durch Gutenberg verändern wird.

Ich vermute, dass nicht alle Plugins und Themes den Übergang zu Gutenberg mitmachen werden. Das hat ganz praktische Gründe: Der Code muss umgeschrieben werden und dazu braucht man entsprechende Ressourcen.
Wahrscheinlich werden davon eher die Kleinen betroffen sein. Anbieter, die hohe Verkaufs- und Downloadzahlen haben, sollten über genügend Mittel verfügen, um Code und Konzept anzupassen.

Dieser Effekt ist übrigens nicht neu. Das Web macht immer wieder tiefgreifende Veränderungsprozesse durch. Vor fünf Jahren gab es z.B. kaum Themes im Responsive Design. Heute ist das Standard.

UPDATE

Ich hab mal kurz recherchiert, was die Entwickler der Theme-Bestseller (Stand 3. März 2018) auf themeforest.net zu Gutenberg sagen.
Die Macher von Avada haben in ihrem Blog einen Artikel dazu geschrieben. Sie beschreiben darin im Wesentlichen die technischen Schwierigkeiten, signalisieren aber, dass sie sich darum kümmern wollen, dass Gutenberg und Avada sich vertragen. Es gibt also Pläne, ein konkretes Theme-Update ist aber noch nicht in Sicht.

Der Entwickler vom Enfold Theme hat sich in einem Support Thread zum Thema Gutenberg geäußert. Bottom line hier: In einer Übergangsphase werden die Nutzer wählen können, ob sie den eingebauten PageBuilder weiter nutzen möchten oder nicht. Wie das genau aussehen wird, muss man abwarten.

Auf der Website des dritten Beststellers, Theme X von Themeco, habe ich keine Informationen gefunden.

Weiterlesen Gutenberg kommt – was mach ich jetzt?

Gutenberg und der Faktor Zeit

Seit einiger Zeit verfolge ich sehr aufmerksam die Entwicklung von Gutenberg. Mir ist klar geworden, dass sich WordPress mit Gutenberg tiefgreifend verändern wird. Das ist eine gute Sache. Aber wo sich Vieles ändert, entsteht auch viel Bewegung.

Gutenberg ist ein anspruchsvolles Projekt und solche Projekte dauern ihre Zeit. Momentan sind wir vielleicht auf halbem Weg angekommen. Ich rechne damit, dass es etwa noch ein Jahr dauern wird, bevor wir etwas haben, das auf einer Live-Seite eingesetzt werden kann.

Ich weiß, es steht der Termin April 2018 im Raum. Den Termin hat Matt Mullenweg in seinem Vortrag „State of The Word“ beim WordCamp US 2017 genannt. Zu diesem Zeitpunkt soll WordPress 5.0 erscheinen und zwar mit Gutenberg als fest integriertem Bestandteil.

Ich halte diesen Termin erstens für unrealistisch und zweitens für unsinnig. Denn nicht nur die Entwicklung von Gutenberg braucht Zeit, auch der Übergang vom alten in einen neuen Zustand.

Der ungeliebte Übergang

Vor vielen, vielen Jahren, als ich frisch gebackene Kommunikations-Designerin war, bekam ich den Auftrag, eine Tageszeitung grafisch zu überarbeiten. Die Zeitung erhielt eine moderne Typografie und ein klareres Layout. Das Ergebnis war richtig gut. Die Redakteure hatten weniger Arbeit, die Abstimmungsprozesse waren schlanker geworden und die Leser bekamen besser lesbare Texte und ein übersichtliches Layout.
Aber alle haben es gehasst. Die Redakteure schimpften über die neuen Strukturen und die Leser fanden ihre Lieblingskolumne nicht wieder.
Weiterlesen Gutenberg und der Faktor Zeit

Morten Rand-Hendriksen: Gutenberg and the WordPress of Tomorrow

Wer sich für Gutenberg interessiert, sollte sich diesen Vortrag vom WordCamp US 2017 von Morten Rand-Hendriksen unbedingt anschauen.

Was wir momentan sehen, ist nur ein sehr kleiner Ausschnitt dessen, was Gutenberg tatsächlich bedeutet. Morten zeichnet das große Bild und erklärt sehr anschaulich, wo es hingehen soll.

Blocks. WYSIWYG. Alles wird anders.
Sehr spannend!