Preserve block height during re-render to avoid content jumping

[iandunn]

Problem

When a user changes some block controls, and the block needs to fetch new data from an API, the block's contents are replaced with a spinner. That changes the block's height, which can cause content jumping.

For example, if you have two tall blocks in a page, and you edit the bottom one, the height of the entire page will be drastically shorter, causing the viewport to jump up to the top of the page. Then, a second later, when the API request returns, the block height will be be restored to its previous height. You'll then have to scroll back down to return to the place you were before, so that you can see the changes and continue editing the block.

https://cloudup.com/cRnMfoye5CF

That capture shows an example of a custom block using SSR, but I was able to reproduce the same behavior with core blocks as well, like Comments.

Possible Solution

I think the block height should be preserved, so that the user isn't interrupted, confused, and forced to scroll to get back to where they originally were.

Gutenberg 3.9.0
Firefox 63

[youknowriad]

I'm going to close this issue now. On the framework level, there's no way for Gutenberg to know that there's an async process in progress and preserve the height.

[iandunn]

At the very least, I think it should be fixed in the Core blocks, because it's a really bad UX.

That could lead to a standardized approach, and the framework could support that, so that it's easy for all blocks to implement.

Here's a rough idea:

import { preserveHeight, restoreNaturalHeight } from '@wordpress/editor';

preserveHeight(); // sets height/max-height equal to current height, overflow: hidden
// make my api calls and update props
restoreNaturalHeight(); // reverses previous operations with a smooth transition

We could come up with a standard solution for the Core blocks, and make it easy for plugins to use it as well.

[youknowriad]

Ok let's reopen for further consideration. I still think it's not worth the complexity and the added API personally.