Anzeige
Der Agentur-Server: Das digitale Zuhause für deine Projekte.
↬ Jetzt testen ↬ Jetzt testen!
Daniel Wiegand 2. September 2019

So entfernst du das Gutenberg-CSS aus WordPress

Seit gut einem Jahr, genauer mit dem Maintenance Release 4.9.8 im August 2018, ist der neue Gutenberg-Editor fester Bestandteil von WordPress.

In diesem Release war eine Gutenberg-Demo enthalten und musste nicht mehr aktiv vom Benutzer als Plugin installiert werden. Somit konnten alle Benutzer den neuen Editor testen, bevor er mit WordPress 5.0. „Bebo“ der neue Standard-Editor von WordPress wurde.

Das Problem war nur: Nicht jedes Theme oder Plugin war zum Start von Gutenberg bereit, mit dem neuen Editor zusammenzuarbeiten. Auch Gutenberg selbst war und ist nicht fehlerfrei.

Das hat zu großen Diskussionen innerhalb der WordPress-Community geführt und neben diversen Plugins, die Gutenberg abschalten, ClassicPress hervorgebracht, ein Fork von WordPress aus der Zeit vor Gutenberg.

Ich möchte an dieser Stelle aber gar nicht auf das Für und Wider von Gutenberg eingehen, sondern will dir kurz aufzeigen, was es bei der Abschaltung von Gutenberg zu beachten gibt.

Zu Anfang gab es noch einige Plugins, die den Gutenberg-Editor deaktiviert haben. Mittlerweile hat sich ganz klar ein Plugin etabliert, wenn du deine Website ohne Gutenberg betreiben möchtest oder musst:

Mit über 5 Millionen aktiven Installationen (Stand August 2019) ist der Classic Editor das Mittel der Wahl.

1. Den Classic-Editor installieren

Nach der Installation und Aktivierung des Plugins kannst du den Editor global als Standard-Editor einstellen. Das Plugin bringt keine komplexen Konfigurationen mit sich, sondern regelt die Einstellungen „Gutenberg oder nicht“ für deine WordPress-Installation an zentraler Stelle unter Einstellungen › Schreiben.

Nach der Installation des Classic Editors kannst du selbigen in Einstellungen, Schreiben aktivieren.
Nach der Installation des Classic Editors kannst du selbigen in Einstellungen › Schreiben aktivieren.

Nach erfolgreicher Umstellung auf den Classic Editor sieht deine Eingabemaske wieder wie vor dem Gutenberg Update aus und alle Komponenten, egal ob Theme, Plugin, etc. arbeiten wie gewohnt.

Das wars, alter Zustand wieder hergestellt? Fast!

2. Das Gutenberg-CSS entfernen

Einen Schönheitsfehler bringt das WordPress Update seit der Version 5 mit sich. Mit der Umstellung auf Gutenberg werden auch neue Ressourcen (Javascript, CSS) im Frontend ausgegeben.

Da wir gerade den Editor ausgetauscht haben, brauchen wir z.B. das gesamte „Block CSS“, welches uns WordPress ausspielt, nicht mehr.

Für Gutenberg wird im Frontend die Datei wp-includes/css/dist/block-library/style.min.css mit einer Dateigröße von ca. 30KB geladen.

Das ist für unsere Lösung ohne Gutenberg nur unnötiger Ballast, denn in Zeiten von Performance-Optimierungen zählt jedes Byte und jeder Request. Mehr zu Performance- Optimierung in WordPress findest du bei uns hier.

Du kannst das Laden der Datei aber ganz einfach mit folgendem Code in deiner functions.php unterbinden:

add_action( 'wp_enqueue_scripts', 'drweb_remove_gutenberg_block_css', 100 ); 
function drweb_remove_gutenberg_block_css() {
wp_dequeue_style( 'wp-block-library' ); }

Durch das Ausführen des obigen Codes wird WordPress angewiesen, die Referenz auf wp-block-library-css zu löschen und die Datei wird nicht mehr automatisch ausgespielt. Somit sparst du dir einen unnötigen HTTP-Request und machst deine Seite einen Tick schneller.

Daniel Wiegand

Daniel Wiegand

