Wordpress - Gutenberg-Editor mit CSS bedienfreundlicher gestalten

Gespeichert von admin am 11.02.2021 - 10:32

Der Gutenberg-Editor ist ja nicht neu und ich arbeite schon eine ganze Weile ganz gerne damit.
Allerdings arbeite ich auch gerne mit Bootstrap-Theme wp-bootstrap-starter und damit sind die Blöcke im Backend nur schwer bedienbar.
Mit etwas eigenem CSS kann man das Backend wesentlich bedienfreundlicher gestalten.

Auch wenn ich das Syling für die Arbeit mit Bootstrap erstellt habe, sind die verwendeten Klassen im CSS vom Theme unabhängig und können auch bei anderen Themes zum Einsatz kommen. Das muss man von Fall zu Fall probieren.

In welchen Anwendungsfällen hilft das zusätzliche CSS?

1. Gruppen:

Ich verwende Gruppen von Blöcken vor allem, um Bereiche mit abweichender Hintergrundfarbe über die ganze Bildschirmbreite zu schaffen.
Auch wenn die Gruppe in Gutenberg mit der Einstellung "Gesamte Breite" eingebaut wird, wird der Block nur sehr schmal dargestellt.
Er hat keinen Rahmen, d.h. es ist unklar, wo er seine Grenzen hat und wo man klicken muss, um weitere Bedienelemente oder Einstellungsmöglichkeiten auf der rechten Seite zu bekommen.

Also habe ich dem Block Gruppe eine eigene Farbe gegeben, die Breite hängt von den Einstellungen im Block ab und der Bereich mit dem Plus zum Einfügen weiterer Blöcke in der Gruppe, wird mittig gesetzt.
Ohne diese Einstellungen, ist es fast unmöglich, eine Gruppe ohne Inhalt wieder zu finden, um Einstellungen zu ändern oder Inhalte einzufügen.

 

Gutenberg Editor CSS im Backend.

 

 

Und so sieht die Editieransicht im Backend mit meinen Anpassungen aus:

 

Gutenberg Editor CSS im Backend.

 

2. Spalten:

Um Blöcke nebeneinander zu positionieren, verwendet man den Spalten-Block.
Hier hatte ich das gleiche Problem. Einmal angelegt, kann man die einzelnen Spalten durch Klick auf den Inhalt markieren, aber wo muss man klicken, um den Spalten-Block zu erfassen und konfigurieren?

Natürlich, mit etwas Übung ist das kein Problem. Ich denke auch an meine Kunden, die selbstverständlich Inhalte selbst einpflegen wollen und sich mit den Standard-Einstellungen schwer tun.

So sieht ein Spaltenblock im Backend ohne Anpassungen aus:

 

Gutenberg Editor CSS im Backend.

 

 

Zwischen dem Wort Zertifikate und dem Spaltenblock ist ein Abstandhalter-Block eingefügt, was man hier ebenfalls nicht erkennt.

Mit dem CSS-Styling findet man sich besser zurecht:

 

Gutenberg Editor CSS im Backend.

 

 

Hier ist der Abstand Block über dem Spaltenblock rosa eingefärbt.
Der Spaltenblock hat einen grauen Hintergrund, der nur noch in der Mitte zwischen den zwei Spalten in Erscheinung tritt.

Die eigentlichen Spalten sind gelb gefärbt.

Jetzt weiß ich, dass ich in den grauen Mittelbereich klicken muss, um den ganzen Spaltenblock zu bearbeiten. Das ist z.B. nötig, um die Anzahl von Spalten zu ändern.
Möchte ich dagegen die Breite einer Spalte ändern, dann muss ich auf die gelbe Fläche klicken. Um Text oder Bild zu ändern, klicke ich in die fast weißen Flächen innerhalb der gelben Spalten.

Wie kann man die Backendansicht des Gutenberg Editors editieren?

1. CSS-Datei erstellen

Im obersten Verzeichnis des Child-Themes von Bootstrap oder einem anderen Theme legen wir die Datei gutenberg.css ab.

Hier fügen wir den folgenden Code ein:

/* Breite der Hauptspalte */
.wp-block { max-width: 1000px; }

/* Breite von breiten Gutenberg-Blöcken */
.wp-block[data-align="wide"] { max-width: 1200px; }

/* Breite von Gutenberg-Blöcken mit voller Breite */
.wp-block[data-align="full"] { max-width: none; }

/*Alle Bloecke erhalten einen Rahmen*/
.wp-block{
    border:1px solid #ccc;
}

/*Gruppen erhalten einen hellgruenen Hintergrund*/
.wp-block-group__inner-container{
    background:#f2fcd6;
}

/*Block in der Gruppe zum Hinzufuegen weiterer Bloecke mittig positionieren*/
.wp-block-group__inner-container .block-list-appender{
    margin:auto;
}

/*Spaltenblock grau*/
div[data-title="Spalten"]{
    background:#efefed;
}

/*Spalten gelb*/
div[data-title="Spalten"] .wp-block-column{
    background:#fefbe1;
}

/*Textfelder und Bilder fast weiß*/
.block-editor-rich-text__editable,
figure{
    background:rgba(255,255,255,0.8)
}

/*Abstandhalter rosa*/
.wp-block-spacer {
    background:#fcf2f8;
}

2. CSS-Datei einbinden

In der functions.php Datei des Child-Themes fügen wir diesen Code ein:

/**
 * Breite für Gutenberg Editierfenster anpassen
 */
/* Editor CSS */
 add_theme_support('editor-styles');
 add_editor_style( 'gutenberg.css' );

Alles weitere bleibt Eurer Kreativität überlassen, weil man natürlich noch viiel mehr Styles  anpassen könnte.
Und selbstverständlich kann man auch andere Hintergrundfarben wählen.

Wie geschrieben: Getestet ist das mit dem Bootstrap-Theme wp-bootstrap-starter und bei anderen Themes müsst Ihr einfach diese paar Zeilen Code einfügen und testen, ob es wie gewünscht funktioniert.