Eigene Gutenberg Block Styles
Zuletzt aktualisiert:   - Sonia Rieder -  16 Kommentare

Im Gutenberg Editor kannst du beim Formatieren verschiedene Block Styles auswählen. Möchtest du aber lieber ein eigenes Design für bestimmte Blöcke? Dann kannst du auch zusätzliche Stil-Vorlagen erstellen. Wie du solche Style Varianten anlegen kannst, zeige ich dir anhand von einigen Beispielen.

Block Styles über CSS-Klasse erweitern

Die einfachste Methode einen Gutenberg Block anzupassen, ist die Vergabe einer eigenen CSS-Klasse.

In den Block-Einstellungen kannst du unter „Erweitert“ den Klassen-Namen eingeben. Dieses Feld findest du bei sämtlichen Blöcken.

Gutenberg Block Styles über CSS-Klasse

Beispiel: Überschrift einfärben

Leider kann man aktuell im Gutenberg Editor die Textfarbe für Überschriften nicht direkt ändern. Dieses Feature wird aber mit der Version WordPress 5.3 eingeführt.
Auch eine Hintergrundfarbe kann nicht eingestellt werden. Aber mit etwas CSS ist es trotzdem möglich.
Dazu erstellst du zunächst einen Überschriften-Block. Unter „Erweitert“ trägst du dann deine eigene CSS-Klasse ein. Also beispielsweise „my-headline“.

Damit sich die Textfarbe auch ändert, fügst du noch das CSS ein. Entweder in deinem Child Theme oder im Customizer.

.my-headline {
color:red;
background:#eee;
}

Das Feld für eine zusätzliche CSS-Klasse ist übrigens bei allen Blöcken vorhanden. Du kannst dadurch also sämtliche Block Styles recht einfach anpassen.

Eigene Gutenberg Block Styles per Plugin anlegen

Diese Methode ist etwas aufwändiger, aber in der Praxis beim Schreiben letztlich angenehmer. Denn durch das Hinzufügen eigener Block Styles musst du dir nicht sämtliche CSS-Klassen merken. Stattdessen legst du in einem Plugin eine eigene Stilvorlage an. Diese kannst du dann direkt in dem jeweiligen Block auswählen. So wie es schon bei den Buttons oder Zitaten möglich ist.

Ein weiterer Vorteil: Die Vorlagen werde in einem Plugin angelegt. Somit kannst du diese auch auf anderen Webseiten nutzen.

Für die Anpassungen erstelle ich jetzt ein kleines Plugin, das auf dem Beispiel-Code von Automattic basiert. Weitere Beispiele findest du auch im Block Editor Handbuch.

Das Plugin für die Style Vorlagen enthält folgende Dateien:

  1. index.php (Plugin-Datei)
  2. block.js (Datei für die Block-Anpassungen)
  3. block-styles.css (CSS-Code)
Wichtig: Bevor du loslegst, solltest du ein Backup deiner Webseite anlegen.

Plugin-Datei: index.php

Mit einem Text-Editor wie z.B. Notepad++ erstellst du zunächst die Plugin-Datei index.php. Damit wird das Plugin gestartet und die nötigen CSS- und JS-Dateien geladen.

Weitere Infos zum Erstellen eigener WP-Plugins findest du auch in meinem Tutorial Custom Functions.

<?php
/*
Plugin Name: Custom Gutenberg Styles
Plugin URI: https://www.webtimiser.de
Description: Eigene Block-Styles für Gutenberg
Author: Sonia Rieder
Author URI: https://www.webtimiser.de
Version: 1.0
*/

if ( ! defined( 'ABSPATH' ) ) exit;
/**
 * Enqueue Block Styles Javascript
 */
function custom_gutenberg_scripts() {
    wp_enqueue_script(
    'block-styles-script', 
    plugins_url( 'block.js', __FILE__ ),
    array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
    filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
    );
}
add_action( 'enqueue_block_editor_assets', 'custom_gutenberg_scripts' );
/**
 * Enqueue Block Styles Stylesheet
 */
function custom_gutenberg_styles() {
	 wp_enqueue_style( 'block-styles-css',
	 plugins_url( 'block-styles.css', __FILE__ ) 
	);
}
add_action( 'enqueue_block_assets', 'custom_gutenberg_styles' );

Als nächstes kommt die Datei block.js hinzu. Diese enthält die Information, welche Blöcke ergänzt werden sollen.

Der Code hierfür ist ziemlich einfach und nach folgendem Muster aufgebaut:

wp.blocks.registerBlockStyle( 'BLOCKNAME', {
	name: 'NAME FÜR CSS-KLASSE',
	label: 'SICHTBARER NAME IM GUTNBERG BLOCK'
} );

Und als letztes fehlt noch die Datei style.css. Hierein kommt nur der CSS-Code für das Styling der Blöcke.

Was genau du dort einfügen musst bzw. kannst, erkläre ich dir gleich mit einigen Beispielen.

Hier nochmals der Aufbau des Plugins:

├── custom-gutenberg-styles
    ├── block.js
    ├── block-styles.css
    └── index.php

Den gesamten Ordner überträgst du dann per FTP auf deinen Server in den Ordner Plugins. Anschließend gehst du ins WordPress Dashboard. Dort siehst du dann dein Plugin (Custom Gutenberg Styles) und kannst es aktivieren.

Beispiele für Gutenberg Block Style Varianten

Listen-Block anpassen

Im ersten Beispiel werde ich einen Gutenberg Block Style für Listen erstellen. Denn für Listen nutze ich häufig ein 2-Spaltiges Layout.

Dazu fügst du zuerst folgenden Code in die Datei blocks.js ein:

