Wordpress 6.7 now supports HEIC image formats. Since version 17, Safari (on Mac, at least) automatically converts any uploaded image to HEIF format if the input filetype allows that.
Uploading images in the Media section from WP admin works fine (you can see the uploaded JPGs in the media library), but when uploading directly to a Gallery block in the editor, the images get converted in HEIC and end up like that in the Media Library. Most mobile devices know how to decode them and viewing the page in Safari works fine, but they are not rendered properly in Chrome on desktops.
Another problem is that they get renamed to something that looks like a corrupt file (sample image below):
The only hotfix I found for this problem is hooking into the WP block library and adding an inline javascript that removes the HEIC/HEIF from the supported files - accept="image/heic" and thus forcing Safari to send the JPG to the server. The code I added is below:
wp_add_inline_script(
'wp-block-library',
"
wp.hooks.addFilter(
'blocks.registerBlockType',
'custom/gallery-accept-filter',
function(settings, name) {
if (name === 'core/gallery') {
// Modify the accept attribute for file inputs
const originalEdit = settings.edit;
settings.edit = (props) => {
// Ensure any file input in the block UI doesn't accept 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');
Did anyone find a better way to fix this issue?
Wordpress 6.7 now supports HEIC image formats. Since version 17, Safari (on Mac, at least) automatically converts any uploaded image to HEIF format if the input filetype allows that.
Uploading images in the Media section from WP admin works fine (you can see the uploaded JPGs in the media library), but when uploading directly to a Gallery block in the editor, the images get converted in HEIC and end up like that in the Media Library. Most mobile devices know how to decode them and viewing the page in Safari works fine, but they are not rendered properly in Chrome on desktops.
Another problem is that they get renamed to something that looks like a corrupt file (sample image below):
The only hotfix I found for this problem is hooking into the WP block library and adding an inline javascript that removes the HEIC/HEIF from the supported files - accept="image/heic" and thus forcing Safari to send the JPG to the server. The code I added is below:
wp_add_inline_script(
'wp-block-library',
"
wp.hooks.addFilter(
'blocks.registerBlockType',
'custom/gallery-accept-filter',
function(settings, name) {
if (name === 'core/gallery') {
// Modify the accept attribute for file inputs
const originalEdit = settings.edit;
settings.edit = (props) => {
// Ensure any file input in the block UI doesn't accept 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');
Did anyone find a better way to fix this issue?
This is a known issue. A fix is set to be included in release 6.7.1:
Targeted Fixes
[…]
The following are bugs that should be included if ready, but as understood now are not affecting as many people or are less problematic:
- […]
- Using the Upload button in image-based blocks in Safari unexpectedly converts images to HEIC with a temporary file name (#62447)