Schriftgrößen im WordPress Block Editor (Gutenberg) anpassen oder deaktivieren

Für Textabschnitte stellt der Block Editor von WordPress die Möglichkeit zur Verfügung, die Schriftgröße zu verändern. Die auswählbaren Optionen lassen sich beliebig anpassen. Von Haus aus bietet WordPress fünf festgelegte Schriftgrößen an, sowie die Möglichkeit einen individuellen Wert anzugeben. Für den Fall, dass ihr das zur Verfügung stehende Werkzeug für euer Theme anpassen möchtet, zeigen wir euch, wie ihr Optionen deaktivieren oder eine Auswahl mit eigenen Größen registrieren könnt.

Schriftgrößen im Block Editor deaktivieren

Wenn ihr keine Veränderung von Schriftgrößen im Editor erlauben, diese also ausschließlich über das Stylesheet eures Themes steuern möchtet, könnt ihr die Typografie-Optionen, analog zum Entfernen der Farbpalette, mit folgendem Code vollständig deaktivieren. Der Code wird in der functions.php eingefügt.

function disable_font_sizes() {
   add_theme_support('editor-font-sizes', array()); 
   add_theme_support('disable-custom-font-sizes');
}
add_action('after_setup_theme', 'disable_font_sizes');

Eigene Schriftgrößen anlegen

Um eine eigene Auswahl an Schriftgrößen zu registrieren, übergebt ihr der Funktion add_theme_support() den Namen des Features 'editor-font-sizes', sowie ein Array mit den Schriftgrößen. Die Informationen zu den jeweiligen Größen stehen in assoziativen Arrays, in denen ihr jeweils Name, Slug und die Größe in Pixel festlegt. Der Name wird dabei als Info im WordPress Editor angezeigt. Aus dem Slug generiert WordPress eine CSS-Klasse, über die ihr die Schriftgröße in der style.css eures Themes definieren könnt. In der Editor-Vorschau wird die angegebene Größe verwendet.

function customize_font_sizes() {
   add_theme_support('editor-font-sizes', array(
      array(
         'name' => 'Small',
         'slug' => 'small',
         'size' => 12,
      ),
      array(
         'name' => 'Medium',
         'slug' => 'medium',
         'size' => 20,
      ),
      array(
         'name' => 'Large',
         'slug' => 'large',
         'size' => 30,
      ),
   ));
}
add_action('after_setup_theme', 'customize_font_sizes');

Die vordefinierten Schriftgrößen von WordPress werden damit nicht ergänzt, sondern überschrieben.

Option für individuelle Schriftgröße deaktivieren

Standardmäßig enthält WordPress neben den festgelegten Schriftgrößen die Option eine individuelle Größe anzugeben. Wenn ihr die Auswahl auf die vordefinierten Größen beschränken möchtet, könnt ihr diese Option deaktivieren, indem ihr die Funktion customize_font_sizes() um die Zeile add_theme_support('disable-custom-font-sizes'); ergänzt.

function disable_custom_font_sizes() {

   // …

   add_theme_support('disable-custom-font-sizes');

}
add_action('after_setup_theme', 'disable_custom_font_sizes');

Schriftgrößen im CSS definieren

Für die zur Auswahl stehenden Schriftgrößen werden CSS-Klassen nach dem Muster has-$slug-font-size generiert und dem Block hinzugefügt. Diese Klassen könnt ihr jetzt im CSS beliebig stylen. Für die drei Größen aus unserem Beispiel sieht das beispielsweise so aus:

.has-small-font-size { font-size: 12px; }
.has-medium-font-size { font-size: 20px; }
.has-large-font-size { font-size: 30px; }

Geschrieben von Konstantin Hanke

Konstantin arbeitet als Webentwickler bei kulturbanause®. Seine Aufgabe ist die technische Umsetzung von klaren, soliden und effizienten Webauftritten und Website-Komponenten. Darüber hinaus kümmert er sich um die Wartung, Optimierung und Weiterentwicklung von bestehenden Websites. Sein besonderes Interesse gilt der Idee von freier Software.