I have a custom block where i want to get the theme fontSizes and custom fontSizes.

This are the settings in the theme.json

    "settings": {
    "typography": {
        "fontSizes": [
            {
                "name": "XS",
                "slug": "sm",
                "size": "12px"
            },
            {
                "name": "SM",
                "slug": "sm",
                "size": "14px"
            },
            {
                "name": "Base",
                "slug": "base",
                "size": "16px"
            },
            {
                "name": "LG",
                "slug": "lg",
                "size": "18px"
            },
            {
                "name": "XL",
                "slug": "xl",
                "size": "20px"
            },
            {
                "name": "2XL",
                "slug": "2xl",
                "size": "24px"
            },
            {
                "name": "3XL",
                "slug": "3xl",
                "size": "30px"
            },
            {
                "name": "4XL",
                "slug": "4xl",
                "size": "36px"
            },
            {
                "name": "5XL",
                "slug": "5xl",
                "size": "48px"
            }
        ]
    },
}

The user also has the option to add new font sizes in the theme editor.

If no custom font sizes have been set there and I try to load the fontSizes via useSetting('typography.fontSizes'), I receive the list from the theme.json.
However, as soon as a custom font size is created, useSetting('typography.fontSizes') only returns the list stored in the theme editor.

However, I want to retrieve both lists: the one from theme.json and the one stored in the WordPress Gutenberg backend. How can I achieve this?

const customFontSizes = useSetting('typography.fontSizes') || [];

// Get default theme.json font sizes
const themeFontSizes = useSelect((select) => {
    const settings = select('core/block-editor').getSettings();
    console.log('settings', settings);
    return settings?.typography?.fontSizes || [];
}, []);

Both functions customFontSizes and themeFontSizes returns the list of custom font sizes.

I have a custom block where i want to get the theme fontSizes and custom fontSizes.

This are the settings in the theme.json

    "settings": {
    "typography": {
        "fontSizes": [
            {
                "name": "XS",
                "slug": "sm",
                "size": "12px"
            },
            {
                "name": "SM",
                "slug": "sm",
                "size": "14px"
            },
            {
                "name": "Base",
                "slug": "base",
                "size": "16px"
            },
            {
                "name": "LG",
                "slug": "lg",
                "size": "18px"
            },
            {
                "name": "XL",
                "slug": "xl",
                "size": "20px"
            },
            {
                "name": "2XL",
                "slug": "2xl",
                "size": "24px"
            },
            {
                "name": "3XL",
                "slug": "3xl",
                "size": "30px"
            },
            {
                "name": "4XL",
                "slug": "4xl",
                "size": "36px"
            },
            {
                "name": "5XL",
                "slug": "5xl",
                "size": "48px"
            }
        ]
    },
}

The user also has the option to add new font sizes in the theme editor.

If no custom font sizes have been set there and I try to load the fontSizes via useSetting('typography.fontSizes'), I receive the list from the theme.json.
However, as soon as a custom font size is created, useSetting('typography.fontSizes') only returns the list stored in the theme editor.

However, I want to retrieve both lists: the one from theme.json and the one stored in the WordPress Gutenberg backend. How can I achieve this?

const customFontSizes = useSetting('typography.fontSizes') || [];

// Get default theme.json font sizes
const themeFontSizes = useSelect((select) => {
    const settings = select('core/block-editor').getSettings();
    console.log('settings', settings);
    return settings?.typography?.fontSizes || [];
}, []);

Both functions customFontSizes and themeFontSizes returns the list of custom font sizes.

• customization
• block-editor

1 Answer 1

Use useSettings() since useSetting() is deprecated.

Then, you can specify a further path with custom or theme to state what data you'd like to get:

// User-created presets.
useSettings('typography.fontSizes.custom');
// Theme-defined presets.
useSettings('typography.fontSizes.theme');

See this WordPress Playground for a working example.