Block editor save results in validation error after changing attributes

[afragen]

@akirk It seems that adjusting the blocks frame size causes the block editor to add a surrounding <figure> tag to the iframe that contains the changed height or width. In this was only in the iframe.

This causes an invalid content error when trying to edit the post again.

Any ideas on how to fix this?

[afragen]

Also notice the undefined__content-wrapper in the opening tag. It seems className is undefined.

embed-pdf-viewer/blocks/index.js

Line 28 in 0177138

<figure className={`${className}__content-wrapper`}>

[afragen]

I think this is related. WordPress/gutenberg#10444

[afragen]

The console log in Firefox is showing the Block validation error as expecting to see the default height/width but actually seeing the changed height/width.

[afragen]

I did a bunch more digging, at least as much as I could.

It seems that in the renderEdit attr is correctly saving all the data. I don't know what Update does with that data.

The issue seems to be in renderEmbed that none of the saved attributes are brought into that function. This means that renderEmbed only ever sees default data.

The align seems to save and it passed to renderEmbed

When renderEdit calls renderEmbed all the parameters are passed. When renderEmbed is called outside of renderEdit only the default parameters and align are passed.

I hope some of this makes sense.

[afragen]

Also, no saved/changed data, except the alignment, survives a page reload.

[akirk]

Happy to take a look in the course of the week, aligning the generated HTML with the loading can be tricky. Thanks for the details, that helps me understand what you've already tried.

[afragen]

I think this is related.

WordPress/gutenberg#7016

WordPress/gutenberg#7242

For my reference:
https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-attributes/

https://github.com/WordPress/gutenberg-examples/blob/master/05-recipe-card-esnext/block.js

[afragen]

Also it seems adding a PDF via URL doesn’t save.

[afragen]

Perhaps this change. I haven’t tested.

embed-pdf-viewer/blocks/index.js

Lines 54 to 58 in 0177138

	return function (value) {
	const attr = {};
	attr[key] = value;
	setAttributes(attr);
	}

to

setAttributes( { key: value } );

This because setting a PDF from a media item which saves in JSON format works. Just brainstorming as saving an array seems to be problematic but saving it as JSON seems to work elsewhere.

[afragen]

Well the above wasn't it.

I think there's something in renderEmbed that isn't saving the attributes. Everything in the editor seems to work but never transfers over to a page reload in the editor.

[afragen]

@akirk So the issue seemed to be that an attribute of type number was not being stored but when changing to type string it was being stored. Both width and height were of type number, now they are working as type string   🤷‍♂️