Daniel arbeitet seit 2016 freiberuflich (https://wiegand.io/) in den Bereichen Consulting und Entwicklung, mit den Schwerpunkten Frontend und WordPress. Zuvor war er knapp 10 Jahre geschäftsführender Gesellschafter der FirstSquare GmbH in Karlsruhe. In seiner Freizeit engagiert sich Daniel als einer der Organisatoren des Karlsruher WordPress Meetup und organisiert seit 2012 den Karlsruher Webmontag, einer ständigen Vortrags-Veranstaltung um Web-Themen.

8 Kommentare

  1. Manchmal frage ich mich, weshalb die Grundhaltung, die Einstellung, so vieler Leute zum Gutenberg-Editor so schlecht ist. Ich arbeite inzwischen seit vielen Monaten nur noch mit diesem Editor. Die anfänglichen Hürden sind längst abgebaut. Persönlich bin ich rundherum zufrieden. Ich gebe das mal als „andere Farbe“ in die Diskussion, weil positive Ansichten doch leider wirklich selten sind. Wie gesagt, verstehen kann ich das nicht.

    • Weil Gutenberg das Bearbeiten von Seiten unnötig umständlich und unübersichtlich macht. Der Editor hält keinerlei Vorteile bereit. Hinzu kommen ca. 30 KB CSS, die ich dann wieder mit eigenem CSS überschreiben muss (damit es nicht nur funktioniert, sondern auch etwas hübsch aussieht). Hat man mal einen Pagebuilder (BeaverBuilder, Elementor) eingesetzt, merkt man schnell, wie unausgereift dieser Schnellschuss „Gutenberg“ ist. Der Namensgeber dürfte sich im Grab umdrehen angesichts der Tatsache, dass sein Name für diesen Schrott missbraucht wird. Und auch zukünftig wird es vorerst nicht besser: Denn dazu müsste Gutenberg neu überdacht und programmiert werden. Das Ganze schreibe ich nicht mit dem Hintergrund, dass ich Gutenberg mal gerade fünf Minuten ausprobiert habe. Ich habe vier Webseiten mit Gutenberg erstellt und die von dir erwähnten anfänglichen Hürden überwunden. Dabei habe ich allerdings festgestellt: Null Vorteile, nur umständlicher und (zeit-)aufwändiger.

    • Wie schon oben erwähnt, nervt es auch mich extrem, dass man ständig – wenn irgendetwas anders oder sagen wir hübscher aussehen soll – das ganze Gutenberg-CSS überschreiben muss. Darüber hinaus ist der Editor immer noch recht fehleranfällig, nicht selten enden Versuche, etwas auszuprobieren mit „Der Block verursachte einen Fehler und kann nicht angezeigt werden“ (oder so ähnlich). Ich habe auch schon einige Projekte mit Gutenberg erstellt und bin dann im Zuge dessen immer wieder überrascht, wieviel mehr Entwicklungs-Aufwand Gutenberg erfordert. Früher erstellte man einen Shortcode, formatierte das Ganze ansprechend, und gut war es (und auch meine Kunden sind mit den Shortcodes klargekommen). Heut muss man aufwändig einen Block erstellen, um irgendwie ein etwas individuelleres Layout präsentieren zu können.
      Immer wieder stelle ich auch fest, dass viele/manche Blöcke völlig unausgereift sind: Z.B. wollte ich kürzlich den „Medien und Text“-Block nutzen und musste dann entsetzt feststellen, dass es nicht vorgesehen/möglich ist, das Bild zu verlinken. Wer denkt sich denn so etwas aus?
      Auch der Spalten-Block – ein an sich super Featuer – ist immer noch völlig unsaugereift (und das nach über einem Jahr im WP-Core), es ist nicht möglich, verschieden breite Spalten zu verwenden, außer man schreibt wieder jede Menge neues CSS.
      Mein augenlbikcliches Fazit ist: Für kleinere unaufwändige Projekte mit wenig individuellem Design ist Gutenberg ganz OK, es lässt sich mit überschaubarem Budget eine Website erstellen, alles was in Richtuung mehr Individualität geht, ist viel aufwändiger als früher.

  2. Als es die Updates mit Gutenberg gegeben hat habe ich gleich den CLASSIC-Editor installiert und diesen aktiviert.
    Nach ein paar Monaten wollte ich den Gutenberg mal ausprobieren und habe diesen aktiviert und den CLASSIC-Editor abgeschaltet. Als ich dann in der Navigation auf Seiten Geklickt habe und dann eine Seite ausgewählt habe erschien außer der Navigation auf der linken Seite im Administrator-Bereich von WordPress nur eine leere weiße Seite. Was habe ich denn da falsch gemacht? Ich möchte nun doch den Gutenberg verwenden. Würde mich sehr über Hilfe freuen.

    • Hallo Sabine,

      oh, eine weiße Seite im Backend ist nie gut! Wie ich im Artikel geschrieben habe, ist seit der Gutenberg-Einführung gut ein Jahr vergangen und in der Zwischenzeit kamen einige WordPress- und Plugin-Updates. Auch deine eingesetzte PHP-Version kann eine Rolle spielen. Siehst du weitere Fehlermeldungen/Warnungen im Backend? Ggf. auch im Dashboard von WordPress? Hast du immer alle Updates ausgeführt und deine Seite läuft sonst fehlerfrei?

      Viele Grüße
      Daniel

      • Vielen Dank Daniel, für deine ausführliche Antwort!
        Ich verwende die neueste PHP-Version. Ich glaube 7.3, weiß jetzt aber nicht genau. Updates habe ich alle durchgeführt. Es läuft auch alles einwandfrei. Ich bin total ratlos, wieso ich den Gutenberg-Editor nicht zum laufen bringe.

    • Dafür gibt es doch Testing Gutenberg (https://testgutenberg.com/), mit welchem man den Editor ausprobieren kann, ohne gleich sein Blog zu ruinieren.

Schreibe einen Kommentar zu Sabine Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.