Den WordPress Block Editor Aussehen Lassen Wie Das Frontend-Design

Ich bin ein WordPress-Benutzer und, wenn Sie mir ähneln, haben Sie immer zwei Tabs offen, wenn Sie einen Beitrag bearbeiten: einen mit dem neuen schicken Block-Editor, alias Gutenberg, und einen anderen mit einer Vorschau des Beitrags, damit Sie wissen, dass er im Frontend nicht seltsam aussieht.

Es ist keine Überraschung, dass die Stile eines WordPress-Themes nur das Frontend Ihrer Website beeinflussen. Der Backend-Post-Editor sieht im Allgemeinen nicht wie das Frontend-Ergebnis aus. Wir sind es gewohnt. Aber was wäre, wenn ich sagen würde, dass es absolut möglich ist, dass der WordPress-Editor das Frontend-Erscheinungsbild fast widerspiegelt?

Alles, was dazu nötig ist, ist eine benutzerdefinierte Stylesheet.

Gedanken. Geblasen. Richtig? Nun, vielleicht ist es nicht *so* umwerfend, aber es kann Ihnen zumindest etwas Zeit sparen. :)

WordPress gibt uns hier einen Hinweis auf das, was möglich ist. Starten Sie das Standard-Twenty-Twenty-Theme, das mit WordPress geliefert wird, starten Sie den Editor, und es hat einige leichte Stile.

Das Ganze besteht aus zwei ziemlich einfachen Änderungen

1. Ein paar Zeilen PHP in der Datei functions.php Ihres Themes, die dem Editor mitteilen, dass Sie ein benutzerdefiniertes Stylesheet für Editor-Stile laden möchten
2. Besagtes benutzerdefiniertes Stylesheet

Nun, genug Vorwort! Machen wir den WordPress-Editor aussehen wie das Frontend, sollen wir?

Schritt 1: Knacken Sie die functions.php-Datei auf

Okay, ich habe gelogen, nur noch ein bisschen Gewäsch. Wenn Sie ein WordPress-Theme verwenden, das Sie nicht selbst entwickeln, ist es wahrscheinlich am besten, ein Child-Theme einzurichten, bevor Sie Änderungen an Ihrem Haupt-Theme vornehmen. </Vorwort-Gewäsch>

Starten Sie Ihren bevorzugten Texteditor und öffnen Sie die Datei functions.php Ihres Themes, die sich normalerweise im Stammverzeichnis des Theme-Ordners befindet. Fügen wir die folgenden Zeilen am Ende der Datei ein

// Gutenberg custom stylesheet
add_theme_support('editor-styles');
add_editor_style( 'editor-style.css' ); // make sure path reflects where the file is located

Dieser kleine Code-Schnipsel teilt WordPress mit, dass es Unterstützung für ein benutzerdefiniertes Stylesheet für Gutenberg hinzufügen soll, und gibt dann an, wo sich dieses Stylesheet (das wir editor-style.css nennen) befindet. WordPress hat solide Dokumentation für die Funktion add_theme_support, wenn Sie tiefer eintauchen möchten.

Schritt 2: CSS-Tricks (sehen Sie, was ich da getan habe?!)

Jetzt kommen wir zu unserer Kernkompetenz: CSS schreiben!

Wir haben editor-styles-Unterstützung zu unserem Theme hinzugefügt, also ist der nächste Schritt, die CSS-Güte zum Stylesheet hinzuzufügen, das wir in functions.php definiert haben, damit unsere Stile korrekt in Gutenberg geladen werden.

Es gibt Tausende von WordPress-Themes da draußen, daher könnte ich unmöglich ein Stylesheet schreiben, das den Editor für jedes einzelne exakt macht. Stattdessen zeige ich Ihnen ein Beispiel basierend auf dem Theme, das ich auf meiner Website verwende. Dies sollte Ihnen eine Vorstellung davon geben, wie Sie das stylesheet für Ihre Website erstellen. Ich füge auch eine Vorlage am Ende bei, die Ihnen den Einstieg erleichtern sollte.

