Block-Styles eignen sich, um eine Variante eines Blocks zur Verfügung zu stellen, welche sich lediglich durch das Design unterscheidet. Wie man dies im eignen Theme oder als Plugin umsetzt, erklären wir hier in diesem Beitrag.
Styles, Variations oder Patterns?
1. Block-Styles
Mit dieser Methode wird ausschliesslich eine Design-Variante eines bestehenden Blocks erstellt.
2. Block-Variations
Mit dieser Methode können neben dem Design des Blocks auch die Werte der Block-Attribute festgelegt und beispielsweise Platzhalter-Texte hinzugefügt werden.
3. Block-Patterns
Block-Patterns eignen sich vor allem, um verschachtelte Blöcke anzubieten. Sie sind bereits mit einem editierbaren Inhalt versehen.

In unserem Beispiel möchten wir zwei Varianten einer Liste anbieten, einmal mit und einmal ohne Aufzählungspunkte. Für solche kleinen Variationen eines Blocks sind Block-Styles bestens geeignet.

Ob Du die Block-Styles mit deinem eigenen Theme oder mit einem Plugin zur Verfügung stellen willst, bleibt Dir überlassen. Wir beschreiben hier beide Methoden.
1 Block-Styles im eigenen Theme
1.1 Block-Styles registrieren
In der functions.php
wird der Block-Style registriert
if ( function_exists( 'register_block_style' ) ) {
register_block_style(
'core/list',
array(
'name' => 'list-without-bullets',
'label' => 'Ohne Bullets',
)
);
}
1.2 Eigenschaften und HTML-Ausgabe
Die beiden Eigenschaften name
und label
sind obligatorisch. Der Wert von Label
erscheint als Bezeichner in der rechten Seitenleiste, aus dem Wert der name
Eigenschaft wird eine Klasse generiert, die dem ul
-Tag mit dem Präfix is-style-
hinzugefügt wird.
<ul class="is-style-list-without-bullets">
<li>Listeneintrag</li>
</ul>
1.3 Optionale Eigenschaften
is_default
: Wenn diese Eigenschaft auf true
gesetzt ist, wird standardmässig dieser Stil beim Einfügen des Blocks verwendet.
inline_style
: enthält Inline-CSS-Code, der die für den Stil erforderliche CSS-Klasse registriert. Alle Inline-Blockstile werden im Head-Tag angezeigt. Oder Du kannst auch die Eigenschaft style_handle
angeben. Die beiden Eigenschaften werden hier beschrieben.
Tipp:
Um den richtigen Blocknamen zu finden, öffnest Du den Blockeditor, startest die Browserkonsole und gibst wp.blocks.getBlockTypes()
ein. Du erhältst dann eine vollständige Liste aller Blocknamen.
1.4 CSS einbinden
Das dazugehörige CSS kann direkt im CSS des Themes verfasst werden, oder vielleicht etwas modularer und übersichtlicher gesondert über den Hook wp_enqueue_scripts
.
function ud_enqueue_frontend_scripts(){
wp_enqueue_style(
'main',
get_stylesheet_directory_uri() . "/style_list_without_bullets.css",
[],
filemtime( get_stylesheet_directory() . "/style_list_without_bullets.css" ) );
}
add_action('wp_enqueue_scripts', 'ud_enqueue_frontend_scripts');
2 Block-Styles als Plugin
2.1 Benötigte Dateien
Wenn der Block-Style als Plugin den Weg in den Editor finden soll, benötigt es im plugins
-Ordner ein Verzeichnis mit den folgenden drei Dateien:
plugins/
- style_list_without_bullets/
-- index.php
-- style.css
2.2 index.php
In der index.php
-Datei wird das Plugin selbst registriert, der Block-Style und das style.css
hinzugefügt:
<?php
/**
Plugin Name: List without Bullets
Plugin URI: https://ulrich.digital
Description: Eine zusätzlicher Listen-Block-Style ohne Aufzählungs-Zeichen
Version: 1.0
Author: Matthias Ulrich
*/
if ( ! defined( 'ABSPATH' ) ):
exit;
endif;
/* =============================================================== *\
Register Block Style
\* =============================================================== */
function uldi_block_style(){
register_block_style(
'core/list',
array(
'name' => 'list-without-bullets',
'label' => 'Ohne Bullets',
)
);
}
add_action('after_setup_theme', 'uldi_block_style');
/* =============================================================== *\
Enqueue CSS for Block Styles
\* =============================================================== */
function uldi_block_style_css() {
wp_enqueue_style(
'uldi_block_style_css',
plugins_url( '/style.css', __FILE__ )
);
}
add_action( 'enqueue_block_assets', 'uldi_block_style_css' );
2.3 block.css
Die CSS-Klasse setzt sich aus dem Präfix is-style-
, gefolgt vom Namen, welcher unter register_block_style
gewählt worden ist, zusammen.
.is-style-list-without-bullets{
list-style:none;
}