Автоматическое преобразование изображений в HEIF вызывает сбой галереи на Safari.

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

    wp_add_inline_script(
        'wp-block-library',
        "
        wp.hooks.addFilter(
            'blocks.registerBlockType',
            'custom/gallery-accept-filter',
            function(settings, name) {
                if (name === 'core/gallery') {
                    // Изменить атрибут accept для входных файлов
                    const originalEdit = settings.edit;
                    settings.edit = (props) => {
                        // Убедиться, что любой входной файл в интерфейсе блока не принимает HEIC/HEIF
                        const modifiedProps = wp.element.createElement('div', { ...props },
                            wp.element.createElement(originalEdit, { ...props })
                        );
                        setTimeout(() => {
                            document.querySelectorAll('input[type=\"file\"]').forEach(input => {
                                const accept = input.getAttribute('accept');
                                if (accept && (accept.includes('image/heic') || accept.includes('image/heif'))) {
                                    const newAccept = accept.replace(/image\/heic,?/g, '').replace(/image\/heif,?/g, '');
                                    input.setAttribute('accept', newAccept.trim());
                                }
                            });
                        }, 50);
                        return modifiedProps;
                    };
                }
                return settings;
            }
        );
        ",
        'after'
    );
}
add_action('enqueue_block_editor_assets', 'modify_gallery_block_accept');

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

Проблема автоматического преобразования изображений в формат HEIF в Safari: описание и решение

В последнем обновлении WordPress 6.7 была добавлена поддержка форматов изображений HEIC. Однако после обновления Safari на компьютерах Mac автоматически преобразует загружаемые изображения в формат HEIF, если это возможно. Это, в свою очередь, вызывает проблемы при использовании галерей изображений в редакторе WordPress, что может негативно сказаться на удобстве пользователей и работе сайта.

Характеристика проблемы

При загрузке изображений в разделе «Медиа» админ-панели WordPress все работает корректно: JPEG-изображения отображаются в медиа библиотеке и доступны для использования. Однако при загрузке изображений напрямую в блок галереи в редакторе они автоматически преобразуются в формат HEIC и отображаются в медиа библиотеке с некорректными именами файлов.

Также, несмотря на то что мобильные устройства обычно могут декодировать формат HEIC, в браузере Chrome на настольных ПК эти изображения не отображаются должным образом. В результате, проблема затрагивает значительное количество пользователей, использующих популярный браузер.

Решение проблемы

Одним из решений, найденных пользователями, является использование JavaScript для изменения атрибута accept в блоке галереи, чтобы исключить поддержку HEIC/HEIF. Это позволяет принудительно загружать изображения в формате JPEG вместо HEIC. Пример кода представлен ниже:

wp_add_inline_script(
    'wp-block-library',
    "
    wp.hooks.addFilter(
        'blocks.registerBlockType',
        'custom/gallery-accept-filter',
        function(settings, name) {
            if (name === 'core/gallery') {
                // Изменение атрибута accept для полей загрузки изображений
                const originalEdit = settings.edit;
                settings.edit = (props) => {
                    const modifiedProps = wp.element.createElement('div', { ...props },
                        wp.element.createElement(originalEdit, { ...props })
                    );
                    setTimeout(() => {
                        document.querySelectorAll('input[type=\"file\"]').forEach(input => {
                            const accept = input.getAttribute('accept');
                            if (accept && (accept.includes('image/heic') || accept.includes('image/heif'))) {
                                const newAccept = accept.replace(/image\/heic,?/g, '').replace(/image\/heif,?/g, '');
                                input.setAttribute('accept', newAccept.trim());
                            }
                        });
                    }, 50);
                    return modifiedProps;
                };
            }
            return settings;
        }
    );
    ",
    'after'
);
add_action('enqueue_block_editor_assets', 'modify_gallery_block_accept');

Этот код добавляет функтор к блокам в WordPress, который изменяет принимаемые форматы файлов, исключая HEIC/HEIF.

Ожидаемое решение

Проблема с преобразованием изображений в формат HEIC при использовании кнопки загрузки в изображениях блоках была зафиксирована как известная проблема в трекере ошибок WordPress (#62447). Это означает, что ожидается более стабильное и универсальное решение в обновлении WordPress 6.7.1.

Заключение

Хотя временное решение с использованием JavaScript может помочь избежать проблем с загрузкой изображений, важным шагом будет ожидание официального исправления в будущих обновлениях WordPress. Это позволит не только улучшить совместимость с браузерами, но и повысить общий пользовательский опыт. Тем временем предлагается следить за обновлениями и использовать временные меры для обеспечения стабильной работы вашего сайта.