Block-Variations eignen sich, um eine Variante eines Blocks zur Verfügung zu stellen, welche sich durch das Design vom originalen Block unterscheidet, und man kann die Werte der Block-Attribute setzen. 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.
Mit Block-Variations können neben einem eigenen CSS auch die Werte der Attribute gesetzt werden. Voraussetzung dafür ist, dass der Block das betreffende Attribute auch unterstützt. Eine Liste sämtlicher Attribute findet sich hier, welche Blöcke welche Attribute unterstützen hier.

Wir beschreiben hier beide Methoden, wie Du Block-Variations zur Verfügung stellen kannst, ob im eigenen Theme oder mit einem Plugin.
1. Block-Variations im eigenen Theme
1.1 Benötigte Dateien
Neben der functions.php
des eigenen Themes braucht es eine Java-Script-Datei. Wir haben diese in unserem Theme unter dem Verzeichnis blocks/
abgelegt:
my_theme/
- functions.php
- blocks/
-- image_card.js
-- image_card.css // optional
1.2 functions.php
In der functions.php
wird der dem Hook enqueue_block_editor_assets
eine Funktion angehängt, welche auf die Javascript-Datei zeigt:
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' );
1.3 image_card.js
In der image_card.js
-Datei wird zuerst eine Block-Variation registriert und dann angegeben, für welche Blocks die Variation gelten soll. Dann wird ein Name und ein Titel vergeben und angegeben. Da der hier im Beispiel verwendete Block group
das Attribute innerBlocks
unterstützt, kann damit ein Block-Template erstellt werden, in unserem Beispiel zuerst ein Bild, eine Überschrift und ein Absatz.
Wir möchten verhindern, dass die einzelnen innerBlocks verschoben oder glöscht werden können, dies erreichen wir mit den beiden Attributen templateLock
und lock
.
Mit dem Attribut className
übergeben wir eine CSS-Klasse, welche dann im Frontend verfügbar ist.
wp.blocks.registerBlockVariation(
'core/group', {
name: 'image_card',
title: 'Image Card',
description: 'Erstellt eine Image Card',
scope: ['inserter'],
attributes: {
templateLock:"all",
lock:{
move:true,
remove:true
},
className: 'image_card'
},
innerBlocks: [
['core/image'],
['core/heading', { level: 2, placeholder: 'Headline'}],
['core/paragraph', { placeholder: 'Some Text'}],
]
);
1.4 image_card.css
(optional) Ob Du Deine Stylesheet-Angaben im style.css
des Themes macht, oder lieber eine eigene css-Datei erstellt, ist wohl Geschmackssache. Falls Du eine eigene Datei erstellen möchtest, hookst Du dich in der functions.php
bei wp_enqueue_scripts
ein und gibst den Pfad zu deiner CSS-Datei an.
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');
2. Block-Variations als Plugin
2.1 Benötigte Dateien
Um die Block-Variation als Plugin zur Verfügung zu stellen, benötigt es im plugins
-Ordner ein Verzeichnis mit den folgenden drei Dateien:
plugins/
- group_variation/
-- index.php
-- image_card.js
-- image_card.css
2.2 index.php
In der index.php
-Datei wird das Plugin selbst registriert und die Dateien image_card.js
und image_card.css
hinzugefügt:
<?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' );
2.3 image_card.js
In der image_card.js
-Datei wird zuerst eine Block-Variation registriert und dann angegeben, für welche Blocks die Variation gelten soll. Dann wird ein Name und ein Titel vergeben und angegeben. Da der hier im Beispiel verwendete Block group
das Attribute innerBlocks
unterstützt, kann damit ein Block-Template erstellt werden, in unserem Beispiel zuerst ein Bild, eine Überschrift und ein Absatz.
Wir möchten verhindern, dass die einzelnen innerBlocks verschoben oder glöscht werden können, dies erreichen wir mit den beiden Attributen templateLock
und lock
.
Mit dem Attribut className
übergeben wir eine CSS-Klasse, welche dann im Frontend verfügbar ist.
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'}],
]
}
);
});
2.4 image_card.css
Der Group-Block «Image Card» ist nun im Backend wie auch im Frontend über die Klasse .image_card
verfügbar.