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' );
} );

PreviousOption Settings NextTransform

Last updated 5 years ago

Was this helpful?

// 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');

styles: [ { name: "prwp__bg--default", label: __("Hintergrund Weiß"), isDefault: true }, { name: "prwp__bg--grey", label: __("Hintergrund Grau") }, { name: "prwp__bg--yellow", label: __("Hintergrund Gelb") } ],

// 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' ); } );