Block-Variations | ulrich.digital

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.

Neue Homepage erstellen lassen | Webdesign | Schwyz | Zug | Luzern | Altdorf | ulrich.digital — Unsere Variation des Group-Blocks enthält ein Bild, eine Überschrift und einen Absatz.

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.

Webdesign Schwyz | Neue Homepage | Die Block-Variation erscheinen im Block-Inserter als eigenständiger Block. — Die Block-Variation erscheinen im Block-Inserter als eigenständiger Block.

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