Wissen Webperformance

Block-Assets in WordPress passend laden

Eigene Gutenberg-Blöcke und angepasste Core-Blöcke benötigen Styles und Skripte in unterschiedlichen Kontexten. WordPress verbindet diese Dateien mit der Blockregistrierung und lädt sie dort, wo der jeweilige Block verwendet wird.

2 Min. · 7. Juli 2022 · von Matthias Ulrich

CSS und JavaScript gehören dorthin, wo ihre Funktion definiert ist: bei eigenen Blöcken in die Block-Metadaten, bei Theme-Anpassungen für Core-Blöcke in die entsprechende Blockregistrierung.

So bleibt die technische Struktur nachvollziehbar. WordPress stellt die Dateien im Editor oder auf der Website für den jeweiligen Block bereit und unterstützt damit eine effiziente technische Auslieferung.

Eigene Blöcke in block.json ausstatten

Für einen eigenen Block werden die benötigten Dateien direkt in der block.json angegeben. style gilt für Editor und Website, editorStyle für den Editor und viewScript für die Website.

{
	"apiVersion": 3,
	"name": "ulrich-digital/hinweis",
	"title": "Hinweis",
	"style": "file:./style.css",
	"editorStyle": "file:./editor.css",
	"viewScript": "file:./view.js"
}

Nach der serverseitigen Registrierung mit register_block_type() kennt WordPress diese Zuordnung. Die Frontend-Dateien werden eingebunden, wenn der Block auf der Seite vorkommt.

Core-Blöcke im Theme ergänzen

Für CSS-Ergänzungen eines vorhandenen WordPress-Blocks bietet das Theme die Funktion wp_enqueue_block_style(). Das Beispiel registriert eine eigene Gestaltung für den Bild-Block:

add_action( 'init', function() {
	wp_enqueue_block_style(
		'core/image',
		[
			'handle' => 'ud-core-image',
			'src'    => get_theme_file_uri( 'assets/blocks/core-image.css' ),
			'path'   => get_theme_file_path( 'assets/blocks/core-image.css' ),
		]
	);
} );

Die CSS-Datei bleibt damit beim Theme und ist dem Block core/image zugeordnet. Eigene Blöcke verwalten ihre Dateien dagegen über die block.json.

Assets nach Zuständigkeit organisieren

Eigene Blöcke bringen ihre Styles und Skripte als Teil ihrer Registrierung mit. Das Theme ergänzt die WordPress-Core-Blöcke, deren Gestaltung Teil des projektspezifischen Designs ist.

Diese Zuordnung trennt Blockfunktion und Theme-Gestaltung. Editor und Website erhalten die Dateien im jeweils vorgesehenen Kontext.

Ergebnis

Block-Assets mit Funktion und Gestaltung verbinden

WordPress verbindet Dateien über die Blockregistrierung mit ihrem jeweiligen Einsatzbereich. Eigene Blöcke und Theme-Ergänzungen bleiben dadurch nachvollziehbar organisiert.

Assets im Block registrieren

Eigene Blöcke definieren Styles und Skripte direkt über ihre block.json.

Core-Stile im Theme ergänzen

Das Theme ordnet eigene CSS-Dateien den passenden WordPress-Core-Blöcken zu.

Dateien im Kontext laden

WordPress stellt Editor- und Frontend-Assets beim jeweiligen verwendeten Block bereit.