On my website, I want to change the default image size from full to the custom size ‘content_100’. That works fine when I update the default image size in the database (option field). Now I want to “upgrade” core/image blocks when editing an existing post. To update the sizeSlug of the block, I extend the registered block by my deprecation to migrate the size attribute:
const manageBlockDefaultOptions = function( settings, name ) {
try {
if ( name === 'core/image' ) {
if (settings.deprecated.filter(d => { return d?.name && d.name === 'apc_image_size_deprecation_full2content_100'; }).length === 0) {
settings.deprecated.unshift({
name: 'apc_image_size_deprecation_full2content_100',
attributes: settings.attributes,
migrate(attributes) {
return {
...attributes,
sizeSlug: 'content_100',
};
},
isEligible(attributes) {
return attributes?.sizeSlug === 'full';
},
save: settings.save,
});
}
}
} catch (err) {
console.error(err);
}
return settings;
};
wp.hooks.addFilter(
'blocks.registerBlockType',
'apc/manageBlockDefaultOptions',
manageBlockDefaultOptions
);
The attribute is migrating correctly, and also the blocks class names are changing to the new size. Sadly, the generated image dimensions and the image URL are the same as before. At the moment, I don’t know how to regenerate the image HTML. Is there anything wrong with my code? Any ideas to handle this scenario in Gutenberg?