WordPress Block-Variations erstellen

Mit Block-Variationen kannst du deine Blöcke so anpassen, dass sie sich problemlos an jede Webseite anpassen können. Du hast die Möglichkeit, das Design eines Blocks in verschiedenen Farben zu gestalten, die Schriftgröße anzupassen oder sogar animierte Ein- und Ausblendeffekte hinzuzufügen.

Dank Block-Variations kannst Du nicht nur Dein eigenes CSS nutzen, sondern auch die Werte der Attribute individuell einstellen. Natürlich muss der Block das betreffende Attribut auch unterstützen. Eine Liste sämtlicher Attribute findest Du hier, welche Blöcke welche Attribute unterstützen hier.

Wir beschreiben hier beide Methoden, wie Du Block-Variations zur Verfügung stellen kannst: entweder im eigenen Theme oder mit einem Plugin.

Unsere Variation des Group-Blocks enthält ein Bild, eine Überschrift und einen Absatz. Hier die beiden Ansichten im Frontend und im Editor

Benötigte Dateien

Block-Variation im eigenen Theme

Um die Block-Variation im eigenen Theme zu erstellen, benötigst du neben der functions.php des Themes eine JavaScript-Datei. In unserem Beispiel haben wir diese Datei im Verzeichnis blocks/ unseres Themes abgelegt.

my_theme/
	- functions.php
	- blocks/
		-- image_card.js
		-- image_card.css // optional

Block-Variation als Plugin

Um die Block-Variation als Plugin bereitzustellen, benötigst du im Plugin-Ordner ein Verzeichnis mit den folgenden drei Dateien:

plugins/
	- group_variation/
		-- index.php
		-- image_card.js
		-- image_card.css

Einbindung der Dateien

Einbindung der Dateien im eigenen Theme

In der functions.php-Datei wird eine Funktion dem Hook enqueue_block_editor_assets zugewiesen, die auf die JavaScript-Datei verweist:

function ud_block_variations() {
	wp_enqueue_script(
		'ud-block-variations', 
		get_template_directory_uri() . '/blocks/image_card.js',
		array('wp-blocks'),
		filemtime( get_template_directory() . '/blocks/image_card.js' )
	);
}
add_action( 'enqueue_block_editor_assets', 'ud_block_variations' );

Du kannst deine CSS-Angaben direkt in die CSS-Datei deines Themes schreiben oder auch eine eigene CSS-Datei dafür erstellen und einbinden:

function ud_block_css(){
	wp_enqueue_style( 
		'main', 
		get_stylesheet_directory_uri() . "/blocks/image_card.css",
		[], 
		filemtime(get_stylesheet_directory() . "/blocks/image_card.css" ));
}
add_action('wp_enqueue_scripts', 'ud_block_css');

Einbindung der Dateien als Plugin

Die index.php-Datei dient als Einstiegspunkt für dein Plugin. Hier registrierst du das Plugin selbst und bindest die beiden Dateien image_card.js und image_card.css ein.

<?php
/**
Plugin Name: Image Card
Plugin URI: https://ulrich.digital
Description: Erstellt eine Image Card
Version: 1.0
Author: Matthias Ulrich
*/

if ( ! defined( 'ABSPATH' ) ): 
	exit;
endif;

/* =============================================================== *\
   Enqueue JavaScript for Image-Card
\* =============================================================== */

function uldi_add_image_card_js() {
	wp_enqueue_script('uldi_image_card_js', 
		plugins_url( '/image_card.js', __FILE__ ), 
		array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
		filemtime(plugin_dir_path( __FILE__ ) . '/image_card.js')
	);
}
add_action( 'enqueue_block_editor_assets', 'uldi_add_image_card_js' );


/* =============================================================== *\
   Enqueue CSS for Block Styles
\* =============================================================== */
function uldi_block_style_css() {
	wp_enqueue_style(
		'uldi_image_card_css', 
		plugins_url( '/image_card.css', __FILE__ )
	);
}
add_action( 'enqueue_block_assets', 'uldi_block_style_css' );

Die image_card.js-Datei

Die image_card.js-Datei enthält den JavaScript-Code, der die Block-Variation registriert und konfiguriert. In diesem Beispiel verwenden wir den Core-Block group, der das Attribut "innerBlocks" unterstützt. Dadurch können wir ein Block-Template erstellen, das aus einem Bild, einer Überschrift und einem Absatz besteht.

Um zu verhindern, dass die einzelnen innerBlocks verschoben oder gelöscht werden können, verwenden wir die Attribute "templateLock" und "lock". Dadurch bleibt die Struktur der Block-Variation erhalten.

Ausserdem übergeben wir dem Block eine CSS-Klasse mit dem Attribut "className". Diese CSS-Klasse steht im Frontend zur Verfügung und ermöglicht es uns, das Erscheinungsbild des Blocks mit benutzerdefinierten CSS-Stilen anzupassen.

wp.domReady( function() {
	wp.blocks.registerBlockVariation(
		'core/group', {
			name: 'image_card',
			title: 'Image Card',
			description: 'Erstelle eine Image Card',
			scope: ['inserter'],
			attributes: {
		  		className: 'image_card',
				templateLock:"all",
				lock:{
					move:true,
					remove:true
				}
			},
			innerBlocks: [
				['core/image'],
				['core/heading', { level: 2, placeholder: 'Headline'}],
				['core/paragraph', { placeholder: 'Some Text'}],
			]
		}
	);
});

Die image_card.css-Datei

Die image_card.css-Datei enthält die CSS-Stile für die Block-Variation. Du kannst entweder direkt im style.css deines Themes die entsprechenden CSS-Angaben machen oder eine separate CSS-Datei erstellen und einbinden. Hier sind einige Beispiele für mögliche CSS-Anpassungen:

/* Beispiel-Stil für die Image Card */
.image_card {
    background-color: #f5f5f5;
    padding: 20px;
    border: 1px solid #ccc;
}

/* Stil für das Bild im Inneren des Blocks */
.image_card .wp-block-image {
    max-width: 100%;
}

/* Stil für die Überschrift */
.image_card h2 {
    font-size: 24px;
    color: #333;
}

/* Stil für den Absatz */
.image_card p {
    font-size: 16px;
    color: #666;
}

So, du hast nun das Ende unseres Leitfadens zur Verwendung von Block-Variationen erreicht. Viel Spass beim Experimentieren!