Mit Editor-Styles das Theme-Design in den Editor holen

Der WordPress-Editor weiß erst Mal nicht, wie das Design im Frontend aussieht. Wenn das Theme-Design auch in der Editor-Ansicht erscheinen soll, muss man dem Theme ein zusätzliches Stylesheet für den Editor mitgeben.

Viele WordPress-Themes bringen solche Editor-Styles bereits mit. Wenn du ein älteres Theme nutzt oder ein eigenes Theme entwickelt hast, kannst du die Editor-Styles aber auch ergänzen.

Zunächst müssen wir das Theme vorbereiten. Die Datei editor-styles.css liegt auf der obersten Ebene des Theme-Verzeichnisses. Diese Datei binde ich mit add_editor_style in der functions.php ein. Mit add_theme_support weise ich das Theme zuvor an, das Gutenberg-Stylesheet zur Kenntnis zu nehmen.

function netzialisten_gutenberg_css(){   
 add_theme_support( 'editor-styles' );   
 add_editor_style( 'editor-styles.css' );   
}
add_action( 'after_setup_theme', 'netzialisten_gutenberg_css' );   
Code-Sprache: JavaScript (javascript)

Das Design im Editor darstellen

HINWEIS
Nach meiner Erfahrung ist eine zu 100% identische Ansicht von Backend und Frontend – wenn überhaupt – nur mit sehr viel Aufwand zu erreichen. Aber man kann eine gute Annäherung hinbekommen.

Die CSS-Klassen für den Editor unterscheiden sich teilweise von den Klassen für das Frontend. Dadurch ist es nicht so ohne Weiteres möglich, dieselben Styles, die man fürs Frontend geschrieben hat, für die Editor-Styles wieder zu verwenden. Manches geht, manches nicht.

Ich fand diesen Artikel bei CSS-Tricks sehr hilfreich:
Getting the WordPress Block Editor to Look Like the Front End Design

Der Autor Kev Quirk stellt auf Github ein Template für Editor-Styles zur Verfügung. Das Template ist ein guter Ausgangspunkt und ich nutze Teile davon in meinen Editor-Styles.

EXKURS Arbeiten mit SCSS-Modulen

Ich teile mein CSS in einzelne Module auf und binde diese Module per @import nacheinander in die Datei styles-theme.scss ein. Diese Datei wird dann über einen Sass-Compiler zur style.css zusammen gebaut.

Die Anweisungen in den Modulen werden von Ebene zu Ebene spezifischer: Ich fange bei allgemeinen Angaben an (00_basics), die für das gesamte Design gelten sollen, und arbeite mich zu den Anweisungen vor, die einzelne Bereiche, Seiten oder Elemente betreffen.

00_basics
Resets, Variablen, die im gesamten Theme gelten; Default-Einstellungen Blöcke etc.

01_layout
Alle Angaben zum Layout

02_typografie
Schriften einbinden, responsive Schriftgrößen, Typografie Elemente

03_design
Farben, Design-Elemente wie Buttons etc.

[… und so weiter]

Die Datei editor-styles.scss

Einen Teil der Module kann ich für meine Editor-Styles nutzen.

Am Anfang meiner Datei editor-styles.scss binde ich alle SCSS-Module ein, die Variablen enthalten. Das sind Angaben zu Farben, Schriften und zum Layout. So kann ich im Editor-Stylesheet dieselben Schriften und Farben verwenden wie im Frontend.

In meinem Editor-Stylesheet folgen nach den Variablen einige Angaben für den Editor selbst (z.B. Breite). Dann kommen Angaben zur Typografie, also Schriften für Überschriften, Fließtext und Listen. Danach kommt das CSS für Links und Buttons.

Wenn ich spezielle Design-Elemente oder Custom Blocks verwende, binde ich das CSS dafür am Ende der Editor-Styles ein.

Hier ein Auszug aus der Datei editor-styles.scss

/** INHALT 
* 1. Variablen
* 2. Editor
* 3. Typografie
* 4. Links und Buttons
* 5. Custom Blocks
**/

@import "sass/01_layout/variables-layout.scss";
@import "sass/02_typography/fonts.scss";
@import "sass/02_typography/font-sizes-mixin.scss";
@import "sass/03_design/variables-colors.scss";

/* 1. EDITOR */
/* Begrenzung Blöcke sichtbar machen */
.editor-styles-wrapper .wp-block {
  border: 1px dashed #999);
}
/* Breite für alle Blöcke */
.wp-block {
  max-width: 840px;
}

/* 2. TYPOGRAFIE */
/* Schrift für Fließtext und Listen
Mixin für responsive Schriftgrößen aus font-sizes-mixin.scss */

.editor-block-list__layout .editor-block-list__block p,
.rich-text.block-editor-rich-text__editable.wp-block-paragraph,
.block-editor-block-list__layout.is-root-container,
ul,
ol {
  @include font_copy;
  line-height: 1.6;
}

(...)

/* 4. Links und Buttons */
.rich-text.block-editor-rich-text__editable.wp-block-button__link,
.rich-text.block-editor-rich-text__editable.wp-block-button__link:visited {
  border-radius: 0;
  color: $text_color;
  border-color: $text_color;
  border: 1px solid;
  background-color: white;
}

(...)Code-Sprache: SCSS (scss)

Fazit

So richtig WYSIWYG kommt bei meinen Editor-Styles nicht raus, weil ich mich auf die Bereiche Typografie, Links, Buttons und Custom Blocks beschränke. Damit kann ich den Aufwand überschaubar halten. Ich sehe nicht exakt dasselbe wie im Frontend, aber ich habe beim Arbeiten im Editor ein gutes Gefühl für das Design.