ulrich.digital | Block-Styles in WordPress erstellen

Block-Styles in WordPress ermöglichen es dir, das Erscheinungsbild deiner Website-Blöcke schnell und einfach anzupassen. Mit Block-Styles kannst du verschiedene Designvorlagen auf Blockebene anwenden, um deinen Inhalt optisch ansprechend zu gestalten. Von Hintergrundfarben und Schriftformatierungen bis hin zu Abstandseinstellungen und Effekten.

Styles, Variations oder Patterns?

1. Block-Styles

Diese Methode ermöglicht eine neue Design-Variante eines vorhandenen Blocks zu erstellen, ohne die Block-Attribute oder den Inhalt zu ändern.

2. Block-Variations

Diese Methode ermöglicht Anpassungen des Block-Designs und der Block-Attribute. Es ist auch möglich, vordefinierte Inhalte wie Platzhalter-Texte hinzuzufügen.

3. Block-Patterns

Diese Methode ermöglicht vordefinierte, editierbare Blöcke zu erstellen. Sie ist besonders nützlich für komplexe und verschachtelte Strukturen.

In diesem 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.

Webdesign Schwyz | WordPress | Zwei Variationen des Listen-Blocks mit Block-Styles — Zwei verschiedene Listen im Frontend, eine mit Bullets und eine ohne.

Webdesign Schwyz | WordPress | Die verschiedenen Block-Styles erscheinen in der rechten Seitenleiste. — Die verschiedenen Block-Styles erscheinen in der rechten Seitenleiste.

Ob Du die Block-Styles mit deinem eigenen Theme oder mit einem Plugin zur Verfügung stellen willst, bleibt Dir überlassen.

Benötigte Dateien

Wenn Dein Block-Style im eigenen Theme hinzugefügt werden soll, musst Du keine weiteren Dateien hinzufügen. Optional kannst du das CSS deines Block-Styles in einer separaten Datei speichern.

style_list_without_bullets.css

Wenn der Block-Style als Plugin den Weg in den Editor finden soll, benötigt es im plugins-Ordner ein Verzeichnis mit den folgenden zwei Dateien:

plugins/
	- style_list_without_bullets/
		-- index.php
		-- style.css

Dateien einbinden und Block-Style registrieren

Um einen Block-Style einem Core-Block hinzufügen zu können, musst du den Blocknamen kennen. Um den richtigen Blocknamen zu finden, öffnest du einfach den Blockeditor, startest die Browserkonsole und gibst den Befehl wp.blocks.getBlockTypes() ein. Dadurch erhältst du eine vollständige Liste aller Blocknamen, die in WordPress verfügbar sind.

Im eigenen Theme

Zuerst registrierst Du Deinen Block-Style in der Datei functions.php

if ( function_exists( 'register_block_style' ) ) {
    register_block_style(
        'core/list',
        array(
            'name'         => 'list-without-bullets',
            'label'        => 'Ohne Bullets',
        )
    );
}

Wenn du eine eigene CSS-Datei in deinem Theme hinterlegt hast, kannst du diese mit Hilfe der WordPress-Funktion 'wp_enqueue_scripts' einbinden

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');

Im eigenen Plugin

Wenn du deine Block-Styles lieber als Plugin deiner WordPress-Instanz hinzufügen möchtest, kannst du dies über die index.php-Datei tun.

<?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' );

Die Eigenschaften Deines Block-Style

Die beiden Eigenschaften label und name 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. Diese Klasse wird dann dem entsprechenden Block im Backend und Frontend zugewiesen.

<ul class="is-style-list-without-bullets">
    <li>Listeneintrag</li>
</ul>

Folgende weitere Eigenschaften sind optional, aber nützlich. Sie sind hier ausführlicher beschrieben.

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.

'inline_style' => 'ul.is-style-list-without-bullets { color: blue; }',

style_handle: Wenn du bereits ein Stylesheet registriert hast, das das CSS für deinen Blockstil enthält, kannst du einfach das Handle dieses Stylesheets an die Funktion register_block_style übergeben. Dadurch sparst du dir den zusätzlichen Code, um das Stylesheet erneut einzubinden.

'style_handle' => 'uldi_block_style_css',

Das war unser Überblick über Block-Styles! Viel Spass beim Gestalten und viel Erfolg mit deiner WordPress-Website!