wp.blocks.registerBlockStyle( 'core/list', {
	name: '2col-list',
	label: '2-Spaltige Liste'
} );

Dadurch registriere ich einen neuen Block-Style für den Listen-Block. Die Bezeichnung des Labels siehst du dann als Style-Vorlage. Gleichzeitig wird automatisch im Listenblock unter “Erweitert” die Klasse dafür eingetragen.
Also nach dem Muster: is-style-name. In diesem Beispiel lautet somit die Klasse “is-style-2col-list”.

Anschließend schreibst du den CSS-Code in die Datei style.css. Damit legst du das Design der Liste fest.

.is-style-2col-list {
    background: #f8f8f8;
    padding: 20px 0 20px 40px;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    column-gap: 40px;
    -moz-column-gap: 40px;
    margin:0;
}
Block Styles für Listen-Block
Vorlage für eine 2-spaltige Liste

Button Styles anpassen

Genau wie beim Listen-Block kannst du auch für Buttons Style Varianten anlegen.

Natürlich lassen sich die Buttons auch direkt in den Block-Einstellungen anpassen. Also die Farbe, Textfarbe und Form. Aber wenn du deine eigenen Styles anlegst, bist du flexibler in der Gestaltung. Und du ersparst dir zudem einige unnötige Klicks.

Beispiel für Button Design
Button-Style mit leichtem Schatten
// code für block.js
wp.blocks.registerBlockStyle( 'core/button', {
	name: 'fancy-button',
	label: 'Fancy Button',
	}
/*code für style.css*/
.wp-block-button.is-style-fancy-button .wp-block-button__link {
color: #fff;
background-color: #ff7052;
border-radius: 50px 50px 50px 50px;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #ff7052;
box-shadow: 0px 10px 30px -8px rgba(0,0,0,0.16);
}
.wp-block-button.is-style-fancy-button .wp-block-button__link a:hover {
	background-color: orange;
}

Überschriften aufpeppen

Für Headlines gibt es momentan in Gutenberg noch gar keine Stil-Vorlagen. Aber auch hier kannst du deine eigene Vorlage anlegen.

So könnte eine Überschrift mit Farbverlauf als Stil angelegt werden.

Beispiel für Überschrift mit Farbverlauf
wp.blocks.registerBlockStyle( 'core/heading', {
	name: 'gradient-headline',
	label: 'Gradient Überschrift'
} );
/*code für style.css*/
.is-style-gradient-headline {
background: -webkit-linear-gradient(left,#ff6969 0%,#5a61e8 100%);
background-clip: border-box;
color: transparent;
-webkit-background-clip: text;
border-bottom: 3px solid #ccc;
}

Absätze formatieren

Hier noch eine Vorlage für Absätze aus dem Automattic-Beispiel. Ich nutze diese auch gelegentlich, wie du hier sehen kannst.

Blue Paragraph: Beispiel für eine Absatzvorlage.

wp.blocks.registerBlockStyle( 'core/paragraph', {
	name: 'blue-paragraph',
	label: 'Blue Paragraph'
} );
/*code für style.css*/
.is-style-blue-paragraph {
	background-color: #0087be;
	color: #FFF;
	padding: 16px;
}

Das sind nur einige Beispiele, was alles möglich ist. Wie du siehst, kann man nach diesem Muster ganz einfach eigene Vorlagen erstellen.

Falls Du weitere Blöcke anpassen möchtest, findest du am Ende des Beitrags eine Übersicht der Gutenberg Block Namen.

Gutenberg Block Styles entfernen

Gibt es Styles die du entfernen möchtest? Wenn ja, kannst du sie mit einem kleinen Snippet entfernen. Dieses fügst du einfach in die Date block.js ein.
Hier ein Snippet, mit dem du die Vorlagen für die Buttons entfernen kannst.

wp.domReady( function() {
   wp.blocks.unregisterBlockStyle( 'core/button', 'squared' );
   wp.blocks.unregisterBlockStyle( 'core/button', 'rounded' );
   wp.blocks.unregisterBlockStyle( 'core/button', 'outline' );
} );

Einzelne Gutenberg Blöcke deaktivieren

Mit einer ähnlichen Funktion kannst du auch ganze Blöcke aus dem Gutenberg Editor entfernen. So wird alles etwas übersichtlicher.

Ich habe auf meiner Seite einige Blöcke entfernt, die ich grundsätzlich nicht benötige. Z.B. Verse, Audio und Seitenumbruch. Und auch einige Widgets, wie beispielsweise den Kalender oder die Tagcloud. Das Ganze sieht dann so aus:

wp.domReady( function() {
   wp.blocks.unregisterBlockType( 'core/verse' );
   wp.blocks.unregisterBlockType( 'core/audio' );
   wp.blocks.unregisterBlockType( 'core/nextpage' );
   wp.blocks.unregisterBlockType( 'core/calendar' );
   wp.blocks.unregisterBlockType( 'core/archives' );
   wp.blocks.unregisterBlockType( 'core/tag-cloud' );
} );

Übersicht der Gutenberg Block Namen

Allgemein

  • core/paragraph
  • core/image
  • core/heading
  • core/gallery
  • core/list
  • core/quote
  • core/audio
  • core/file
  • core/video

Formatierung

  • core/code
  • core/table
  • core/verse
  • core/freeform
  • core/html core/preformatted
  • core/pullquote

Layout-Elemente

  • core/button
  • core/text-columns
  • core/more
  • core/separator
  • core/spacer

Widgets

  • core/shortcode
  • core/archives
  • core/categories
  • core/latest-comments
  • core/latest-posts
  • core/tag-cloud
  • core/calendar