Error with backgroundImage as attribute – can anyone help?

[theitteam]

Hey all,

So I have a component which renders the background image inline like this:

<figure className="be__figure" style={{
   backgroundImage: <code>url( ${props.attributes.beforeImgURL} )</code>
}}>

This works fine on the front end but when i refresh the editor – I get an error – this block appears to have been modified externally.

Here is the full error:

Expected:

<div class="wp-block-cgb-block-before-and-after"><div class="be__container"><div id="be__comparison"><figure class="be__figure" style="background-image:url( undefined )"><div class="be__handle"></div><div class="be__divisor" style="background-image:url( undefined )"></div></figure><input type="range" min="0" max="100" value="50" class="be__slider"/></div></div></div>

Actual:

<div class="wp-block-cgb-block-before-and-after">
    <div class="be__container">
        <div id="be__comparison">
            <figure class="be__figure" style="background-image:url( http://nqinjectables.test/wp-content/uploads/2018/03/banner-3.jpg )">
                <div class="be__handle"></div>
                <div class="be__divisor" style="background-image:url( http://nqinjectables.test/wp-content/uploads/2018/03/banner-2.jpg )"></div>
            </figure><input type="range" min="0" max="100" value="50" class="be__slider" /></div>
    </div>
</div>

Do i need to add a selector to my attribute maybe?

[theitteam]

Ooops I figured it out, i was trying to extract the background image with selectors but there is no need, changed my attributes to this:

		beforeImgURL: {
			type: "string",
		},
		beforeImgID: {
			type: "number"
		},

[Zac Gordon]

Nice! Good catch 🙂

[Author]

Posts