Okay, erstellen wir eine neue Datei namens editor-style.css und legen wir sie im Stammverzeichnis des Themes ab (oder wieder im Child-Theme, wenn Sie ein Drittanbieter-Theme anpassen).

Das Schreiben von CSS für den Block-Editor ist nicht ganz so einfach wie die Verwendung von Standard-CSS-Elementen. Wenn wir zum Beispiel Folgendes in unserem Editor-Stylesheet verwenden würden, würde es die Textgröße nicht auf <h2>-Elemente im Beitrag anwenden.

h2 {
  font-size: 1.75em;
}

Statt Elementen muss unser Stylesheet auf Block-Editor-Blöcke abzielen. Auf diese Weise wissen wir, dass die Formatierung so genau wie möglich sein soll. Das bedeutet, dass <h2>-Elemente an die Klasse .rich-text.block-editor-rich-text__editable gebunden werden müssen, um Dinge zu stylen.

h2.rich-text.block-editor-rich-text__editable {
  font-size: 1.75em;
}

Ich habe zufällig eine Baseline-CSS-Datei erstellt, die gängige Block-Editor-Elemente nach diesem Muster stylt. Fühlen Sie sich frei, sie auf GitHub zu schnappen und die Stile auszutauschen, damit sie Ihr Theme ergänzen.

Ich könnte das Stylesheet hier weiter ausbauen, aber ich denke, die Vorlage gibt Ihnen eine Vorstellung davon, was Sie in Ihrem eigenen Stylesheet ausfüllen müssen. Ein guter Ausgangspunkt ist, das Stylesheet für Ihr Frontend durchzugehen und die Elemente von dort zu kopieren, aber Sie müssen wahrscheinlich einige der Elementklassen ändern, damit sie auf das Block-Editor-Fenster angewendet werden.

Im Zweifelsfall spielen Sie mit Elementen in den DevTools Ihres Browsers herum, um herauszufinden, welche Klassen auf welche Elemente zutreffen. Die oben verlinkte Vorlage sollte die meisten Elemente abdecken.

Die Ergebnisse

Zunächst einmal werfen wir einen Blick darauf, wie der WordPress-Editor ohne ein benutzerdefiniertes Stylesheet aussieht

Vergleichen wir das mit dem Frontend meiner Testseite

Die Dinge sind ziemlich unterschiedlich, oder? Hier verwende ich immer noch ein einfaches Design, aber ich verwende überall mit maximalen Verläufen! Es gibt auch eine benutzerdefinierte Schriftart, Button-Styling und eine Blockquote. Selbst die Container sind keine exakten Quadrate.

Ob Sie es lieben oder hassen, ich denke, Sie werden zustimmen, dass dies eine große Abweichung von der Standard-Gutenberg-Editor-UI ist. Verstehen Sie, warum ich einen separaten Tab öffnen muss, um meine Beiträge in der Vorschau anzuzeigen?

Laden wir nun unsere benutzerdefinierten Stile und schauen sie uns an

Na, schauen Sie sich das an! Die Editor-UI sieht jetzt ziemlich genau so aus wie das Frontend meiner Website. Die Inhaltsbreite, Schriftarten, Farben und verschiedene Elemente sind alle gleich wie im Frontend. Ich habe sogar den schicken Hintergrund gegen den Posttitel!

Ipso facto – keine Vorschauen mehr in einem anderen Tab. Cool, oder?

---

Den WordPress-Editor wie Ihr Frontend aussehen zu lassen, ist eine nette Annehmlichkeit. Wenn ich einen Beitrag bearbeite, ruiniert das Hin- und Herwechseln zwischen Tabs, um zu sehen, wie der Beitrag im Frontend aussieht, meinen Mojo, also vermeide ich es lieber.

Diese wenigen schnellen Schritte sollten auch Ihnen dasselbe ermöglichen!