Вопрос или проблема
WordPress 6.7 теперь поддерживает форматы изображений HEIC. Начиная с версии 17, Safari (по крайней мере на Mac) автоматически конвертирует любое загружаемое изображение в формат HEIF, если входной тип файла это позволяет.
Загрузка изображений в разделе «Медиа» из админки WP работает нормально (вы можете увидеть загруженные JPG в медиатеке), но при загрузке напрямую в блок Галерея в редакторе изображения конвертируются в HEIC и оказываются такими в медиатеке. Большинство мобильных устройств умеют декодировать их, и просмотр страницы в Safari работает нормально, но они неправильно отображаются в Chrome на десктопах.
Еще одна проблема заключается в том, что они переименовываются во что-то, что выглядит как поврежденный файл (пример изображения ниже):
Единственный «горячий» фикс, который я нашел для этой проблемы, заключается в том, чтобы подключиться к библиотеке блоков WP и добавить встроенный JavaScript, который удаляет HEIC/HEIF из поддерживаемых файлов – accept="image/heic", таким образом заставляя Safari отправлять JPG на сервер. Код, который я добавил, приведен ниже:
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');
Кто-нибудь нашел лучший способ решить эту проблему?
Это известная проблема. Исправление должно быть включено в выпуск 6.7.1:
Целевые исправления
[…]
Следующие ошибки должны быть включены, если они готовы, но как сейчас понимается, они не затрагивают так много людей или менее проблематичны:
- […]
- Использование кнопки Загрузить в блоках на основе изображений в Safari неожиданно конвертирует изображения в HEIC с временным именем файла (#62447)
Ответ или решение
Проблема автоматического преобразования изображений в формат 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. Это позволит не только улучшить совместимость с браузерами, но и повысить общий пользовательский опыт. Тем временем предлагается следить за обновлениями и использовать временные меры для обеспечения стабильной работы вашего сайта.