Gutenberg. Nur ein neuer Editor, und doch hat er die WordPress-Welt verändert. Wer bisher Themes und Plugins auf PHP-Basis entwickelte, muss sich umstellen, oder er verwendet einen Entwicklungshelfer für neue Blöcke in Gutenberg die von seiner Seite keine React-Kenntnisse erfordern.

Viele Plugins die eine WordPress-Installation um neue Blöcke für Gutenberg erweitern, sind ebenfalls mit Blockbaukästen entstanden. Wenn ich die Javascript-Dateien in meinem Editor öffne dann sieht es für mich aus, als hätte die Katze den Code reingeschmissen.

Gutenberg ist weitaus sensibler als der TinyMce mit dem WordPress-Inhalte früher bearbeitet wurden. Gibt man beispielsweise aus Debugginggründen Code mit echo oder print_r aus, weigert er sich zu speichern. Wurde ein Stück Inhalt mit einem Block generiert, der nicht mehr vorhanden ist, geht nicht nur die Formatierung verloren.

Beim Bearbeiten des Inhalts erhält man den Hinweis, dass die Website den Block nicht unterstützt und man ihn „intakt lassen“ kann (was allerdings nur die Struktur erhält, nicht die Formatierungen) oder den Inhalt in einen HTML-Block umwandeln.

Ein kleiner Fehler in einem Block-Plugin kann mithin dazu führen, dass überhaupt keine Inhalte mehr bearbeitet werden können, oder nicht mit allen Browsern auf allen Systemen. Kürzlich verursachte das Update eines Blog-Plugins, dass ein Kunde mit Mac-Rechner keinen Zugriff mehr auf die Bearbeitungsfunktionen von Gutenberg hatte. Bei mir hingegen trat kein Fehler auf.

Da die Chancen gut sind, dass ein einmal installiertes Plugin zur Erweiterung der Blöcke nicht folgenfrei entfernt werden kann, sollte man sich sehr genau überlegen, für welches man sich entscheidet, und ob es überhaupt erforderlich ist. Gutenberg wird mit den nächsten Updates von WordPress noch wachsen und weitere Blöcke bekommen. Die es schon gibt können vielleicht schon mehr leisten, als sie auf den ersten Blick ahnen lassen.

Als die Anforderung im Raum stand, bei Überschriften die Wahl zwischen vier bestimmten Farben anzubieten, war der erste Gedanke auch, ein Plugin mit neuen Blöcken zu installieren. Allerdings 10 oder mehr Blöcke reinzuholen nur um eine Überschrift mit Farbauswahl zu bekommen?

Ein paar Zeilen Javascript können das auch bewirken, denn Blöcke haben Filter mit denen sie beispielsweise um zusätzliche Stile erweitert werden können. Aus diesen werden CSS-Klassen, deren Aussehen nicht nur von außern steuerbar ist, ggf. lassen sich definierte Stile jederzeit global ändern oder einfach aufheben.

wp.blocks.registerBlockStyle('core/heading', {
    name: 'default',
    label: 'Default',
    isDefault: true,
});

wp.blocks.registerBlockStyle('core/heading', {
    name: 'purple',
    label: 'Purple',
});

wp.blocks.registerBlockStyle('core/heading', {
    name: 'green',
    label: 'Green',
});

wp.blocks.registerBlockStyle('core/heading', {
    name: 'darkgreen',
    label: 'Dark Green',
});

Dieser Snippet wird mit enqueue_block_editor_assets eingebunden und stellt vier Stile zur Auswahl.

function flxo_gutenberg_scripts() {
	wp_enqueue_script( 'flxo-block-styles', plugin_dir_url( __FILE__ ) . 'assets/js/flxo-blocks.js', array( 'wp-blocks', 'wp-dom' ), '1.0', true );
}
add_action( 'enqueue_block_editor_assets', 'flxo_gutenberg_scripts' );

	
/**
 * Enqueue blocks editor style
 */
function flxo_block_editor_styles() {
    wp_enqueue_style( 'flxo-block-styles', plugin_dir_url( __FILE__ ) . 'assets/css/flxo-blocks.css' ); 
}
add_action( 'enqueue_block_editor_assets', 'flxo_block_editor_styles' );
add_action( 'wp_enqueue_scripts', 'flxo_block_editor_styles' );

Die CSS-Datei wird wohl für den Editor als auch für das Frontend eingebunden. Viel Code braucht sie nicht, es geht hier ja nur um drei zusätzliche Farben.

.is-style-purple {
    color: #7d004d !important;
}

.is-style-darkgreen {
    color: #004a2b !important;
}

.is-style-green {
    color: #95c11e !important;
}