Block-Editor: Stileinstellung für individuelle Elemente

Veröffentlicht: 22. Januar 2026 von Matze – Kommentar hinterlassen

Individuelle Stileinstellungen für individuelle Elemente könnten so einfach sein: Den Selektor über die Block-Selector-API in der block.json definieren, für den die Stile aktiv sein sollen. Aber leider funktioniert das so nicht. Wenn du möchtest, dass der Stil bei einem individuellen Element innerhalb deines Blocks greift und nicht für den Block als Ganzes, musst du das manuell implementieren. Glücklicherweise hat Aki Hamanono das „Wie“ auf GitHub geteilt.

Inline-Stile für dein individuelles Element funktional bekommen

Zuerst musst du die Unterstützung via supports für die Stile definieren, die du unterstützen möchtest. In meinem Fall waren das border, color und shadows. Außen- und Innenabstände haben dieses Problem nicht, daher gab es hier nichts weiter zu tun. Immerhin eine gute Nachricht. 🙂

Das Definieren der Unterstützung für die genannten Bereiche sieht in meiner block.json folgendermaßen aus:

	…
	"supports": {
		"__experimentalBorder": {
			"radius": true,
			"color": true,
			"width": true,
			"style": true,
			"__experimentalDefaultControls": {
				"radius": true,
				"color": true,
				"width": true,
				"style": true
			},
			"__experimentalSkipSerialization": true
		},
		"color": {
			"gradients": true
			"background": true,
			"gradients": true,
			"text": true,
			"__experimentalSkipSerialization": true
		},
		"shadow": {
			"__experimentalSkipSerialization": true
		},
	}
	…
Code-Sprache: JSON / JSON mit Kommentaren (json)

Da border aktuell als „experimentell“ deklariert ist, musst du es auch als solches angeben. Der wichtige Teil hier ist, dass immer dann ein __experimentalSkipSerialization auf true setzen musst, wenn du den jeweiligen Teil für ein Nicht-Standard-Element verwenden willst (also nicht das umgebende Element des Blocks).

Dann musst du in der Edit-Funktion deines Blocks diese Stileinstellungen verarbeiten und sie manuell beim gewünschten Element anwenden:

import {
	useBlockProps,
	__experimentalUseBorderProps as useBorderProps,
	__experimentalGetShadowClassesAndStyles as useShadowProps,
	__experimentalUseColorProps as useColorProps,
} from '@wordpress/block-editor';
import clsx from 'clsx';

export default function Edit( props ) {
	…
	const blockProps = useBlockProps();
	const borderProps = useBorderProps( props.attributes );
	const colorProps = useColorProps( props.attributes );
	const shadowProps = useShadowProps( props.attributes );
	…
	return (
		<div { ...blockProps }>
			<span
				className={ clsx(
					borderProps.className,
					shadowProps.className,
					colorProps.className
				) }
				style={ {
					...borderProps.style,
					...colorProps.style,
					...shadowProps.style,
				} }
			/>
		</div>
	);
}
Code-Sprache: JavaScript (javascript)

Diese Stil-Eigenschaften beinhalten eine className-Zeichenfolge (oder undefined) und ein style-Objekt mit dem jeweiligen anzuwendenden CSS. Im Beispiel habe ich sie bei einem individuellen span-Element angewendet.

Für die Save-Funktion läuft es ähnlich, aber mit einem anderen Selektor:

import {
	useBlockProps,
	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
} from '@wordpress/block-editor';
import clsx from 'clsx';

export default function Save( props ) {
	…
	const blockProps = useBlockProps().save();
	const borderProps = getBorderClassesAndStyles( props.attributes );
	const colorProps = getColorClassesAndStyles( props.attributes );
	const shadowProps = getShadowClassesAndStyles( props.attributes );
	…
	return (
		<div { ...blockProps }>
			<span
				className={ clsx(
					borderProps.className,
					colorProps.className,
					shadowProps.className
				) }
				style={ {
					...borderProps.style,
					...colorProps.style,
					...shadowProps.style,
				} }
			/>
		</div>
	);
}Code-Sprache: JavaScript (javascript)

Fazit

Ich hoffe, dass der selector, den man in der block.json setzen kann, früher oder später (besser früher) auch für nicht-globale Stile verwendet werden kann, da es dann nicht erforderlich machen müsste, denselben Code mehrfach zu schreiben, wenn man das Design hier individualisieren möchte. Bis dahin können wir es wenigstens so umsetzen, wie zuvor gesehen. Und es ist definitiv einfacher als eine individuelle Farboption hinzuzufügen. 🤯