In meinem letzten Beitrag habe ich euch gezeigt, wie man Seiten-Templates in einem Child-Theme deaktivieren kann. Diese Woche geht es um die Deaktivierung anderer Dinge, die über das Parent-Theme oder ein Plugin kommen können. Es geht um Block-Styles. Damit können verschiedene Stile für einen Block definiert werden, die entweder im Core, im Theme, aber manchmal auch in Plugins zu finden sind.

Deaktivierung über einen „Dequeue-Hook“

Block-Stile werden innerhalb von JavaScript-Dateien definiert. Diese Dateien müssen in die Seite eingebunden werden. Hier können wir ansetzen und die Datei wieder entfernen. Das könnte wie folgt aussehen:

function dibs_dequeue_assets() {
	wp_dequeue_script( 'editorskit-editor' );
}
add_action( 'enqueue_block_editor_assets', 'dibs_dequeue_assets', 11 );

In diesem Beispiel wird die Hauptdatei mit allen JavaScript-Funktionen für den Editor entfernt. Sie enthält also nicht nur Block-Styles, sondern den gesamten JavaScript-Code für das Plugin. Das ist also nur dann eine gute Option, wenn das Plugin mehrere Dateien verwendet und eine davon nur die Registrierung der Block-Styles übernimmt.

Deaktivierung ausgewählter Block-Stile

Wenn ihr also nur bestimmte Styles in backend deaktivieren möchtet, dann müsst ihr ein wenig eigenen JavaScript-Code verwenden. Hierzu laden wir zuerst die Datei mit diesem Code:

function dibs_enqueue_assets() {
	wp_enqueue_script(
		'dibs-remove-block-styles',
		plugins_url( 'remove-block-styles.js', __FILE__ ),
		array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'remove-block-styles.js' ),
		true
	);
}
add_action( 'enqueue_block_editor_assets', 'dibs_enqueue_assets', 11 );

Die hinzugefügt Datei lädt die Abhängigkeiten zu wp-blocks, wp-dom-ready und wp-edit-post um korrekt zu funktionieren. Nachdem die Datei hinzugefügt wurde, können wir die Block-Styles entfernen:

wp.domReady( function() {
	wp.blocks.unregisterBlockStyle(
		'core/image',
		'editorskit-diagonal'
	);
	wp.blocks.unregisterBlockStyle(
		'core/image',
		'editorskit-inverted-diagonal'
	);
	wp.blocks.unregisterBlockStyle(
		'core/cover',
		'editorskit-diagonal'
	);
	wp.blocks.unregisterBlockStyle(
		'core/cover',
		'editorskit-inverted-diagonal'
	);
} );

Nach dem Laden der Seite wird wp.blocks.unregisterBlockStyle() verwendet, deren erster Parameter den „Slug“ des Blocks angibt, für den wir einen Stil entfernen wollen. Der zweite Parameter ist der „Slug“ des Block-Style. In diesem Beispiel würden wir also zwei Block-Stile von den Blöcken core/image und core/cover entfernen.

Dieser Ansatz ist vermutlich derjenige, den ihr verwenden möchtet, da das Entfernen einer gesamten JavaScript-Datei wie im ersten Beispiel nur selten funktionieren wird. Aber auch, wenn ihr nur einzelne Stile entfernen möchtet, ist dies wohl die bessere Lösung.

Fazit

Falls ein Plugin neue Block-Styles mitbringt, die ihr nicht verwenden möchtet, dann reicht eine kleine JavaScript-Datei aus, um diese zu entfernen. Es ist aber zu beachten, dass dies nur die Auswahl dieser Stile im Backend entfernt. Bereits zuvor hinzugefügt Blöcke in Beiträgen und Seiten haben weiterhin den Stil in Form von CSS-Klassen. Sofern die CSS-Datei auch weiterhin die Anweisungen enthält, wird der Block-Stil weiterhin im Frontend angezeigt. Falls ihr das also ebenfalls deaktivieren wollt, müsst ihr entweder die CSS-Klassen von den alten Blöcken entfernen oder aber die CSS-Eigenschaften im (Child-)Theme entfernen oder überschreiben.