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.

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.

Webdesign Schwyz | WordPress | Zwei Variationen des Listen-Blocks mit Block-Styles

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.

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. 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;
}
1 Star2 Stars3 Stars4 Stars5 Stars (1)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert