7. März 2023

So kann man im Gutenberg-Editor Blöcken beliebige CSS-Klassen zuweisen

Die Funktion „register_block_style“ ermöglicht es benutzerdefinierte CSS-Klassen vorhandenen Gutenberg-Blöcken zuzuweisen.

Das ermöglicht z.B. die Auswahl verschiedener Listen-Typen, Tabellen-Typen, Text-Styles u.v.m. – also alles, was mit CSS formatierbar ist direkt im Gutenberg-Editor.

Folgender Code muss hierfür in der functions.php ergänzt werden:

register_block_style(
    'core/table',
    array(
        'name'  => 'red-arrows',
        'label' => 'rote Pfeile',
    )
);Code-Sprache: PHP (php)

Jetzt kann die Klasse im Gutenberg-Editor rechts in den Block-Einstellungen ausgewählt werden.

Vorausgesetzt, dass die Klasse auch im Stylesheet definiert ist, wird im Front-end das entsprechende Ergebnis angezeigt.

Ein Blick in die Konsole zeigt, dass überraschenderweise und leider nicht die Klasse „red-arrows“ sondern die Klasse „is-style-red-arrows“ zugewiesen wird. WordPress ergänzt also das Prefix „is-style-„. Das ist bei selbstdefinierten Klassen kein Problem – wird aber zum Problem, wenn man z.B. Bootstrap-Klassen nutzen möchte.

Wenn ich z.B. einen Text-Absatz mit der Bootrap-Klasse „lead“ vergrößern möchte, funktioniert das mit folgendem Code nicht.

register_block_style(
	'core/paragraph',
    array(
        'name'  => 'lead',
        'label' => 'Introtext',
    )
);Code-Sprache: PHP (php)

Statt des erwünschten

<p class="lead">Code-Sprache: JavaScript (javascript)

wird

<p class="is-style-lead">Code-Sprache: JavaScript (javascript)

ausgegebeben.

Anscheinend gibt es leider auch keine Funktion in WordPress mit der man dieses Verhalten ändern kann.

In diesem Fall kann nur noch „Good old Friend“ jQuery helfen. 🙂 Und mit folgendem Code kann das erwünschte Ergebnis dann doch noch erreicht werden.

$('p.is-style-lead').removeClass('is-style-lead').addClass('lead');
Code-Sprache: JavaScript (javascript)