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

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!

• This reply was modified 3 years, 8 months ago by Ryan Kienstra.
• This reply was modified 3 years, 8 months ago by Ryan Kienstra.
• This reply was modified 3 years, 8 months ago by Ryan Kienstra.

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":""}}}}

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

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

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 3 years, 8 months ago by Ryan Kienstra.

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

Cheers!

Sure, have a great weekend!