Custom Styles

Falls du für deinen Block mit verschiedene Styles anbieten möchtest, kannst du folgendes tun.

Methode als Funktion
Damit ich mich im Code nicht direkt wiederholen musst, schreibe ich lieber eine Funktion und gebe ihr Parameter mit. 
Name & Hinweise
Type
$blockname | Gebe den Namespace von deinem Block an
String
$classname  | Gebe hier die CSS Klasse, die dann mit is-style concat. wird  
String
$label            | Dieses Label wird im Backend angezeigt
String
// Globale Funktion wird geschrieben
function StyleGutenbergRegister( $blockname , $classname, $labelname) {
    wp.blocks.registerBlockStyle( $blockname, {
        name:  $classname,  
        label: $labelname
    });
}
​
// Funktion wird aufgerufen und Parameter werden mitgegeben
StyleGutenbergRegister( 'prwp-blocks/featureblock', 'dotted', 'Gepunktet'); 
Methode direkt im RegisterBlockType 
Falls du dies nicht als Funktion extern haben möchtest, kannst du innerhalb vom der RegisterBlockType Funktion  zum Beispiel unter den Attributen diesen Code Block einfügen. 
styles: [
	{
		name: "prwp__bg--default",
		label: __("Hintergrund Weiß"),
		isDefault: true
	},
	{
		name: "prwp__bg--grey",
		label: __("Hintergrund Grau")
	},
	{
		name: "prwp__bg--yellow",
		label: __("Hintergrund Gelb")
	}
],
Erläuterungen 
isDefault: true
Mittels diesem Befehlen kannst du einen Standard definieren und dieser wird automatisch ausgewählt. Pro Objekt Branch kannst einen CSS/HTML Klasse definieren und einen Label angeben, welcher dann im Backend angezeigt wird. 
Style deaktivieren
Falls du einen Style entfernen möchtest, kannst du dies so tun: 
// Erster Parameter: Namespace des Blocks mit dem Style  
// Zweiter Parameter: Style Name 
​
wp.blocks.unregisterBlockStyle( 'core/quote', 'large' );
​
// Falls React dies nicht erkennt, verwende die DomReady Funktion
wp.domReady( function() {
    wp.blocks.unregisterBlockStyle( 'core/quote', 'large' );
} );
Weitere besonderen Filter Methoden findest du übrigens hier: 
Gutenberg Handbook 

Option Settings

Transform

Last updated 2 years ago

Name & Hinweise	Type
$blockname \| Gebe den Namespace von deinem Block an	String
$classname \| Gebe hier die CSS Klasse, die dann mit is-style concat. wird	String
$label \| Dieses Label wird im Backend angezeigt	String