Как добавить поддержку языков в собственном Gutenberg-блоке WordPress

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

Почему важно поддерживать мультиязычность в блоках Gutenberg

Редактор Gutenberg хранит данные блоков в формате HTML с комментариями, которые описывают атрибуты блока. При создании многоязычных сайтов важно, чтобы контент блоков корректно переводился и отображался в нужной локализации. Без правильной поддержки языков можно получить дублирование блоков или неправильный вывод переведенного контента.

К тому же, если вы хотите интегрироваться с плагинами перевода, такими как WPML или Polylang, нужно обеспечить совместимость блоков с их API и механизмами.

Основные подходы к добавлению поддержки языков в собственных блоках WordPress

1. Разделение контента блоков по языкам

Самый очевидный метод — хранить в базе данных версии блока для каждого языка. Тогда при выводе фронтенда нужно показывать блок, соответствующий текущему языку. Минус — дублирование данных и сложность управления.

2. Использование систем перевода внутри блока

В этом подходе блок содержит все языковые варианты в атрибутах, а на фронтенде с помощью JavaScript или PHP выводится нужный вариант в зависимости от языка.

3. Интеграция с WPML, Polylang и другими плагинами

Использование их API позволяет автоматически обрабатывать переводимый контент блоков, например, регистрировать строки для перевода или использовать собственные функции для вывода.

Реализация мультиязычного блока: пример кода

Рассмотрим пример создания блока с поддержкой двух языков — русского и английского — с хранением в атрибутах.

const { registerBlockType } = wp.blocks;
const { TextControl } = wp.components;
const { __ } = wp.i18n;

registerBlockType('wptranslate/multilang-block', {
    title: __('Мультиязычный блок', 'wptranslate'),
    icon: 'translation',
    category: 'common',
    attributes: {
        contentRu: { type: 'string', default: '' },
        contentEn: { type: 'string', default: '' },
    },
    edit({ attributes, setAttributes }) {
        const { contentRu, contentEn } = attributes;

        return (
            <div>
                <TextControl
                    label={__('Текст на русском', 'wptranslate')}
                    value={contentRu}
                    onChange={(value) => setAttributes({ contentRu: value })}
                />
                <TextControl
                    label={__('Text in English', 'wptranslate')}
                    value={contentEn}
                    onChange={(value) => setAttributes({ contentEn: value })}
                />
            </div>
        );
    },
    save({ attributes }) {
        const { contentRu, contentEn } = attributes;

        return (
            <div>
                <div className="lang-ru" style={{ display: 'none' }}>{contentRu}</div>
                <div className="lang-en" style={{ display: 'none' }}>{contentEn}</div>
            </div>
        );
    },
});

В этом примере в редакторе можно задать содержимое для двух языков, а на фронтенде мы пока скрываем оба варианта, чтобы потом динамически показать нужный по языку.

Динамический вывод нужного языка на фронтенде

Для отображения контента на правильном языке можно использовать JavaScript, который определит текущий язык сайта и отобразит соответствующий блок:

document.addEventListener('DOMContentLoaded', function() {
    const lang = document.documentElement.lang || 'ru';
    document.querySelectorAll('.lang-ru, .lang-en').forEach(function(el) {
        el.style.display = 'none';
    });
    const activeElements = document.querySelectorAll('.lang-' + lang);
    activeElements.forEach(function(el) {
        el.style.display = 'block';
    });
});

Этот скрипт прячет все языковые версии и показывает только ту, которая совпадает с атрибутом lang в теге html.

Интеграция с WPML и Polylang

Для корректной работы с WPML или Polylang нужно регистрировать блоки как переводимые или использовать API плагинов для управления переводами.

Например, для WPML можно использовать PHP-хук для регистрации строк блока:

add_action('init', function() {
    if (function_exists('icl_register_string')) {
        icl_register_string('wptranslate', 'wptranslate_multilang_block_content_ru', 'Текст блока на русском');
        icl_register_string('wptranslate', 'wptranslate_multilang_block_content_en', 'Block text in English');
    }
});

А в редакторе получать переводы через icl_t() или аналогичные функции.

Рекомендации по оптимизации и поддержке

• Используйте локализацию в JavaScript через wp.i18n, чтобы интерфейс блока был на нужном языке.
• Обрабатывайте динамические данные через REST API, если блок зависит от внешнего контента.
• Проверяйте совместимость с основными плагинами перевода и тестируйте блоки на разных языках.
• Если блок сложный и содержит много текстов, рассмотрите хранение перевода вне блока, используя кастомные типы записей или мета-поля.

Заключение

Добавление поддержки языков в собственных Gutenberg-блоках — задача, требующая продуманного подхода к хранению и отображению контента. Мы рассмотрели несколько способов реализации, включая пример кода и интеграцию с популярными плагинами перевода. Соблюдение этих рекомендаций позволит создать удобные для пользователей мультиязычные блоки и улучшить качество сайта на WordPress.

Если хотите расширить функциональность блоков или автоматизировать перевод, обратите внимание на плагины из WPShop.ru, например, Clearfy Pro для оптимизации или WPRemark для работы с переводами.