Mit der Verwendung eines Block-Themes wollte ich wissen, wie man individuelles CSS in den Block-Editor einfügt, ohne explizit eine separate CSS-Datei zu laden. Ich wollte es auf dieselbe Art und Weise einfügen, wie der Block-Editor selbst.

Nach einer Suche fand ich den Weg, wie WordPress das macht. Dabei wird das CSS als Teil der BLock-Editor-Einstellungen geladen und befindet sich dort entweder im Index defaultEditorStyles (wo praktisch der Dateiinhalt aus wp-includes/css/dist/block-editor/default-editor-styles.css geladen wird) oder im Index styles. Letzterer beinhaltet alle Styles, um die aktuelle Seite zu rendern. Es ist ein Array mit einer Liste an Arrays, alle mit einem Index css und source, wobei ersteres den tatsächlichen CSS-Code beinhaltet und letzterer eine eindeutige Identifizierung angibt, woher der CSS-Code stammt.

Über den Filter block_editor_settings_all kannst du dann den styles-Array erweitern und dein eigenes CSS hinzufügen. In meinem Fall setze ich explizit eine individuelle Textarbe, wenn eine bestimmte Hintergrundfarbe definiert ist.

So sieht der Code dann aus:

/**
 * Enqueue inline styles for the editor.
 * 
 * @param	array	$settings Editor settings
 * @return	array Updated editor settings
 */
public static function my_theme_enqueue_inline_styles( array $settings ): array {
	// colors
	$settings['styles'][] = [
		'css' => '.has-blue-background-color a {
			color: var(--wp--preset--color--light);
		}
		
		.has-dark-background-color a {
			color: var(--wp--preset--color--light);
		}
		
		.has-dark-blue-background-color a {
			color: var(--wp--preset--color--orange);
		}
		
		.has-orange-background-color a {
			color: var(--wp--preset--color--dark-blue);
		}',
		'source' => 'my-theme',
	];
	
	return $settings;
}

\add_filter( 'block_editor_settings_all', 'my_theme_enqueue_inline_styles' );
Code-Sprache: PHP (php)

Auf diesem Weg musst du keine eigene CSS-Datei für den Block-Editor in WordPress laden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert