Как получить пользовательские размеры шрифта и темы размеров шрифта?

Вопрос или проблема

    "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"
            }
        ]
    },
}

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

// Получить стандартные размеры шрифтов из theme.json
const themeFontSizes = useSelect((select) => {
    const settings = select('core/block-editor').getSettings();
    console.log('settings', settings);
    return settings?.typography?.fontSizes || [];
}, []);

Ответ или решение

Теория:
Для достижения цели объединения списков шрифтов из файла theme.json и пользовательских шрифтов из редактора WordPress Gutenberg, необходимо разобраться с основными механизмами работы системы стилей WordPress, а также функциями, которые позволяют извлекать данные об этих стилях. В WordPress, начиная с версии 5.8, появилась поддержка глобальных стилей через файл theme.json, что позволяет задавать параметры стилей, включая размеры шрифтов непосредственно в темах. Однако, редактор также позволяет пользователям добавлять и настраивать свои собственные стили, которые записываются в пользовательские параметры темы.

В редакторе Gutenberg также присутствует библиотека, которая позволяет извлекать настройки тем, используя функции типа useSetting и useSelect. Однако, вызовы этих функций в вашем примере возвращают разные значения в зависимости от наличия пользовательских настроек.

Пример:
Рассмотрим ваш текущий подход. Вы используете два основных способа для извлечения размеров шрифтов:

1. useSetting(‘typography.fontSizes’): Эта функция возвращает список размеров шрифтов. Однако, если пользователь задает свои собственные размеры шрифтов в редакторе, этот метод вернет только пользовательский список, игнорируя те, что заданы в theme.json.

2. useSelect((select) => {…}): Данный подход также использует глобальное состояние редактора для получения размеров шрифтов. Однако при использовании вашего специфичного написания также может возвращать измененные пользователем значения.

Применение:
Чтоб получить объединенный список размером шрифтов как из theme.json, так и из пользовательских настроек, можно предпринять следующие шаги:

1. Получение размеров шрифтов из theme.json: Можно напрямую загрузить и разобрать theme.json файл, если у вас есть такой доступ, или использовать серверные методы, чтобы извлечь эти настройки через PHP. Например, воспользовавшись функцией wp_get_theme_json_data().

2. Извлечение пользовательских настроек: Продолжайте использовать useSetting('typography.fontSizes') для динамического извлечения пользовательских настроек.

3. Объединение данных: Сначала используете данные, полученные из theme.json, а затем с помощью функции JavaScript, такой как Array.prototype.concat, объединяете с массивом пользовательских данных. Это позволит получить все текущие данные о шрифтах.

Ниже приведен пример кода, который демонстрирует данный подход:

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

const MyCustomBlock = () => {
    // Получаем пользовательские размеры шрифтов
    const customFontSizes = useSetting('typography.fontSizes') || [];

    // Извличение размеров шрифтов из theme.json
    const themeFontSizes = useSelect((select) => {
        const settings = select(blockEditorStore).getSettings();
        return settings?.typography?.fontSizes || [];
    }, []);

    // Объединение пользовательских и стандартных размеров шрифтов
    const combinedFontSizes = [...themeFontSizes, ...customFontSizes];

    // Фильтрация дубликатов по slug
    const uniqueFontSizes = combinedFontSizes.filter((fontSize, index, self) =>
        index === self.findIndex((t) => t.slug === fontSize.slug)
    );

    console.log('Все доступные размеры шрифтов:', uniqueFontSizes);

    return (
        <div>
            <h3>Доступные размеры шрифтов:</h3>
            <ul>
                {uniqueFontSizes.map((fontSize) => (
                    <li key={fontSize.slug}>
                        {fontSize.name} - {fontSize.size}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default MyCustomBlock;

Вывод:
Подход, описанный выше, поможет вам объединить и сохранить уникальные значения, полученные как из статических файлов темы, так и из пользовательских настроек. Данный метод не только предоставляет пользователю весь спектр доступных возможностей, но и позволяет избежать конфликтов или дублирования, обеспечивая плавный опыт работы с темами и стилями в WordPress.