When using the block.getSaveElement hook can you output different markup based on whether or not you are in the edit view or the live page view?

by

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.

0

Leave a Comment