Get theme.json data for component options

[jon4896]

Does anyone know of a way to get theme.json information to use as options for components like FontSizePicker and SelectControl?

In the example below, instead of hardcoding the values under fontSizes, I want to be able to feed in the theme's font sizes (if any exist).

import { __ } from '@wordpress/i18n';
import { useEffect, Component } from '@wordpress/element';
import { PanelBody, PanelRow, FontSizePicker } from '@wordpress/components';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';

import './editor.scss';


const fontSizes = [
	{
		name: __('Small'),
		slug: 'title-small',
		size: '16px',
	},
	{
		name: __('Medium'),
		slug: 'title-medium',
		size: '18px',
	},
	{
		name: __('Large'),
		slug: 'title-large',
		size: '22px',
	},
	{
		name: __('Extra Large'),
		slug: 'title-extra-large',
		size: '30px',
	},
];

export default function Edit(props) {

	const blockProps = useBlockProps();

	return (
		<div {...blockProps}>

			<InspectorControls>
				<FontSizePicker
					fontSizes={fontSizes}
					value={props.attributes.titleSize}
					onChange={(val) => props.setAttributes({ titleSize: val })}
				/>
			</InspectorControls>

		</div>
	);
}

[t-hamano]

Hi.
useSetting may solve this problem.

import { useSetting } from '@wordpress/block-editor';
const fontSizes = useSetting( 'typography.fontSizes' )

[jon4896]

Weird, it's breaking the block and throwing this console error:

[t-hamano]

Either of the following could be the cause.

1. Multiple imports from the same package:

// incorrect
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { useSetting } from '@wordpress/block-editor';

// correct
import { useBlockProps, useSetting , InspectorControls } from '@wordpress/block-editor';

2. Since this is a hook, it must be used at the root level of the component.

[tomektomczuk]

try {
   $themeJson = json_decode(file_get_contents(get_stylesheet_directory() . '/theme.json'), true, 512, JSON_THROW_ON_ERROR);
} catch (\JsonException $e) {
   }

and then add it though wp_localize_script()

[jon4896]

I'm not sure exactly how to execute that.

[ptechcode]

import { useSelect } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';

const { fontSizes } = useSelect( ( select ) => {
return select( blockEditorStore ).getSettings()
}, [] );

[AlejandroPerezMartin]

import { FontSizePicker } from '@wordpress/components';
import { useSetting } from '@wordpress/block-editor';

const fontSizes = useSetting('typography.fontSizes'); // gets the font data from theme.json

<FontSizePicker
    fontSizes={fontSizes}
    ...
/>