I am trying to extend the core/image block to add an option for a deferred image. I want to replace the src attribute of the image with an empty string and add the url as a data attribute to be loaded later.

I can use the "url" attribute to populate the data attribute in the html, however if I delete the src attribute then wordpress thinks I need to pick another image puts in the image selection inspector control. I'd like to be able to still see what image I selected in the backend but remove the src attribute in the frontend. Anyone know if this is possible?

Here is some code for reference

const addDeferredPropToImage = (element, blockType, attributes) => {
    if (blockType.name !== 'core/image') {
        return element;

    if (attributes.deferred) {

        element.props.children.props.children.props.children[0].props['data-src'] = attributes.url;

    return element;

wp.hooks.addFilter( 'blocks.getSaveElement', 'uwkc/get-save-content/get-save-element', addDeferredPropToImage );

If I try to remove the src attribute in that if clause that is when wordpress thinks I need to select a new image. It is there that I would like to also check whether I am in the edit screen or not.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.