Block API: save called more frequently than expected

[ktmn]

Here's the block I used for testing:

wp.blocks.registerBlockType('gutenberg-boilerplate-esnext/hello-world', {
	title: 'Hello World',
	icon: 'universal-access-alt',
	category: 'layout',

	edit() {
		console.log('@@@@@@@@ hello world edit', Date.now());
		return <p>hello-world block.</p>;
	},

	save() {
		console.log('@@@@@@@@ hello world save', Date.now());
		return <p>Hello saved content.</p>;
	},
});

Here's what's happening:

I have custom code, theme and plugins though, can anyone reproduce this in a vanilla environment?

[tofumatt]

I don't see what the issue is–what is breaking for you?

Could you please try reproducing in a vanilla environment?

[ktmn]

@tofumatt Tested with 2017 and no plugins. Same thing. The gif contains the test block and paragraph block. When I type in the paragraph block nothing happens with the test block. But after autosave saves the page then typing in the paragraph block will call the test blocks save function after every change.

You can test it simply with the current dev build:

1. Add console.log to core/button's save() function.

2. Add core/button block and core/paragraph block to editor.

3. Save the page and reload.

4. Start typing in the paragraph and see that nothing is logged.

5. Then 10 sec later the autosave triggers and now when you're typing in the paragraph the core/button's save gets called... a lot.

Of course this is not tied to paragraph block, I think after the autosave every blocks save() function will be called on any TinyMCE change or something.

Maybe title is bad, nothing is "breaking" it's just working incredibly inefficiently.

[tofumatt]

Is this causing a slowdown or issue with the editor? I think extra renders after typing makes sense, we need to re-render the block's state once it's been updated.

I'm closing this as invalid because I don't see what the actual issue is. I think this is working as intended.

[aduth]

Both save and edit shouldn't be expensive render calls. They should simply construct the element, and it's up to @wordpress/element (React) to reconcile any changes as efficiently as possible.

That being said, with familiarity of when save is to be called, I don't expect it should be called as frequently as it is as shown here. Typically it should only need to be called at certain predefined intervals (initial validation, pre-save).

I still wouldn't classify anything as "broken" here, but I do think it's worth exploring why it is being called as often as it is.

[ktmn]

Is this causing a slowdown or issue with the editor?

With many blocks I'm sure it contributes. Although deeply nested blocks are still very slow when I get rid of this behavior by disabling autosave.

I think extra renders after typing makes sense, we need to re-render the block's state once it's been updated.

It's rendering the save() of all other blocks (that use TinyMCE(?)), not the one that's actually being edited. That does not contribute anything meaningful to the view of the editor as far as I can tell.

The key point being, this happens only after autosave has triggered.

[youknowriad]

closing as a duplicate of #10427