Adding a maximum height to the preview of the long blocks

[aktasfatih]

Description

Closes #24484

• The preview of large blocks exceeds the whole page.

How has this been tested?

• I created a table block with 200 rows and checked the preview.

Types of changes

• I added a maximum height of 700px to the preview of the blocks
• Fix: It now uses the height of the inserter minus the top position.
• The overflowing part of the tall block is hidden.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[senadir]

While this fixes the inserter, style switcher is still broken, I suggest you use max-height

[aktasfatih]

What should be the maximum height for the preview of the styles? I chose it to be 160px, which is a double of its minimum height of 80px. Would that be enough?

[aktasfatih]

This is what it looks like. I expanded the height of the separator line just to test the styles. It seems to successfully cut the long block.

[MichaelArestad]

@aktasfatih the design of the style previews is likely going to change. I think for now a max height of 160px is okay for now, though I'm not sure it's necessary for this PR.

[aktasfatih]

Should I remove the change for style previews or keep it? And what do you think about the preview of the main blocks? Thanks!

[MichaelArestad]

Should I remove the change for style previews or keep it?

I am unsure if it's necessary yet. I haven't encountered long blocks with previews so it's hard to say

And what do you think about the preview of the main blocks? Thanks!

The main block preview looks ace! Nice work!

[youknowriad]

The first screenshot in #24484 shows an undesirable effect for the styles preview. So if this ok design-wise, I think we should keep the min height.

@senadir What do you think here? Does it address your issues?

[youknowriad]

LGTM 👍