JavaScript for WordPress Forums Gutenberg Development Error with backgroundImage as attribute – can anyone help?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #43099

    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:

    <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>
    <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>

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


    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 🙂

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.