In den Block-Einstellungen kannst du im Bereich Erweitert über ein Textfeld ganz einfach einem Block weitere Klassen hinzufügen. Diese Klassen können genutzt werden, um das Aussehen per CSS zu ändern und so bsw. eine andere Button Form und Größe darzustellen. Mit der Block-Style API bekommst du eine weitere Möglichkeit, die es erlaubt Blöcken weitere Klassen zu geben. Der Vorteil dieser API ist es, dass die Klassen vordefiniert werden können, der Editor ein Interface erstellt und eine Vorschau des Stils angezeigt wird.

Stile für eigene Blöcke

Ein Beispiel für Block-Stile ist bereits im Zitat-Block vorhanden, hier gibt es die Stile „Normal“ und „Groß“, die jeweils eigene CSS Definition haben. Über das erste Icon in der Block-Toolbar kannst du ein Menü öffnen, über das du die Block-Stile auswählen oder den Block in einen andern Typ umwanden kannst. Auf der rechten Seite erhältst du gleich eine Vorschau, wie die Block mit dem Stil aussehen wird.

In der Block-Definition (/block-library/src/quote/index.js) sind diese wie folgt definiert:

styles: [
	{ name: 'default', label: __( 'Regular' ), isDefault: true },
	{ name: 'large', label: __( 'Large' ) },
]

Styles ist ein Array mit den Stil-Objekten. Jedes Object hat dabei einen Namen, der für die Klasse verwendet wird. Aus name: ‚large‘ wird class=“is-style-large“. Das Label wird im Toolbar Menü angezeigt. Über den Parameter isDefault kannst du festlegen, welcher Stil vorausgewählt sein soll.

<blockquote class="wp-block-quote is-style-large">
	<p>Lorem ipsum dolor sit amet...</p>
	<cite>Das ist ein Beispiel</cite>
</blockquote>

Bestehende Blöcke erweitern

Neben der Stil Deklaration in der Block-Definition kannst du mit Hilfe eines Hooks auch Stile zu bereits bestehenden Blöcken hinzufügen. Wenn du beispielsweise einen eigenen Button-Stil hinzufügen möchtest, reichen die folgende JavaScript und CSS Anweisungen.

Mit der Funktion registerBlockStyle() registrierst du den Stil im Editor. Der erste parameter ist der registrierte Name des Blocks, bestehend aus namespace/block-name, der zweite Parameter ist ein Objekt mit mit dem Namen und dem Label.

wp.blocks.registerBlockStyle( 'core/button', { name: 'red-button', label: 'Rot' });

Der Editor erzeugt nun die Klasse is-style-red-button. Für diese Klasse kannst du eine CSS Anweisung erstellen, um so die Darstellung des Button zu definieren.

.wp-block-button.is-style-red-button .wp-block-button__link {
	background: #cf2e2e;
	text-transform: uppercase;
	border-radius: 0;
}

Im Editor sieht es dann folgendermaßen aus. Der Stil wird im Stil-Menü angezeigt und wenn du nun mit der Maus über den Stil gehst oder per Tastatur diesen auswählst, wird eine große Vorschau auf der rechten Seite dargestellt.