Alternativen Stil für Gutenberg-Block erstellen

Für den Gutenberg-Editor gibt es die Möglichkeit, alternative Block-Stile zu erstellen. Bei der Auswahl eines Stils wird dann eine CSS-Klasse eingefügt und der Block kann ein angepasstes vordefiniertes Design erhalten. Von Haus aus hat beispielsweise der Zitat-Block einen Stil »Groß«. Hier zeige ich anhand eines kleinen Beispiel-Plugins, wie sich so ein Stil erstellen lässt.

Update vom 1. Juni 2019: In der ersten Version des Artikels wurde noch ein Standard-Stil definiert, damit der alternative Stil wieder entfernt werden kann. Das scheint inzwischen nicht mehr notwendig zu sein – in einem Test hat WordPress den Standard-Stil automatisch eingefügt.

Voraussetzung

In meinem vorherigen Beitrag habe ich beschrieben, wie sich Webpack einrichten lässt. Diese Einrichtung brauchen wir für das Plugin – den fertigen Code des Plugins gibt es auf GitHub.

Aus dem vorangegangen Beitrag haben wir dann jetzt:

• Die Webpack-Konfiguration, package.json und postcss.config.json.
• Die blocks/index.js, blocks/editor.scss und blocks/frontend.scss.

Umsetzung

Beginnen wir mit der Erstellung der Haupt-Plugin-Datei und anschließend dem JavaScript.

Main-File des Plugins erstellen

In der obersten Ebene unseres Plugins legen wir die Datei krautpress-gutenberg-block-style.php an und füllen sie mit folgenden Inhalt:

<?php
/**
 * Plugin for custom list block style as example for KrautPress article.
 *
 * @license GPL-2.0+
 * @package krautpress/block-style
 *
 * @wordpress-plugin
 * Plugin Name: KrautPress block style
 * Description: A plugin that adds a block style to the list block.
 * Version:     0.1.0
 * Author:      Florian Brinkmann
 * Author URI:  https://florianbrinkmann.com/en/
 * License:     GPL v2 http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
 */
if ( ! defined( 'WPINC' ) ) {
	die;
}
/**
 * Enqueue block script and backend stylesheet.
 */
add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_script(
        'krautpress-gutenberg-block-style-editor-script',
        plugins_url( 'assets/js/editor.blocks.js', __FILE__ ),
        [ 'wp-blocks', 'wp-element', 'wp-edit-post', 'lodash' ]
    );
    wp_enqueue_style(
        'krautpress-gutenberg-block-style-editor-style',
        plugins_url( 'assets/css/editor.blocks.css', __FILE__ )
    );
} );
/**
 * Enqueue styles for backend and frontend.
 */
add_action( 'enqueue_block_assets', function() {
    wp_enqueue_style(
        'krautpress-gutenberg-block-style-frontend-style',
        plugins_url( 'assets/css/frontend.blocks.css', __FILE__ )
    );
} );
Code-Sprache: PHP (php)

Zunächst kommt der obligatorische Plugin-Header, damit WordPress den Code überhaupt als Plugin erkennt. Anschließend prüfen wir, ob der Code innerhalb einer WordPress-Installation abläuft und binden ab Zeile 24 über die enqueue_block_editor_assets-Action ein Skript und ein Stylesheet auf den Gutenberg-Seiten im Backend ein.

Dabei handelt es sich um Kompilierungsergebnisse der Source-Dateien, die wir im ersten Schritt bereits angelegt haben. Als Abhängigkeiten geben wir für das Skript

• wp-blocks mit Funktionen zur Erstellung von Blocks,
• wp-element, ein Abstaktions-Layer auf React (heißt, im Hintergrund läuft React, zugegriffen wird darauf aber über Gutenberg-eigene Funktionen. So könnte später das Framework im Hintergrund auch ausgetauscht werden, ohne dass Code von Plugins oder Themes angepasst werden müsste),
  
• wp-edit-post  und
• lodash

an. Für unser einfaches Beispiel brauchen wir vermutlich nicht alle, zum Beispiel lodash und wp-element, aber bei meinen bisherigen Erfahrungen mit Gutenberg hat mit diesen Abhängigkeiten immer alles funktioniert. 🙂

Ab Zeile 39 wird dann innerhalb einer Funktion, die an enqueue_block_assets gehängt wird, noch ein Stylesheet nur für das Frontend eingebunden.

Das JavaScript für den Block-Stil erstellen

Ein Block-Stil ist recht schnell angelegt. Die folgenden Zeilen sind das ganze JavaScript, um einen Stil für den Listen-Block zu erstellen:

// Add a block style.
wp.domReady( () => {
	const { registerBlockStyle } = wp.blocks;
	registerBlockStyle( 'core/list', { name: 'large', label: 'Groß' } );
} );
Code-Sprache: JavaScript (javascript)

Zunächst warten wir, bis das DOM fertig geladen ist. Dann erstellen wir mit wp.blocks.registerBlockStyle den Stil, indem wir als ersten Parameter den Bezeichner des gewünschten Blocks angeben – in unserem Fall core/list – gefolgt von einem Optionen-Objekt mit Namen und Beschriftung. Der Name wird für die CSS-Klasse verwendet, die Beschriftung wird dem Nutzer angezeigt.

Wenn wir das jetzt über npm run build mit Babel kompilieren, das Plugin aktivieren und einen Listen-Block einfügen, sollten wir über den Button ganz links in der Block-Toolbar neben dem Standard-Stil den neuen »Groß«-Stil auswählen können.

Fügen wir jetzt noch ein wenig CSS in die blocks/frontend.scss ein:

.is-style-large {
	font-size: 1.5em;
}
Code-Sprache: CSS (css)

und importieren das in die editor.scss:

@import './frontend';
Code-Sprache: JavaScript (javascript)

Somit sollten wir auch visuell einen Unterschied feststellen, wenn der große Stil ausgewählt ist 🎉 Wer das Plugin ohne große Einrichtung von Webpack und Co. testen möchte, kann es mit der krautpress-gutenberg-block-style.zip von der Release-Seite auf GitHub installieren.