Please expose registered aspect ratios in the block editor data store

[markhowellsmead]

What problem does this address?

This will allow extenders to use the registered aspect ratios in their own components / blocks. This would be useful as there is no aspect ratio component available.

const getAspectRatios = () => {
    const settings = wp.data.select('core/block-editor').getSettings();
    return settings?.aspectRatios || [];
};

const aspectRatios = useSelect(getAspectRatios, []);

[t-hamano]

I think you can get the default and theme settings via the useSettings hook. Does the below code help?

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

function MyComponent() {
	const [ defaultRatios, themeRatios ] = useSettings(
		'dimensions.aspectRatios.default',
		'dimensions.aspectRatios.theme'
	);

	console.log( defaultRatios );
	console.log( themeRatios );

	return <div>My Component</div>;
}

[markhowellsmead]

Ah, thanks Aki. That works fine when I merge the two arrays together. It's a shame that the options for useSettings aren't documented anywhere.

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

const [defaultRatios, themeRatios] = useSettings('dimensions.aspectRatios.default', 'dimensions.aspectRatios.theme');

const aspectRatios = [...(defaultRatios || []), ...(themeRatios || [])];

const aspectRatioOptions = aspectRatios.map((ratio) => {
	return {
		value: ratio.ratio,
		label: ratio.name,
	};
});

[t-hamano]

@markhowellsmead The useSettings API is documented here:

https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#usesettings

[markhowellsmead]

Yes, but the available option keys aren't.

[t-hamano]

Got it, maybe the documentation needs to be a bit more detailed.