Attribute des Block-Edit-Wrappers verändern

Im Gutenberg-Editor liegen ein paar Wrapper-Elemente um das Markup aus der edit-Funktion. Der äußerste hat die wp-block-Klasse und ein data-block-Attribut, in dem der Name des Blocks mit dem Namespace steht, bei dem Gruppe-Block beispielsweise core/group.

Die Attribute dieses Wrappers lassen sich verändern, so können zum Beispiel Klassennamen eingefügt werden, die etwas über den Wert von Block-Einstellungen aussagen, was für das Styling des Blocks im Backend vorteilhaft oder notwendig sein kann.

Ein Weg, der für alle Blöcke funktioniert, ist über den editor.BlockListBlock-Filter. Um einen Klassennamen hinzuzufügen, der den Wert eines Attributs enthält, kann das so aussehen (Lösungsansatz von StackExchange):

const { createHigherOrderComponent } = wp.compose;
const withStyleClasses = createHigherOrderComponent( ( BlockListBlock ) => {
	return ( props ) => {
		if ( props.name !== 'my/block' ) {
			return <BlockListBlock { ...props } />
		}

		const {
			myAttribute,
		} = props.attributes;

		return <BlockListBlock { ...props } className={ `my-attribute-${ myAttribute }` } />;
	};
}, 'withStyleClasses' );

wp.hooks.addFilter( 'editor.BlockListBlock', 'slug/with-style-classes', withStyleClasses );
Code-Sprache: JavaScript (javascript)

In der an den editor.BlockListBlock-Filter gehängten withStyleClasses-Komponente, die als Parameter den BlockListBlock mitbekommt, prüfen wir zunächst auf unseren Block-Bezeichner my/block. Liegt der nicht vor, geben wir BlockListBlock mit den Eigenschaften unverändert zurück.

Haben wir unseren Block, holen wir uns den Wert des Attributs myAttribute und fügen ihn in einen Klassennamen ein, der mit my-attribute- beginnt und mit dem aktuellen Wert des Attributs endet.

Ein weiterer Weg, den ich gefunden habe, funktioniert direkt bei der Registrierung eines Blocks über getEditWrapperProps und ist, zumindest in meinem Test, für Dinge wie zusätzliche Klassen nicht geeignet (weil es nicht funktioniert hat, die neue Klasse an die bestehenden zu hängen, sondern nur die bestehenden zu ersetzen), aber für eigene data-Attribute durchaus nützlich und man erspart sich den Einsatz eines Filters.