Images not saving – “Error loading block: Invalid parameter(s): attributes”

  • Resolved zacharyjrich

    (@zacharyjrich)


    5 years, 2 months ago

    Hello, I’m trying to update my site from Block Lab Version 1.2.2. The Block Lab update and migration to Genesis Custom Blocks was successful, but I am now getting an error with images not saving, which is similar to an issue we had with earlier versions of Block Lab.

    I’m getting a 400 in the console and the block itself says “Error loading block: Invalid parameter(s): attributes”. Using Local WP and WordPress Version 5.6.2.

    Thanks so much!

    • This topic was modified 5 years, 2 months ago by zacharyjrich.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor Ryan Kienstra

    (@ryankienstra)

    5 years, 2 months ago

    Hi @zacharyjrich,
    So great you joined us from Block Lab! Really excited to have you.

    Thanks for bringing this up. Could you please help with a few things so I can debug that?

    1. When you see that error in the block editor, could you run this in the JS console and paste the result in this support topic?

    
wp.data.select( 'core/editor' ).getEditedPostContent()

    2. Then, could you please go to /wp-admin > Custom Blocks > All Blocks, and click the block that had the error?

    https://cldup.com/QUn3u7G3Rw.png

    3. Next, could you please run this in the JS console and paste the result in this support topic?

    
