Neue Schriftgrößen zum Gutenberg Editor hinzufügen
Der WordPress Gutenberg-Editor beinhaltet bereits Standard Schriftgrößen wie „klein„, „mittel„, „groß“ und „extragroß„, welche sich für die Textgrößen-Formatierung von Überschriften und dem Fließtext verwenden lassen. In diesem Artikel zeige ich euch, wie ihr individuelle Schriftgrößen zum Gutenberg-Editor hinzufügen könnt.
Wie lassen sich individuelle Textgrößen hinzufügen?
Durch die Verwendung der Funktion add_theme_support( 'editor-font-sizes', array() ); haben wir die Möglichkeit individuelle Textgrößen hinzuzufügen. Diese Schriftgrößen können dann im Gutenberg-Editor für die Formatierung von Überschriften und Text ausgewählt werden. Der folgende Code-Schnipsel zeigt wie das funktioniert:
Die fertige Auswahl an Schriftgrößen
Im folgenden Code-Beispiel habe ich für euch bereits eine fertige Auswahl an verschiedenen Schriftgrößen zusammengestellt, welche ihr so in eurem Gutenberg Theme verwenden könnt. Fügt dazu den folgenden Code z.B. in die functions.php Datei eures WordPress Themes ein:
Textgrößen im Frontend verfügbar machen
Mit der Definition von neuen Textgrößen über das obere Beispiel ist allerdings noch nicht alles getan. Zwar sind die neuen Schriftgrößen nun im Gutenberg-Editor verfügbar, jedoch werden diese im Frontend eurer Webseite noch nicht dargestellt. Denn dafür müsst ihr noch weitere CSS-Definitionen hinzufügen. Passend zum oberen Beispiel der fertigen Schriftgrößen, müsst ihr die folgenden Stylesheet-Definitionen in einer CSS-Datei eures WordPress Themes (Child Themes) hinzufügen:
Wir ihr sehen könnt müsst ihr die CSS-Klassen für individuelle Schriftgrößen nach dem Schema .has-FONT_SIZE_NAME-font-size definieren, damit diese im Frontend eurer WordPress Webseite erkannt und richtig dargestellt werden.
Benutzerdefinierte Schriftgrößen im Gutenberg-Editor deaktivieren
Wenn ihr allerdings die Definition von benutzerdefinierten Schriftgrößen im Gutenberg-Editor verhindern möchtet, solltet ihr den folgenden Code verwenden:
Wenn zudem auch die Auswahl-Box der Standard-Schriftgrößen deaktiviert werden soll, dann verwendet ihr stattdessen diese Code:
