Limit block preview height.

[senadir]

Currently, blocks previews are shown as is, with no limits, causing very large previews for certain blocks, we should consider limiting the height.

Examples:

• Checkout block from the WooCommerce Blocks plugin (from a PR):
  

• A long reusable block
  

To reproduce
Steps to reproduce the behavior:

1. Create a long reusable block, containing several large blocks.
2. Try to preview it.
3. Notice that the block is taking the whole page.

Expected behavior
The block height should be limited

Screenshots

** Current workout **
Currently, I pass a isPreview attribute that adds .is-editor-preview, and I add some styles with it:

.is-editor-preview {
	max-height: 1000px;
	overflow: hidden;
	position: relative;
}

See this PR for examples.
Editor version (please complete the following information):

• WordPress version: 5.4.2
• Gutenberg version: 8.7

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version 84

[youknowriad]

I think for the style variations at least, having a max-height is probably a good idea.

[MichaelArestad]

I agree with limiting the height. I wonder if we can leverage vh units to make it a percentage of the viewport height. Perhaps something like calc(100vh - 84px). The second value is the height of the top toolbar plus 24px.

[aktasfatih]

I updated it to be as tall as the inserter minus the top position so it is symmetrical. Is this similar to what you have in mind?
This is what it looks like now,

[youknowriad]

The vh works for the preview in the inserter but not for the style variations.