wp.data.select( 'core/editor' ).getEditedPostContent()

    https://cldup.com/w1g_VI6yvI.png

    Those snippets will show the post content, so I can reproduce this and ideally help you.

    Thanks, Zachary!

    Thread Starter zacharyjrich

    (@zacharyjrich)

    5 years, 2 months ago

    Hi Ryan, thanks for the quick response!

    The 400 error:

    api-fetch.min.js?ver=4dec825c071b87c57f687eb90f7c23c3:2 POST https://mysite.local/wp-json/wp/v2/block-renderer/genesis-custom-blocks/large?context=edit&post_id=6&_locale=user

    Answer to 1.

    – This is the block after the migration but before trying to update the image and is working as expected

    <!-- wp:genesis-custom-blocks/large {"image-src":"https://mysite.local/wp-content/uploads/2019/04/my_image_1920x884.jpg","horizontal-alignment":"horizontal-alignment-right","title-tag":["h3"],"title":"My Title.","cta":"MORE","cta-link-to":"/my-url"} /-->

    – After trying to update the image and getting the error

    <!-- wp:genesis-custom-blocks/large {"image-src":2081,"horizontal-alignment":"horizontal-alignment-right","title-tag":["h3"],"title":"My Title","cta":"MORE","cta-link-to":"/my-url"} /-->

    Answer to 3.

    {"genesis-custom-blocks\/large":{"name":"large","title":"Block Large","icon":"genesis_custom_blocks","category":"layout","keywords":[""],"fields":{"block-class-name":{"name":"block-class-name","label":"Block Class Name","control":"text","type":"string","location":"editor","order":0,"help":"","default":"","placeholder":"","maxlength":null},"image-src":{"name":"image-src","label":"Image Src","control":"image","type":"string","location":"editor","order":1,"help":"","default":""},"horizontal-alignment":{"name":"horizontal-alignment","label":"Horizontal Alignment","control":"select","type":"string","location":"editor","order":2,"help":"","options":[{"label":"horizontal-alignment-left","value":"horizontal-alignment-left"},{"label":"horizontal-alignment-center","value":"horizontal-alignment-center"},{"label":"horizontal-alignment-right","value":"horizontal-alignment-right"}],"default":""},"title-tag":{"name":"title-tag","label":"Title Tag","control":"multiselect","type":"array","location":"editor","order":3,"help":"","options":[{"label":"h1","value":"h1"},{"label":"h2","value":"h2"},{"label":"h3","value":"h3"},{"label":"h4","value":"h4"},{"label":"h5","value":"h5"},{"label":"h6","value":"h6"}],"default":["h2"]},"title-class-name":{"name":"title-class-name","label":"Title Class Name","control":"text","type":"string","location":"editor","order":4,"help":"","default":"","placeholder":"","maxlength":null},"title":{"name":"title","label":"Title","control":"text","type":"string","location":"editor","order":5,"help":"","default":"","placeholder":"","maxlength":null},"text":{"name":"text","label":"Text","control":"text","type":"string","location":"editor","order":6,"help":"","default":"","placeholder":"","maxlength":null},"cta":{"name":"cta","label":"CTA","control":"text","type":"string","location":"editor","order":7,"help":"","default":"","placeholder":"","maxlength":null},"cta-link-to":{"name":"cta-link-to","label":"CTA Link To","control":"text","type":"string","location":"editor","order":8,"help":"","default":"","placeholder":"","maxlength":null},"initial-letter":{"name":"initial-letter","label":"Initial Letter","control":"text","type":"string","location":"editor","order":9,"help":"","default":"","placeholder":"","maxlength":null},"initial-letter-horizontal-alignment":{"name":"initial-letter-horizontal-alignment","label":"Initial Letter Horizontal Alignment","control":"select","type":"string","location":"editor","order":10,"help":"","options":[{"label":"horizontal-alignment-left","value":"horizontal-alignment-left"},{"label":"horizontal-alignment-center","value":"horizontal-alignment-center"},{"label":"horizontal-alignment-right","value":"horizontal-alignment-right"}],"default":""}}}}

    Plugin Contributor Ryan Kienstra

    (@ryankienstra)

    5 years, 2 months ago

    Hi @zacharyjrich,
    Thanks for your patience.

    Here’s a workaround that fixed it in my local:

    1. Go to the GCB editor of the block
    2. Click the ‘Image Src’ field
    3. Change its ‘Field type’ to anything other than ‘Image’
    4. Change its ‘Field type’ back to ‘Image’
    5. Click update
    6. Go back to the block editor and see if it’s fixed

    https://cldup.com/Cnn_dBItOQ.gif

    The data type of the image field might have changed, completely my fault 🙂

    Thread Starter zacharyjrich

    (@zacharyjrich)

    5 years, 2 months ago

    Hello @ryankienstra , this indeed fixed the error occurring in WP when updating an image. Unfortunately, it’s still replacing the image-src with a number.

    image-src":2081

    VS

    image-src":"https://mysite.local/wp-content/uploads/2019/04/my_image_1920x884.jpg

    We’re hoping to use GCB alongside WP GraphQL, WP Gatsby, and WP GraphQL Gutenberg to query blocks to use with Gatsby on the frontend. So without a proper image path, we can’t query images. Any recommendations for a fix?

    Thanks again for all of your help! Very much appreciated

    Plugin Contributor Ryan Kienstra

    (@ryankienstra)

    5 years, 2 months ago

    Hi @zacharyjrich,
    Good question.

    That makes complete sense that you need the image URL, not just the ID.

    Hm, that might be a tough one to save the image-src as a string URL.

    The data type of the image field is integer:
    https://github.com/studiopress/genesis-custom-blocks/blob/43a4716b55f3cdf62100b2087aee5ba446226878/php/Blocks/Controls/Image.php#L29

    It’s hacky, but would you be able to enter the full image SRC in a URL field? Of course, that’s brittle 🙂

    Otherwise, maybe a GraphQL query for the URL of the image? You’ve probably thought about that, and of course that’d be far from ideal.

    • This reply was modified 5 years, 2 months ago by Ryan Kienstra.
    Thread Starter zacharyjrich

    (@zacharyjrich)

    5 years, 2 months ago

    @ryankienstra Thanks again for your help! Will continue to look for solutions.

    Cheers!

    Plugin Contributor Ryan Kienstra

    (@ryankienstra)

    5 years, 2 months ago

    Sure, have a great weekend!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Images not saving – “Error loading block: Invalid parameter(s): attributes”’ is closed to new replies.