Vordefinierte Seitenverhältnisse in WordPress

Obwohl ich problemlos ein paar feste Optionen zu einem SelectControl hätte hinzufügen können, macht es Sinn, die Core-Funktionalität zu nutzen und zu erweitern, wo immer es möglich ist. Die theme.json-Konfigurationsdatei erlaubt es, eine Reihe vordefinierter Seitenverhältnis-Optionen festzulegen, und meine React-Komponente verwendet useSettings (siehe Dokumentation*) aus dem block-editor-Package, um diese Optionen abzurufen.

Da die SelectControl-Komponente aus dem Core verlangt, dass die Einträge im Options-Array im value/label-Format vorliegen, parse ich die Werte, die von useSettings zurückkommen, bevor ich sie in der SelectControl implementiere.

import { useSettings } from '@wordpress/block-editor';
import { SelectControl } from '@wordpress/components';

const MyComponent = ({aspectRatio, setAttributes}) => {
	const [defaultRatios, themeRatios] = useSettings('dimensions.aspectRatios.default', 'dimensions.aspectRatios.theme');

	// Merge core and custom values
	const aspectRatios = [...(defaultRatios || []), ...(themeRatios || [])];

	// Build an array which I can use in SelectControl
	const aspectRatioOptions = aspectRatios.map((ratio) => {
		return {
			value: ratio.ratio,
			label: ratio.name,
		};
	});

	return <SelectControl 
		label={_x('Aspect ratio', 'SelectControl label', 'mytextdomain')}
		value={aspectRatio} 
		options={aspectRatioOptions} 
		onChange={(aspectRatio) => setAttributes({ aspectRatioDesktop })} />;
};

(* Die möglichen Schlüsselwerte, die man an useSettings übergeben kann, scheinen derzeit nicht dokumentiert zu sein. Danke an Aki, der mich in die richtige Richtung gewiesen hat.)