Block-Editor: Eigene Block-Stile nur laden, wenn aktiv

Wenn du keine separaten Core-Block-Assets lädst, sondern Block-Stile registrierst, werden diese Stile immer geladen, auch wenn sie nicht benötigt werden. Das führt zu unnötiger Belastung, da CSS-Dateien geladen werden, selbst wenn sie nicht angewendet werden.

Voraussetzungen

In meinem Fall war should_load_separate_core_block_assets deaktiviert, ebenso wie das Laden des Core-Block-CSS insgesamt (da sich diese im Laufe der Zeit geändert haben bzw. ändern, aber ich sie als öffentliche API betrachte, die keine Änderungen einführen sollte, die zu verändertem Aussehen auf bestehenden Websites führen, was sie tun – aber das ist eine andere Geschichte), um sicherzustellen, dass nur das CSS des Themes geladen wird (das eine individuelle Version der Core-Block-Stile hinzufügt). Wenn du den Standard verwendest, insbesondere in einem Block-Theme, wird das Problem, das ich hier löse, nicht auftreten.

Registrierung des Block-Stils

Wenn ich einen Block-Stil in meinem Szenario registriere, wird jedes Mal, wenn ein Block gerendert wird, für den ich einen Block-Stil registriert habe, auch wenn der individuelle Block-Stil nicht verwendet wird, als separate CSS-Datei geladen (da ich ihn mit einer CSS-Datei registriert habe). Dieses wird jedoch nicht angewendet, da die Klasse is-style-<my-style> nicht zum Block hinzugefügt wird, was dementsprechend das Laden der Datei unnötig macht.

Früher sah mein Code so aus:

$style_data = [
	'dependencies' => [],
	'handle' => 'my_custom_style',
	'uri' => \get_template_directory_uri() . '/assets/block-styles/my-custom-style.css',
	'version' => (string) \filemtime( \get_template_directory() . '/assets/block-styles/my-custom-style.css' ),
];

\wp_register_style( $style_data['handle'], $style_data['uri'], $style_data['dependencies'], $style_data['version'] );
\register_block_style(
	'core/button',
	[
		'name' => 'my-custom-style',
		'label' => \__( 'My custom style', 'my-theme' ),
		'style_handle' => $style_data['handle'],
	]
);
Code-Sprache: PHP (php)

Auf diese Weise registriere ich zuerst ein Stil-Asset, das später über wp_enqueue_style verwendet wird, da es als style_handle in der Funktion register_block_style hinzugefügt wird.

Manuelles Laden

Anstatt den style_handle zur register_block_style hinzuzufügen, verwende den Filter render_block_{$this->name}, um deinen individuellen Stil nur bei Bedarf zu laden. Entferne demnach zuerst Zeile 14 aus dem obigen Code und lösche den style_handle-Schlüssel aus dem Array.

Überprüfe dann im Filter, ob die className im Format is-style-<my-style> existiert, was den Typ des Block-Stils anzeigt, und enqueue den Block-Style nur, wenn er mit dem Style übereinstimmt.

/**
 * Enqueue block styles.
 * 
 * @param	string	$block_content Block content
 * @param	array{blockName?: string, attrs: array{className?: string}}	$block Block data
 * @return	string Block content
 */
function my_theme_enqueue_block_styles( string $block_content, array $block ): string {
	$block_style_handles = [
		'my_custom_style',
	];
	
	foreach ( $block_style_handles as $block_style_handle ) {
		$block_style_name = \str_replace( '_', '-', $block_style_handle );
		
		if (
			! empty( $block['attrs']['className'] )
			&& \str_contains( $block['attrs']['className'], 'is-style-' . $block_style_name )
		) {
			\wp_enqueue_style( $block_style_handle );
		}
	}
	
	return $block_content;
}

\add_filter( 'render_block_core/button', 'my_theme_enqueue_block_styles', 10, 2 );
Code-Sprache: PHP (php)

Fazit

Der Umgang mit geladenen Stil-Dateien für klassische oder hybride Themes ist nach wie vor ein Thema und unbedingt notwendig. Überprüfe deinen Code jedes Mal, wenn du CSS hinzufügst, es könnte unerwartet geladen werden, wo du es nicht haben möchtest.