Block-Styles

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.

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.

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;
}